How To Create Your First Wireframe (Video Guide)

In this video, UX Designer Jeff Humble presents the ultimate beginner's guide to wireframing.

Start by learning exactly what a wireframe is and why it's so useful.

Next, go through the wireframing process step by step, starting with the inspiration stage. We'll show you how to get inspired and generate ideas for your wireframe before you get started.

Then come the building blocks of your wireframe, which means it's time to grab a marker pen and paper. At this stage, you'll need to think about both the user goals and the business goals for the page you're designing. You'll also start to consider how to organize the content on the page.

Finally, we'll show you how to fill in the details of your wireframe and create a digital version.

By the end of this video, you'll be ready to create your very first wireframe!

This video is brought to you by CareerFoundry, provider of mentored online courses in UX Design, UI Design and Web Development. Learn more on our blog or discover our courses:

[Leo-ootn]

I think the content of this video is really the CORE of UX design because this is the ORIGIN of all those pretty interfaces being created later, not user research, not product strategy, it's this--- how do you actually come up with your wireframes, I counted the number in the video, there are 11 questions need to be considered when you create wireframe. These 11 questions are gold. This is extremely valuable stuff, every single person who wants to become a UX designer should watch this. Thank you, CareerFoundry.

[Marleyman]

Good info! A bit creepy just staring into the camera instead of more graphic examples. But still informative.

[EmadElSammad]

I got hypnotized looking at his eyes and just woke up right now

[NegiFamily]

Hello Sir, Can you tell me where I can get all the wireframing UX shapes so that I can practice over paper before jumping into application skeach

[simma]

As a 2nd year university student majoring in graphic design & illustration, this is soooo sooo helpful because i’m taking my first UX design course and don’t know shit, thankyou so much going to help tremendously with my first assignment 🙌🏽

[arounaalaho]

Waouh !
Very usefull, simple explanations.
Thank you Jeef!

[Ayaktayiz]

Jeff thanks a lot. I`m just a newcomer to the concept, so lucky to find your video. Best regards

[IvanferreroIt]

So much information in such short video. Great! Heading to the article to take more notes.

[michaelgask]

Thanks Jeff, really useful and interesting. Thanks for the heads up on some digital tools as well.

[anupamadubbaka]

hey, its amazing i found this is really useful for the initial learners. Thank you very much for explaining the content in pretty simple manner.

[JohnLorenz]

Great content, really insightful and informative. Thanks for sharing :)

[chunuramdubrajmurmu]

nice explanation and easy to understand .you wrap the whole point in simple and beautiful manner .

[Lilylightbourn]

This was awesome! Thanks for the info!

[ashk]

Awesome walkthrough for non designers like and elegant
And definitely his eyes and arm tattoo are helping to focus :D

[WritersInkTHEWORD]

that was good ! easy to understand instructions and not over the top speaker ..great thanks!

[oyenreview]

Thank you so much this have alot of knowledge for us as newbie in UX Design. I love how he explain with clear pronounciation (bcs i am not native english speaker).

[sofiarodriguez]

every itgs student is grateful with you

[fursencoradu]

Great! I have subscribed instantly. All I can suggest is add some background images linked to a specific topic or question you explain. Thank you!

[yuinurahilyon]

His eyes... it feels like his staring into my soul.

[eyeofps]

Very nice, simple and easy video to follow. Good job jeff.