What precisely is a wireframe, and why are they so vital to the UX design course of? This video will provide you with an introduction to wireframing and equip you with the mindset and expertise to create your individual paper or digital wireframes, from scratch!
On this video, Dee Scarano—a UX designer with over a decade’s price of expertise within the UX trade—will provide you with a whole introduction to wireframing, and present you step-by-step learn how to create your first wireframes, each with pen and paper, and with a free on-line instrument, Wireframe.cc!
What questions do you will have round wireframing? Do you will have any suggestions or recommendation to share with our viewers? Tell us within the feedback!
For an in-depth article on wireframing, you may try this text on the CareerFoundry weblog:
http://bit.ly/WhatExactlyIsWireframingAGuide
Serious about making a profession turn into UX design? Get began by signing up for our free, 6 day brief course: http://bit.ly/BecomeAUXDesigner
Yow will discover a variety of nice instruments for wireframing with a fast Google search, a lot of that are free to make use of and sometimes browser-based!
A few of our favourite Wireframing instruments embody:
Wireframe.cc (featured within the video) – https://wireframe.cc/
Adobe XD – https://www.adobe.com/merchandise/xd.html
Balsamiq – https://balsamiq.com/
Figma – https://www.figma.com/
Marvel – https://marvelapp.com/
Video chapters / Timestamps:
(00:00) Intro
(00:29) What precisely is a wireframe?
(01:15) Several types of wireframes
(02:46) Let’s construct your first wireframe
(06:21) Digitizing your first wireframe
(11:46) Outro
Thanks for watching!
#UXDesign #Wireframe #WireframingTutorial
Need extra from CareerFoundry?
Try our different social media channels and weblog right here:
🔍 https://linktr.ee/CareerFoundry
For extra data on our packages, go to us at:
🖥 https://careerfoundry.com/
#UX #UXdesign #WhatIsUXdesign
How To Create Your First Wireframe (A UX Tutorial) 2021
source
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!
I just want to know one thing there is any difference between a low fidelity prototype and a wireframe or it is the same thing?
Thank you…
anyone knows how I can make a wireframe sitemap using wireframe cc?
Thanks, this video helped me a lot!
thank you so much this is really helpful and you are such a good teacher
Concise and value packed video. Thank you!
Extremely well explained!
Her voice is adorable 🥺
Thank you! this is super helpful
password field is missing for login with email in wireframe.
Nice tool and nice video! But the screen doesn't make sense. Login with email adress only? No field to enter password, but 'forgot my password' underneath. Where's the logic?
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. 🙂
australian
This seems to be an example of bad UX design. For one, there needs to be two boxes above the Login button. One for the username/email address, and a second one for the password. The way this is currently set up, there is no actual way to login, since there is nowhere to put the password. And if the idea is to enter your username/email address, click Login and then use that same window to enter your password, that is inelegant, not intuitive, and requires the user to click the Login button twice when they should only have to click it once. On top of that, in the final wireframe sketch, there is no text in the top box to indicate what needs to be entered? Is it an email address? A username? Either? A password? We have no idea! That should be in the final sketch with the words in a lighter grey color, rather than black, to indicate it is asking for information to be entered and is not a button to be pushed.
for the high level solution describe below can write a note on approach ,features and design wireframes for the workflow of the new feature P.S:dont forget to give this new features a memorable name 🙂
Nice videos for beginners. Love it
wait but what about the sign up option? for the first time user….
Are you On TikTok?
I created my first wireframe . Thanks to you. Much love
You never included an enter password field, why the forgot password option then?
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.
Isn't wireframing the product manager's job？
thank u so much
This is professional
Excellent presentation and context!…….I'm hooked!
This is going to take years at your pace.. Can you jam in a few thousand more words?
I’ve been doing this, I just didn’t know there was a name for it lol
Thank you so much!
This was so clear. thank you!
Thank you.
Simple & Very Helpful lesson.I am from SL.
Thank you! 😍
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.