How To Create Your First Wireframe (A UX Tutorial)

Рет қаралды 569,843

Күн бұрын

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

Пікірлер: 331

@careerfoundry 3 жыл бұрын

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: kzfaq.info/get/bejne/qNxymcKVttHdZ4U.html 👈 So now you know the basics of wireframing! What next? Subscribe to our channel for more instructional UX content: kzfaq.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 2 жыл бұрын

TTY you to the at tuturor tgtttt5tttttgtt

@silviauralia 2 жыл бұрын

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 5 ай бұрын

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

@muslimahtranquil1280 2 жыл бұрын

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

@ShauntProductions 2 жыл бұрын

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 2 жыл бұрын

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

@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

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

@evangeline5152 Жыл бұрын

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

@MarkYoung_0711 5 ай бұрын

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.

@sehrishameen5453 2 жыл бұрын

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.

@Mrbabak100 11 ай бұрын

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

@claudiabogarin7475 11 ай бұрын

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

@chekaroxas9262 Жыл бұрын

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

@aravindk325 2 жыл бұрын

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

@junaidsiddiqui2 2 жыл бұрын

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

@careerfoundry 2 жыл бұрын

Thanks! Glad you enjoyed it!

@rawlingssamuel5236 Жыл бұрын

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

@awsomesauce347 7 ай бұрын

Thank you for demystifying the process of wire framing.

@uchennaanochilionye4313 2 жыл бұрын

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

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

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

@adekunleolumide3729 Жыл бұрын

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

@prasiddhakarki 11 ай бұрын

Thanks Im just starting Ux and this was very helpful

@TaHa-zc1yb 17 күн бұрын

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

@ugobiko6070 2 жыл бұрын

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

@mryusif-hs8ty 11 ай бұрын

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

@libujohn4059 Жыл бұрын

Dee, Thank you so much your wonderful video❤️

@nwokochachijioke7497 Жыл бұрын

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

@dineshskhedkar4242 2 жыл бұрын

Thanks for the simplified knowledge and information on wireframe.

@cuervo7029 2 жыл бұрын

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

@NiceChange Жыл бұрын

So easy to watch and learn..great work

@Calumrussell88 3 жыл бұрын

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

@edmaxwell-wood6533 3 жыл бұрын

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

@careerfoundry 3 жыл бұрын

Glad you like them Calum! Thanks!

@careerfoundry 3 жыл бұрын

Thanks Ed!

@Make_This_Day_Great 3 жыл бұрын

Compendious. Thank you so much CareerFoundry!

@MS-fn2qv 3 ай бұрын

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

@bukolabello2959 3 жыл бұрын

Thanks so much for this. Very insightful

@aks6240 Жыл бұрын

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

@BELIEVER366 5 ай бұрын

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

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

@Athaleff 3 жыл бұрын

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

@careerfoundry 3 жыл бұрын

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

@mrCetus 2 жыл бұрын

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.

@shehrymirza5615 7 ай бұрын

bundle of thanks for your guidance

@waleadesina8746 2 жыл бұрын

I love the wireframe Illustration. simple and unique

@careerfoundry 2 жыл бұрын

Thanks, glad you enjoyed it!

@rileyz2505 2 жыл бұрын

Thanks, this video helped me a lot!

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

This was soo useful. Thank you !!!

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

I’m really learning a lot, thanks for sharing

@retiredhooper4168 2 жыл бұрын

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

@fille570 2 жыл бұрын

Thank you! this is super helpful

@josephsaaid 2 жыл бұрын

Concise and value packed video. Thank you!

@careerfoundry 2 жыл бұрын

Thanks Joseph! Glad it was useful!

@naufalhelmisausan7017 8 ай бұрын

Thanks very much, so well explaining nice work

@shivamshipankar1781 2 жыл бұрын

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

@florsinforma Ай бұрын

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

@rua3630 2 жыл бұрын

