Learn how to create your first wireframe here:

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:

Blog:
Courses:

Nguồn: https://phanrangninhthuan.info/

Xem thêm bài viết khác: https://phanrangninhthuan.info/game/

23 Comments

Teun Verhoeven

July 5, 2020

I feel like i am in the movie "team America".

Reply

Romany Ayoub

July 5, 2020

Very nice and precise explanation, thanks bro. 🙂

Reply

Hameez Rizwan

July 5, 2020

4:34 without audio seems as if he's narrating a scene from a horror movie.
Good video nonetheless 👍

Reply

Hameez Rizwan

July 5, 2020

He looks like young Jamie Lannister

Reply

Sofía Rodríguez

July 5, 2020

every itgs student is grateful with you

Reply

Emad El Sammad

July 5, 2020

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

Reply

John T

July 5, 2020

Great content, really insightful and informative. Thanks for sharing 🙂

Reply

Lilith Min

July 5, 2020

Someone please help! I've tried looking for differences between UX and UI, but I still don't get the difference… 😭

Reply

Psicologia e Tecnologia

July 5, 2020

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

Reply

Atila Gullu

July 5, 2020

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

Reply

Reshan Jayamanne

July 5, 2020

amazing

Reply

Murilo Santos

July 5, 2020

Really amazing and clear content! Thank you very much!

Reply

Joshua Noble

July 5, 2020

Damn good !

Reply

Miss Amara

July 5, 2020

Fantastic. So informative

Reply

Karlook

July 5, 2020

My name is Jeff

Reply

Brian DeSimone

July 5, 2020

useful!

Reply

Ayush Gupta

July 5, 2020

How to made 1st wireframe:-
1. inspiration(Go to websites like dribbble and behance and show up the the products and wireframes that are made by professionals)

2. Start building blocks like pickup thick Marker Pen and start sketching on notebook and take a look or think about that what are the intended user(audience) and business goals when interacting with this page.
2a. How can you organise the content to support the goals?
2b. Which information should be more prominent?
2c. What buttons or touch points does the user need in order to complete the desired actions ?
2d. What does the user expect to see on certain area of the page?

3. Now Fill in the Details
So start from first top to bottom then left to right this is the advice by the gentleman of this video.
3a. Now at this stage I have to Define Usability Conventions like Spacing, layout and information hierarchy
3b. What information is most and least important?
3c. What are your Calls-To-Action?
3d. Now think about what images you want to insert and where to insert and what the size of that image?

4. Now for the entire wireframing process you have to check main three boxes those are Clarity, User Confidence and Simplicity

5. Go digital ( use Balsamiq software for Wireframing)

6. To test or wireframes we have to to make them into prototypes which can be done with the help of some softwares which essentially turns into our wireframe into a clickable mock-ups then after you can check bi user testing to see how the user interacts with your design to identifying any bugs, flaws or blind spots.

Reply

Fursenco Radu

July 5, 2020

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!

Reply

ilum88

July 5, 2020

eewww hairy chest

Reply

yuran soares

July 5, 2020

His shirt is also a wireframe

Reply

Melvin Youngboyz

July 5, 2020

My name Jeff

Reply

Loktion Banger

July 5, 2020

john morrison

Reply

Kaizhong Liu

July 5, 2020

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.

Reply

Leave a Reply