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: kzbin.info/www/bejne/qKell5KahtCsbbM 👈 So now you know the basics of wireframing! What next? Subscribe to our channel for more instructional UX content: kzbin.info 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

[@silviauralia]

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.

[@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!

[@muslimahtranquil1280]

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

[@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.

[@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!

[@junaidsiddiqui2]

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

[@careerfoundry]

Thanks! Glad you enjoyed it!

[@evangeline5152]

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

[@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.

[@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

[@aravindk325]

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

[@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.

[@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!

[@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!

[@Mrbabak100]

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

[@rawlingssamuel5236]

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

[@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

[@Make_This_Day_Great]

Compendious. Thank you so much CareerFoundry!

[@mukondelelic.mulaudzi8357]

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

[@claudiabogarin7475]

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

[@adekunleolumide3729]

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

[@chekaroxas9262]

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

[@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.

[@waleadesina8746]

I love the wireframe Illustration. simple and unique

[@careerfoundry]

Thanks, glad you enjoyed it!

[@ugobiko6070]

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

[@nwokochachijioke7497]

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

[@prasiddhakarki]

Thanks Im just starting Ux and this was very helpful

[@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

[@awsomesauce347]

Thank you for demystifying the process of wire framing.

[@dineshskhedkar4242]

Thanks for the simplified knowledge and information on wireframe.

[@josephsaaid]

Concise and value packed video. Thank you!

[@careerfoundry]

Thanks Joseph! Glad it was useful!

[@cuervo7029]

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

[@NiceChange]

So easy to watch and learn..great work

[@johnmajor2149]

Thank you for the simple explanation of wireframe

[@retiredhooper4168]

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

[@libujohn4059]

Dee, Thank you so much your wonderful video❤️

[@MiMi-dc9qs]

This was soo useful. Thank you !!!

[@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!

[@MS-fn2qv]

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

[@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!

[@bukolabello2959]

Thanks so much for this. Very insightful

[@shehrymirza5615]

bundle of thanks for your guidance

[@mryusif-hs8ty]

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

[@ujjwalverma2007]

Extremely well explained!

[@aks6240]

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

[@the_oneironaut]

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

[@careerfoundry]

Thanks José, glad you found it useful!

[@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.

[@rileyz2505]

Thanks, this video helped me a lot!

[@rua3630]

This is so clear! thx a lot!

[@BELIEVER366]

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

[@muritalaisah5948]

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

[@careerfoundry]

Thank you, glad you enjoyed the video!

[@shivamshipankar1781]

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

[@bae-ambo5689]

I’m really learning a lot, thanks for sharing

[@chekaroxas9262]

thank you for sharing this with us!!!

[@fille570]

Thank you! this is super helpful

[@rubysararoy9349]

Superb video for beginners

[@achyutmishra3006]

explained very well.... thank you

[@naufalhelmisausan7017]

Thanks very much, so well explaining nice work

[@angeangoh5919]

Thanks a bunch, this has been very helpful. Cameroon

[@wMot589]

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

[@damio2888]

most efficient learning vid I've watched

[@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

[@florsinforma]

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

[@623_shailendramishra4]

Best video on wireframing

[@Bunjee1]

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

[@beverlynventurina9094]

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

[@darshan__janoti]

Thank you ma'am 🙏 this was very helpful 🥰

[@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?

[@nazanin_ashrafi]

It was very helpful thank you ^^

[@haneefahmed9748]

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

[@careerfoundry]

Thanks, glad you enjoyed the video!

[@danushortstories]

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

[@careerfoundry]

Thanks Oshada, glad you found this video helpful!

[@NicKreates]

Great content, thank you!

[@anamikamishra5521]

Really helpful..thanks!

[@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?

[@privatesoul]

very well explained. Simple Easy and Great 👍.

[@careerfoundry]

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

[@shaydenoliver8018]

Very helpful thank you.

[@triples2961]

really thanks this vd is useful

[@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!

[@Tushar-ou5pz]

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

[@chimhztechy3931]

Great Video. Thank you

[@balvinderkaurkhokhar6682]

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

[@gracedim6976]

Great tutorial ❣️

[@MukulDevKallara]

Nice videos for beginners. Love it

[@careerfoundry]

Glad you liked it!

[@bienea4189]

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

[@wetiot]

With copy & paste functionality in digital wireframing, I find it much easier & quicker to try out different ideas and layouts digitally. I forgo the whole freehand sketching part.

[@careerfoundry]

This can definitely be a good method to try out different designs! Although for more specific needs and custom designs, freehand sketching can be more flexible and intuitive.

[@danekwunife4893]

Which tool do you use?

[@nileshchakrabarty9605]

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

[@awesomeexclusives3563]

best video on creating wireframes,!

[@eddyLama]

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

[@nameislee]

So helpful. Thanks a lot 🙏

[@careerfoundry]

Glad it was helpful Jac!

[@cessakinyi]

In place of paper sketching, I use a tool called Excalidraw that's easy to collaborate on and share. Love the video 🎉

[@dylanm7638]

well explained, thank you so much

[@careerfoundry]

Thanks Dylan! Glad you enjoyed!

[@Atom-Mercury]

Thank you very much.

[@sociallydrained123]

When completing wireframes, do you eventually have generic templates saved that you reference when starting new projects? Or do you always start from scratch?

[@hugodullaham7947]

Thank you!

[@MindAJInside]

Love it, thank you!

[@careerfoundry]

You are so welcome!

[@danditto6145]

Please do a video on Witeframing with FIGMA and one on moving Photos to Figma from Adobe. Great videos!! Speaker is appropriately timed and understandable!! Yeah Her!

[@atikpolock575]

Thanks for your video

[@careerfoundry]

Our pleasure!

[@thameemansari5401]

Awesome 😎👍 thanks

[@Stevekevlar_]

Nice this video helped me thank you :)

[@careerfoundry]

Thanks Dev, glad you enjoyed it!

[@aan224]

Beautiful presentation with smile :)

[@careerfoundry]

Glad you enjoyed the content Anita!

[@nine4400]

This is so cool. 😀