How To Create Your First Wireframe (A UX Tutorial)

What exactly is a wireframe, and why are they so important to the UX design process? This video will give you an introduction to wireframing and equip you with the mindset and skills to create your own paper or digital wireframes, from scratch!

What questions do you have around wireframing? Do you have any tips or advice to share with our audience? Let us know in the comments!

For an in-depth article on wireframing, you can check out this article on the CareerFoundry blog:

You can find a range of great tools for wireframing with a quick Google search, many of which are free to use and often browser-based!

Some of our favorite Wireframing tools include:

Video chapters / Timestamps:

(00:00) Intro
(00:29) What exactly is a wireframe?
(01:15) Different types of wireframes
(02:46) Let's build your first wireframe
(06:21) Digitizing your first wireframe
(11:46) Outro

Thanks for watching!

#UXDesign #Wireframe #WireframingTutorial

Want more from CareerFoundry?

Check out our other social media channels and blog here:

For more information on our programs, visit us at:

#UX #UXdesign #WhatIsUXdesign

How To Create Your First Wireframe (A UX Tutorial) 2021

[careerfoundry]

Start your own journey into UX Design with our free 6-day UX short course.


What tips can you share for rapid wireframing? Do you have a favourite wireframing tool or technique you can share with our audience? Let us know in the comments!

[janetmarcosx]

I'm over the moon about this! In no time, I was able to create my first wireframe. Thanks a million for your help!

[muslimahtranquil]

I created my first wireframe . Thanks to you. Much love

[shauntecristo]

Dee, thank you so much for this! In 12 minutes learned so much and feeling more confident already on this first step in UX/UI! Thank you!

[laizamaebaway]

I am an IT student and wireframe is one of our activity.. Thank you cause through this video, I've learned how to make it.

[uchennaanochilionye]

Thank you so much for this video. I'm just starting out in UX/UI and this is the first video I've watched on the wireframe
topic. Very concise, clear and straight to the point. I'm only realizing that all of these design components are things I already know and use in my everyday life. I'm so pumped to be doing this professionally!!! I thank you from the bottom of my heart for this video!😍🥰🤩🧡❤

[MarkYoung_]

One way i started to wireframe was to look at real samples from apps i liked on my phone. Then i did screen capture and saved them in image files on my desktop (airdrop'd them there), then I use the images of the app screens as the basis of my own wireframe components. It saved me some time to do it this way.

[SusanTamrakar]

Hands down the best content for starters

[Calumrussell]

Love these technical walk-throughs! Nice edit too! Thanks!

[sehrishameen]

Hi there.. above all, I wanna admit that I constantly had a smile on my face while listening to you. thank you for such a positive learning vibe.<3

[sasha_malinovska]

That's great! I faced lots of struggles making my wireframes in a complex way before realizing it makes no sense & that I need to learn a way to wireframe in a simple way

[evangeline]

This tutorial is everything I need now. Thank you so much

[TaHa-zcyb]

I like the video so much, The way you explained everything with a calm voice and a pro methode. I could not ask for more.
Thank you

[MS-fnqv]

These videos are great, but honestly you seem like the nicest person!

[junaidsiddiqui]

This is great !! A quick and crisp overview with hands - on. Thank you !

[waleadesina]

I love the wireframe Illustration. simple and unique

[greatandres-snrw]

hi just did my first wire frame i need more training and i will love to see more of your videos

[damio]

most efficient learning vid I've watched

[mryusif-hsty]

Thank you, I've been able to create my wireframes just now.

[animeshrose]

Thank you so much. I have a interview for the post of APM in 6 days.