How To Create Your First Wireframe (A UX Tutorial)

📲 Curious about a career in UX Design? Book a call with a program advisor: bit.ly/3HwYAZc
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!
In this video, Dee Scarano-a UX designer with over a decade’s worth of experience in the UX industry-will give you a complete introduction to wireframing, and show you step by step how to create your first wireframes, both with pen and paper, and with a free online tool, Wireframe.cc!
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:
bit.ly/WhatExactlyIsWireframin...
Interested in making a career change into UX design? Get started by signing up for our free, 6 day short course: bit.ly/BecomeAUXDesigner
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:
Wireframe.cc (featured in the video) - wireframe.cc/
Adobe XD - www.adobe.com/products/xd.html
Balsamiq - balsamiq.com/
Figma - www.figma.com/
Marvel - marvelapp.com/
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:
🔍 linktr.ee/CareerFoundry​
For more information on our programs, visit us at:
🖥 careerfoundry.com/
#UX #UXdesign #WhatIsUXdesign
How To Create Your First Wireframe (A UX Tutorial) 2021
• How To Create Your Fir...

[@careerfoundry]

Start your own journey into UX Design with our free 6-day UX short course.
Check our our full video explainer of the course, here: ruclips.net/video/rvBf_dQky7Q/видео.html 👈
So now you know the basics of wireframing! What next? Subscribe to our channel for more instructional UX content: ruclips.net/user/careerfoundry
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!

[@bipulkumar3149]

TTY you to the at tuturor tgtttt5tttttgtt

[@notion_aura]

UIZARD, thats literally good tools every designer need to know:)

[@anjalikumari6119]

hey I am Indian and can I come to Germany and attend your course?

[@lifewithsubham]

It's like learning and relearning agai..

[@MarkYoung_0711]

I appreciated the production quality of this helpful lesson. And i liked the instructors vocal qualities and the editing quality.

[@janetmarcos707]

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

[@muslimahtranquil1280]

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

[@ShauntProductions]

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!

[@careerfoundry]

Thanks! We're glad you found this video informative and useful to start your career!

[@uchennaanochilionye4313]

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!😍🥰🤩🧡❤

[@omindivinoja0789]

If you started UX/UI in last year can you tell me how your experience with it up until now? I'm studying to get started in it as well. I just wanna know about the career side form a new starter.

[@evangeline5152]

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

[@junaidsiddiqui2]

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

[@careerfoundry]

Thanks! Glad you enjoyed it!

[@sehrishameen5453]

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.

[@adekunleolumide3729]

Thank you so much for this wonderful video. Very precise and straight to the point. I found it very helpful.

[@Mrbabak100]

I just want to thank you and your team from the bottom of my heart for making this awesome video. !!!!

[@aravindk325]

Excellent walk-through! It is so simple! I thought this is something very technical!

[@anwarmalandy1822]

Wonderful, As a 21 experienced print media graphic designer to a UI/UX Designer, to me, this is very much valuable and subscribed for more further packs!

[@TaHa-zc1yb]

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

[@chekaroxas9262]

Man, you're rocks! Thank You for your course !!! I've learned so much!!!

[@rawlingssamuel5236]

Your hand sketching is so neat. I love it. Thanks for this video. It was very helpful 🙂

[@Make_This_Day_Great]

Compendious. Thank you so much CareerFoundry!

[@Calumrussell88]

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

[@edmaxwell-wood6533]

I agree! So cool to see both the freehand and digital wireframing in action. Loved it.

[@careerfoundry]

Glad you like them Calum! Thanks!

[@careerfoundry]

Thanks Ed!

[@claudiabogarin7475]

thank you for this tutorial ! my first wireframe ! i'm so happy for this. thank you

[@ugobiko6070]

Thank you so much for the lectures, I learned a lot.

[@dineshskhedkar4242]

Thanks for the simplified knowledge and information on wireframe.

[@laizamaebaway7710]

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.

[@tracybrown4491]

Same!