This is so clear! thx a lot!

@wMot589 2 жыл бұрын

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

@chekaroxas9262 Жыл бұрын

thank you for sharing this with us!!!

@ujjwalverma2007 2 жыл бұрын

Extremely well explained!

@beverlynventurina9094 Жыл бұрын

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

@laizamaebaway7710 2 жыл бұрын

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 2 жыл бұрын

Same!

@rajkawle4476 2 жыл бұрын

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

@rajkawle4476 2 жыл бұрын

@@tracybrown4491 same mee to

@Bunjee1 Ай бұрын

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

@darshan__janoti 9 ай бұрын

Thank you ma'am 🙏 this was very helpful 🥰

@muritalaisah5948 4 ай бұрын

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

@careerfoundry 4 ай бұрын

Thank you, glad you enjoyed the video!

@achyutmishra3006 11 ай бұрын

explained very well.... thank you

@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

@623_shailendramishra4 Жыл бұрын

Best video on wireframing

@haneefahmed9748 2 жыл бұрын

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

@careerfoundry 2 жыл бұрын

Thanks, glad you enjoyed the video!

@damio2888 Жыл бұрын

most efficient learning vid I've watched

@maplebloomsmyanmar6441 2 жыл бұрын

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

@careerfoundry 2 жыл бұрын

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

@SusanTamrakar 3 жыл бұрын

Hands down the best content for starters

@careerfoundry 3 жыл бұрын

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

@nazanin_ashrafi 3 жыл бұрын

It was very helpful thank you ^^

@anamikamishra5521 3 жыл бұрын

Really helpful..thanks!

@balvinderkaurkhokhar6682 Жыл бұрын

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

@cessakinyi 6 ай бұрын

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

@shaydenoliver8018 2 жыл бұрын

Very helpful thank you.

@jadxplorer5250 2 жыл бұрын

This is very much helpful. Thank you.

@careerfoundry 2 жыл бұрын

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

@danushortstories 2 жыл бұрын

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

@careerfoundry 2 жыл бұрын

Thanks Oshada, glad you found this video helpful!

@nileshchakrabarty9605 Жыл бұрын

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

@the_oneironaut 2 жыл бұрын

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

@careerfoundry 2 жыл бұрын

Thanks José, glad you found it useful!

@angeangoh5919 Жыл бұрын

Thanks a bunch, this has been very helpful. Cameroon

@awesomeexclusives3563 11 ай бұрын

best video on creating wireframes,!

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

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

@animeshrose 2 жыл бұрын

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

@careerfoundry 2 жыл бұрын

You're welcome! Hopefully you interview went well!

@NicKreates 11 ай бұрын

Great content, thank you!

@privatesoul 2 жыл бұрын

very well explained. Simple Easy and Great 👍.

@careerfoundry 2 жыл бұрын

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

@chimhztechy3931 Жыл бұрын

Great Video. Thank you

@aaxiom31 2 жыл бұрын

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 2 жыл бұрын

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

@eddyLama 2 жыл бұрын

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

@dylanm7638 3 жыл бұрын

well explained, thank you so much

@careerfoundry 3 жыл бұрын

Thanks Dylan! Glad you enjoyed!

@rubysararoy9349 7 ай бұрын

Superb video for beginners

@triples2961 Жыл бұрын

really thanks this vd is useful

@nameislee 2 жыл бұрын

So helpful. Thanks a lot 🙏

@careerfoundry 2 жыл бұрын

Glad it was helpful Jac!

@bienea4189 Жыл бұрын

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

@gracedim6976 Жыл бұрын

Great tutorial ❣️

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

Thank you very much.

@MukulDevKallara 2 жыл бұрын

Nice videos for beginners. Love it

@careerfoundry 2 жыл бұрын

Glad you liked it!

@hugodullaham7947 Жыл бұрын

Thank you!

@danditto6145 2 жыл бұрын

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!