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

Пікірлер: 332

  • @careerfoundry
    @careerfoundry3 жыл бұрын

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

    @bipulkumar3149

    2 жыл бұрын

    TTY you to the at tuturor tgtttt5tttttgtt

  • @silviauralia

    @silviauralia

    2 жыл бұрын

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

  • @anjalikumari6119

    @anjalikumari6119

    Жыл бұрын

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

  • @lifewithsubham

    @lifewithsubham

    Жыл бұрын

    It's like learning and relearning agai..

  • @MarkYoung_0711

    @MarkYoung_0711

    5 ай бұрын

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

  • @muslimahtranquil1280
    @muslimahtranquil12802 жыл бұрын

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

  • @evangeline5152
    @evangeline5152 Жыл бұрын

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

  • @ShauntProductions
    @ShauntProductions2 жыл бұрын

    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

    @careerfoundry

    2 жыл бұрын

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

  • @aravindk325
    @aravindk3252 жыл бұрын

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

  • @junaidsiddiqui2
    @junaidsiddiqui22 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks! Glad you enjoyed it!

  • @anwarmalandy1822
    @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!

  • @sehrishameen5453
    @sehrishameen54532 жыл бұрын

    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.

  • @uchennaanochilionye4313
    @uchennaanochilionye43132 жыл бұрын

    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

    @omindivinoja0789

    3 ай бұрын

    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.

  • @Make_This_Day_Great
    @Make_This_Day_Great3 жыл бұрын

    Compendious. Thank you so much CareerFoundry!

  • @Mrbabak100
    @Mrbabak10011 ай бұрын

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

  • @rawlingssamuel5236
    @rawlingssamuel5236 Жыл бұрын

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

  • @claudiabogarin7475
    @claudiabogarin7475 Жыл бұрын

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

  • @chekaroxas9262
    @chekaroxas9262 Жыл бұрын

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

  • @byAlexfromua
    @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

  • @adekunleolumide3729
    @adekunleolumide3729 Жыл бұрын

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

  • @awsomesauce347
    @awsomesauce3478 ай бұрын

    Thank you for demystifying the process of wire framing.

  • @dineshskhedkar4242
    @dineshskhedkar42422 жыл бұрын

    Thanks for the simplified knowledge and information on wireframe.

  • @ugobiko6070
    @ugobiko60702 жыл бұрын

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

  • @mukondelelic.mulaudzi8357
    @mukondelelic.mulaudzi8357 Жыл бұрын

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

  • @nwokochachijioke7497
    @nwokochachijioke7497 Жыл бұрын

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

  • @johnmajor2149
    @johnmajor21497 күн бұрын

    Thank you for the simple explanation of wireframe

  • @NiceChange
    @NiceChange Жыл бұрын

    So easy to watch and learn..great work

  • @prasiddhakarki
    @prasiddhakarki11 ай бұрын

    Thanks Im just starting Ux and this was very helpful

  • @TaHa-zc1yb
    @TaHa-zc1yb29 күн бұрын

    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

  • @Calumrussell88
    @Calumrussell883 жыл бұрын

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

  • @edmaxwell-wood6533

    @edmaxwell-wood6533

    3 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

    Glad you like them Calum! Thanks!

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

    Thanks Ed!

  • @cuervo7029
    @cuervo70292 жыл бұрын

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

  • @SusanTamrakar
    @SusanTamrakar3 жыл бұрын

    Hands down the best content for starters

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

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

  • @retiredhooper4168
    @retiredhooper41682 жыл бұрын

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

  • @mryusif-hs8ty
    @mryusif-hs8ty Жыл бұрын

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

  • @waleadesina8746
    @waleadesina87462 жыл бұрын

    I love the wireframe Illustration. simple and unique

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks, glad you enjoyed it!

  • @Athaleff
    @Athaleff3 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

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

  • @josephsaaid
    @josephsaaid2 жыл бұрын

    Concise and value packed video. Thank you!

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks Joseph! Glad it was useful!

  • @libujohn4059
    @libujohn4059 Жыл бұрын

    Dee, Thank you so much your wonderful video❤️

  • @bukolabello2959
    @bukolabello29593 жыл бұрын

    Thanks so much for this. Very insightful

  • @damio2888
    @damio2888 Жыл бұрын

    most efficient learning vid I've watched

  • @MS-fn2qv
    @MS-fn2qv3 ай бұрын

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

  • @ujjwalverma2007
    @ujjwalverma20072 жыл бұрын

    Extremely well explained!

  • @MiMi-dc9qs
    @MiMi-dc9qs Жыл бұрын

    This was soo useful. Thank you !!!

  • @623_shailendramishra4
    @623_shailendramishra4 Жыл бұрын

    Best video on wireframing

  • @shehrymirza5615
    @shehrymirza56157 ай бұрын

    bundle of thanks for your guidance

  • @mrCetus
    @mrCetus2 жыл бұрын

    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.

  • @shivamshipankar1781
    @shivamshipankar17812 жыл бұрын

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

  • @aks6240
    @aks6240 Жыл бұрын

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

  • @MarkYoung_0711
    @MarkYoung_07115 ай бұрын

    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.

  • @angeangoh5919
    @angeangoh5919 Жыл бұрын

    Thanks a bunch, this has been very helpful. Cameroon

  • @rubysararoy9349
    @rubysararoy93497 ай бұрын

    Superb video for beginners

  • @bae-ambo5689
    @bae-ambo5689 Жыл бұрын

    I’m really learning a lot, thanks for sharing

  • @wMot589
    @wMot5892 жыл бұрын

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

  • @laizamaebaway7710
    @laizamaebaway77102 жыл бұрын

    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

    @tracybrown4491

    2 жыл бұрын

    Same!

  • @rajkawle4476

    @rajkawle4476

    2 жыл бұрын

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

  • @rajkawle4476

    @rajkawle4476

    2 жыл бұрын

    @@tracybrown4491 same mee to

  • @rileyz2505
    @rileyz25052 жыл бұрын

    Thanks, this video helped me a lot!

  • @BELIEVER366
    @BELIEVER3666 ай бұрын

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

  • @naufalhelmisausan7017
    @naufalhelmisausan70179 ай бұрын

    Thanks very much, so well explaining nice work

  • @haneefahmed9748
    @haneefahmed97482 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks, glad you enjoyed the video!

  • @fille570
    @fille5702 жыл бұрын

    Thank you! this is super helpful

  • @achyutmishra3006
    @achyutmishra3006 Жыл бұрын

    explained very well.... thank you

  • @rua3630
    @rua36302 жыл бұрын

    This is so clear! thx a lot!

  • @chekaroxas9262
    @chekaroxas9262 Жыл бұрын

    thank you for sharing this with us!!!

  • @the_oneironaut
    @the_oneironaut2 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks José, glad you found it useful!

  • @florsinforma
    @florsinforma2 ай бұрын

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

  • @aaxiom31
    @aaxiom312 жыл бұрын

    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

    @careerfoundry

    2 жыл бұрын

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

  • @muritalaisah5948
    @muritalaisah59484 ай бұрын

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

  • @careerfoundry

    @careerfoundry

    4 ай бұрын

    Thank you, glad you enjoyed the video!

  • @darshan__janoti
    @darshan__janoti9 ай бұрын

    Thank you ma'am 🙏 this was very helpful 🥰

  • @codenamegrant
    @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.

  • @awesomeexclusives3563
    @awesomeexclusives356311 ай бұрын

    best video on creating wireframes,!

  • @Bunjee1
    @Bunjee12 ай бұрын

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

  • @beverlynventurina9094
    @beverlynventurina9094 Жыл бұрын

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

  • @danushortstories
    @danushortstories2 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks Oshada, glad you found this video helpful!

  • @nileshchakrabarty9605
    @nileshchakrabarty9605 Жыл бұрын

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

  • @privatesoul
    @privatesoul2 жыл бұрын

    very well explained. Simple Easy and Great 👍.

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

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

  • @jadxplorer5250
    @jadxplorer52503 жыл бұрын

    This is very much helpful. Thank you.

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

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

  • @maplebloomsmyanmar6441
    @maplebloomsmyanmar64412 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

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

  • @nazanin_ashrafi
    @nazanin_ashrafi3 жыл бұрын

    It was very helpful thank you ^^

  • @cristianmunoz5459
    @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

  • @eddyLama
    @eddyLama2 жыл бұрын

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

  • @balvinderkaurkhokhar6682
    @balvinderkaurkhokhar6682 Жыл бұрын

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

  • @Tushar-ou5pz
    @Tushar-ou5pz Жыл бұрын

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

  • @anamikamishra5521
    @anamikamishra55213 жыл бұрын

    Really helpful..thanks!

  • @letsmakemusic7132
    @letsmakemusic71322 жыл бұрын

    I can watch her tutorials all day😂😍

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks! Glad you enjoy them!

  • @triples2961
    @triples2961 Жыл бұрын

    really thanks this vd is useful

  • @shaydenoliver8018
    @shaydenoliver80182 жыл бұрын

    Very helpful thank you.

  • @gracedim6976
    @gracedim6976 Жыл бұрын

    Great tutorial ❣️

  • @NicKreates
    @NicKreates11 ай бұрын

    Great content, thank you!

  • @chimhztechy3931
    @chimhztechy3931 Жыл бұрын

    Great Video. Thank you

  • @Atom-Mercury
    @Atom-Mercury Жыл бұрын

    Thank you very much.

  • @dylanm7638
    @dylanm76383 жыл бұрын

    well explained, thank you so much

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

    Thanks Dylan! Glad you enjoyed!

  • @Gadrawingz
    @Gadrawingz Жыл бұрын

    Beautiful woman with good teaching tricks! I'm happily learning!

  • @sociallydrained123
    @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?

  • @animeshrose
    @animeshrose2 жыл бұрын

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

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    You're welcome! Hopefully you interview went well!

  • @MukulDevKallara
    @MukulDevKallara2 жыл бұрын

    Nice videos for beginners. Love it

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Glad you liked it!

  • @bienea4189
    @bienea4189 Жыл бұрын

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

  • @hajatianarajaonarivony2749
    @hajatianarajaonarivony27497 ай бұрын

    I like her positive vibes :)

  • @nameislee
    @nameislee3 жыл бұрын

    So helpful. Thanks a lot 🙏

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

    Glad it was helpful Jac!

  • @CerseiS
    @CerseiS2 жыл бұрын

    OH my god! This was the best video ever

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks, we appreciate your kind words!

  • @aan224
    @aan2243 жыл бұрын

    Beautiful presentation with smile :)

  • @careerfoundry

    @careerfoundry

    3 жыл бұрын

    Glad you enjoyed the content Anita!

  • @rakeshgubbala8253
    @rakeshgubbala82532 жыл бұрын

    your communication skills are exceptional.

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

    Thanks!

  • @hugodullaham7947
    @hugodullaham7947 Жыл бұрын

    Thank you!

  • @cessakinyi
    @cessakinyi6 ай бұрын

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

  • @dors.graffiti
    @dors.graffiti2 жыл бұрын

    Thanks for sharing very valuable information. Greetings from Peru

  • @careerfoundry

    @careerfoundry

    2 жыл бұрын

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

  • @atikpolock575
    @atikpolock575 Жыл бұрын

    Thanks for your video

  • @careerfoundry

    @careerfoundry

    Жыл бұрын

    Our pleasure!