[@rajkawle4476]

Hi laiza..m also learning although m mech.engg

[@rajkawle4476]

@@tracybrown4491 same mee to

[@cuervo7029]

THANK YOU SO MUCH!!!! I needed this, Great Video!

[@mukondelelic.mulaudzi8357]

Thank you so much for this easy to follow guide, as an Instructional Designer I found it quite useful 😊

[@diamondangelinyang3132]

wow! i love the way you made it simple and clear. thank you very much. i love your smile 😍😍😍😍😍😍😍😍

[@nwokochachijioke7497]

Thank you for this tutorial. Still much relevant even to date. ☺

[@Athaleff]

This helps so much! Can't wait to start practicing! 🤓

[@careerfoundry]

Thanks, glad to hear it was helpful! Let us know if you enjoy Wireframing.cc!

[@libujohn4059]

Dee, Thank you so much your wonderful video❤️

[@NiceChange]

So easy to watch and learn..great work

[@MS-fn2qv]

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

[@awsomesauce347]

Thank you for demystifying the process of wire framing.

[@bukolabello2959]

Thanks so much for this. Very insightful

[@josephsaaid]

Concise and value packed video. Thank you!

[@careerfoundry]

Thanks Joseph! Glad it was useful!

[@MiMi-dc9qs]

This was soo useful. Thank you !!!

[@byAlexfromua]

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

[@aks6240]

Thank you so much for your presentation, it's a really useful video.

[@shivamshipankar1781]

Thank you so much, You saved me at last moment of an assignment :)

[@waleadesina8746]

I love the wireframe Illustration. simple and unique

[@careerfoundry]

Thanks, glad you enjoyed it!

[@retiredhooper4168]

Excellent presentation and context!.......I'm hooked!

[@mrCetus]

Really great & very simple to understand. The way Dee explains, it makes the topic very simple for everyone. I think digital wireframe is the best option than paper coz it will save lots of paper. I really like all those fun parts in the last part of making a video.

[@mryusif-hs8ty]

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

[@SusanTamrakar]

Hands down the best content for starters

[@careerfoundry]

Thank you Susan! That's very kind feedback! We have more videos like this on the way!

[@rua3630]

This is so clear! thx a lot!

[@shehrymirza5615]

bundle of thanks for your guidance

[@prasiddhakarki]

Thanks Im just starting Ux and this was very helpful

[@rileyz2505]

Thanks, this video helped me a lot!

[@ujjwalverma2007]

Extremely well explained!

[@bae-ambo5689]

I’m really learning a lot, thanks for sharing

[@chekaroxas9262]

thank you for sharing this with us!!!

[@johnmajor2149]

Thank you for the simple explanation of wireframe

[@florsinforma]

Thank you so much! I've learned lots, specially from your smile.
Blessings

[@aaxiom31]

Thank you for this most excellent and concise content. Whatever you do, DO NOT get to the point where you think that leaving out your out-takes is a good idea. :-)

[@careerfoundry]

Thanks Phil, glad you're enjoying the videos! We'll make sure to include them in the upcoming videos too!

[@muritalaisah5948]

Many thanks for this lecture. You made it simple and easy to understand!

[@careerfoundry]

Thank you, glad you enjoyed the video!

[@BELIEVER366]

Thanks 😊 very much for this video 😊.. just a minutes have grabbed what have being worrying about all this while

[@maplebloomsmyanmar6441]

thank you so much this is really helpful and you are such a good teacher

[@careerfoundry]

Thanks, glad it was useful! Are there any other topics you'd like us to make content about?

[@the_oneironaut]

Very well explained. Great content!
Also, lucid dreams can help a lot with everything.

[@careerfoundry]

Thanks José, glad you found it useful!

[@fille570]

Thank you! this is super helpful

[@naufalhelmisausan7017]

Thanks very much, so well explaining nice work

[@wMot589]

Thank you so much. very well explained wireframe. Much love from Burundi

[@MarkYoung_0711]

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.

