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
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
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.
I created my first wireframe . Thanks to you. Much love
This tutorial is everything I need now. Thank you so much
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!
Excellent walk-through! It is so simple! I thought this is something very technical!
This is great !! A quick and crisp overview with hands - on. Thank you !
@careerfoundry
2 жыл бұрын
Thanks! Glad you enjoyed it!
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!
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.
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.
Compendious. Thank you so much CareerFoundry!
I just want to thank you and your team from the bottom of my heart for making this awesome video. !!!!
Your hand sketching is so neat. I love it. Thanks for this video. It was very helpful 🙂
thank you for this tutorial ! my first wireframe ! i'm so happy for this. thank you
Man, you're rocks! Thank You for your course !!! I've learned so much!!!
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
Thank you so much for this wonderful video. Very precise and straight to the point. I found it very helpful.
Thank you for demystifying the process of wire framing.
Thanks for the simplified knowledge and information on wireframe.
Thank you so much for the lectures, I learned a lot.
Thank you so much for this easy to follow guide, as an Instructional Designer I found it quite useful 😊
Thank you for this tutorial. Still much relevant even to date. ☺
Thank you for the simple explanation of wireframe
So easy to watch and learn..great work
Thanks Im just starting Ux and this was very helpful
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
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!
THANK YOU SO MUCH!!!! I needed this, Great Video!
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!
Excellent presentation and context!.......I'm hooked!
Thank you, I've been able to create my wireframes just now.
I love the wireframe Illustration. simple and unique
@careerfoundry
2 жыл бұрын
Thanks, glad you enjoyed it!
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!
Concise and value packed video. Thank you!
@careerfoundry
2 жыл бұрын
Thanks Joseph! Glad it was useful!
Dee, Thank you so much your wonderful video❤️
Thanks so much for this. Very insightful
most efficient learning vid I've watched
These videos are great, but honestly you seem like the nicest person!
Extremely well explained!
This was soo useful. Thank you !!!
Best video on wireframing
bundle of thanks for your guidance
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.
Thank you so much, You saved me at last moment of an assignment :)
Thank you so much for your presentation, it's a really useful video.
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.
Thanks a bunch, this has been very helpful. Cameroon
Superb video for beginners
I’m really learning a lot, thanks for sharing
Thank you so much. very well explained wireframe. Much love from Burundi
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
Thanks, this video helped me a lot!
Thanks 😊 very much for this video 😊.. just a minutes have grabbed what have being worrying about all this while
Thanks very much, so well explaining nice work
you are so happy when you teach. It's great!! 😄😄😄
@careerfoundry
2 жыл бұрын
Thanks, glad you enjoyed the video!
Thank you! this is super helpful
explained very well.... thank you
This is so clear! thx a lot!
thank you for sharing this with us!!!
Very well explained. Great content! Also, lucid dreams can help a lot with everything.
@careerfoundry
2 жыл бұрын
Thanks José, glad you found it useful!
Thank you so much! I've learned lots, specially from your smile. Blessings
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!
Many thanks for this lecture. You made it simple and easy to understand!
@careerfoundry
4 ай бұрын
Thank you, glad you enjoyed the video!
Thank you ma'am 🙏 this was very helpful 🥰
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.
best video on creating wireframes,!
Very good tutortial for entry level ux designers ! Please Make more videos creating more wireframes.
Thank you ver much ma'am this is usefull for my course as an IT student
Simple & Very Helpful lesson.I am from SL. Thank you! 😍
@careerfoundry
2 жыл бұрын
Thanks Oshada, glad you found this video helpful!
Orsum, Really ur teaching is ... I m speechless
very well explained. Simple Easy and Great 👍.
@careerfoundry
2 жыл бұрын
Thanks Mohammed, we are glad you found this video useful!
This is very much helpful. Thank you.
@careerfoundry
3 жыл бұрын
Hey, we are glad you found this helpful! Is there anything else you'd like to see?
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?
It was very helpful thank you ^^
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
I love your voice so much I get caught up and re-watch these videos 3 ou 4 times 😅
Really really help full for begainner very usefull and detail video thank very much😄😄
Very good ...thank you...very interesting and useful..and enjoyed..👍💫
Really helpful..thanks!
I can watch her tutorials all day😂😍
@careerfoundry
2 жыл бұрын
Thanks! Glad you enjoy them!
really thanks this vd is useful
Very helpful thank you.
Great tutorial ❣️
Great content, thank you!
Great Video. Thank you
Thank you very much.
well explained, thank you so much
@careerfoundry
3 жыл бұрын
Thanks Dylan! Glad you enjoyed!
Beautiful woman with good teaching tricks! I'm happily learning!
When completing wireframes, do you eventually have generic templates saved that you reference when starting new projects? Or do you always start from scratch?
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!
Nice videos for beginners. Love it
@careerfoundry
2 жыл бұрын
Glad you liked it!
Thank you for this! Super cool video! A+++
I like her positive vibes :)
So helpful. Thanks a lot 🙏
@careerfoundry
3 жыл бұрын
Glad it was helpful Jac!
OH my god! This was the best video ever
@careerfoundry
2 жыл бұрын
Thanks, we appreciate your kind words!
Beautiful presentation with smile :)
@careerfoundry
3 жыл бұрын
Glad you enjoyed the content Anita!
your communication skills are exceptional.
@careerfoundry
2 жыл бұрын
Thanks!
Thank you!
In place of paper sketching, I use a tool called Excalidraw that's easy to collaborate on and share. Love the video 🎉
Thanks for sharing very valuable information. Greetings from Peru
@careerfoundry
2 жыл бұрын
You're welcome! Glad you found it informative and welcome to the channel!
Thanks for your video
@careerfoundry
Жыл бұрын
Our pleasure!