[@damio2888]

most efficient learning vid I've watched

[@codenamegrant]

Thanks so much, Im trying to move into additional roles in my company, and this is great start to UI/UX. I'll also checkout the link you mentioned.

[@623_shailendramishra4]

Best video on wireframing

[@haneefahmed9748]

you are so happy when you teach. It's great!!
😄😄😄

[@careerfoundry]

Thanks, glad you enjoyed the video!

[@achyutmishra3006]

explained very well.... thank you

[@greatandres-sn7rw]

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

[@darshan__janoti]

Thank you ma'am 🙏 this was very helpful 🥰

[@nazanin_ashrafi]

It was very helpful thank you ^^

[@Bunjee1]

Very good tutortial for entry level ux designers ! Please Make more videos creating more wireframes.

[@jadxplorer5250]

This is very much helpful. Thank you.

[@careerfoundry]

Hey, we are glad you found this helpful! Is there anything else you'd like to see?

[@NicKreates]

Great content, thank you!

[@eddyLama]

I love your voice so much I get caught up and re-watch these videos 3 ou 4 times 😅

[@danushortstories]

Simple & Very Helpful lesson.I am from SL.
Thank you! 😍

[@careerfoundry]

Thanks Oshada, glad you found this video helpful!

[@anamikamishra5521]

Really helpful..thanks!

[@privatesoul]

very well explained.
Simple Easy and Great 👍.

[@careerfoundry]

Thanks Mohammed, we are glad you found this video useful!

[@beverlynventurina9094]

Thank you ver much ma'am this is usefull for my course as an IT student

[@triples2961]

really thanks this vd is useful

[@angeangoh5919]

Thanks a bunch, this has been very helpful. Cameroon

[@shaydenoliver8018]

Very helpful thank you.

[@balvinderkaurkhokhar6682]

Really really help full for begainner very usefull and detail video thank very much😄😄

[@dylanm7638]

well explained, thank you so much

[@careerfoundry]

Thanks Dylan! Glad you enjoyed!

[@bienea4189]

Thank you for this! Super cool video! A+++

[@Tushar-ou5pz]

Very good ...thank you...very interesting and useful..and enjoyed..👍💫

[@gracedim6976]

Great tutorial ❣️

[@awesomeexclusives3563]

best video on creating wireframes,!

[@MukulDevKallara]

Nice videos for beginners. Love it

[@careerfoundry]

Glad you liked it!

[@chimhztechy3931]

Great Video. Thank you

[@nameislee]

So helpful. Thanks a lot 🙏

[@careerfoundry]

Glad it was helpful Jac!

[@rubysararoy9349]

Superb video for beginners

[@cristianmunoz5459]

TNice tutorials was excellent man, thank you so much! I'm a 40yr old noob that's always wanted to try making soft and never got around to it. I'm

[@letsmakemusic7132]

I can watch her tutorials all day😂😍

[@careerfoundry]

Thanks! Glad you enjoy them!

[@nileshchakrabarty9605]

Orsum, Really ur teaching is ... I m speechless

[@MindAJInside]

Love it, thank you!

[@careerfoundry]

You are so welcome!

[@animeshrose]

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

[@careerfoundry]

You're welcome! Hopefully you interview went well!

[@aan224]

Beautiful presentation with smile :)

[@careerfoundry]

Glad you enjoyed the content Anita!

[@CerseiS]

OH my god! This was the best video ever

[@careerfoundry]

Thanks, we appreciate your kind words!

[@Stevekevlar_]

Nice this video helped me thank you :)

[@careerfoundry]

Thanks Dev, glad you enjoyed it!

[@Atom-Mercury]

Thank you very much.

[@hugodullaham7947]

Thank you!

[@dors.graffiti]

Thanks for sharing very valuable information. Greetings from Peru

[@careerfoundry]

You're welcome! Glad you found it informative and welcome to the channel!

[@atikpolock575]

Thanks for your video

[@careerfoundry]

Our pleasure!