Introduction to Wireframing

Question 1

A drawing which visualizes the elements of a website or mobile app.

Answer 1

Wireframing

Question 2

The main reason for wireframing is to focus on the

Answer 2

structure and the functionality

Question 3

Why is wireframing useful?

Answer 3

1. Lets your team get involved in ideation
2. Helps the team understand the goals
3. Sets expectations
4. You can quickly brainstorm ideas before polishing and refining the visual design
5. You can get feedback on the concept, without the visual design creating bias
6. You can get feedback and stakeholder approval early on
7. It saves you time. Instead of dedicating too much time taking an idea through the pixel perfecting stage, you can find out sooner if the idea isn’t going to work
8. It’s low pressure. It communicates to stakeholders and teammates that this is very much wet paint and they can feel free to give feedback that changes the direction of the project.

Question 4

an early stage, barebones drawing with minimal polish. It is typically more loosely drawn and hints at the specific elements on the page.

Answer 4

Low-fidelity wireframe

Question 5

Fidelity in design

Answer 5

how much detail goes into a design

Question 6

more polished and displays more specific or realistic renderings of content.

Answer 6

High-fidelity wireframe

Question 7

small representations of a screen. They allow you to quickly try out different layout ideas and visualize the hierarchy of content without getting too involved in a larger, more detailed wireframe

Answer 7

Thumbnail wireframes

Question 8

How should you use wireframes with your users?

Answer 8

1. Meet users and test in-person
2. Emphasize that this is early exploration and users should ignore the visual design
3. Ask for feedback and users’ expectations
4. Have users talk through how they interpret the content and navigate the app

Question 9

The Best Case Scenario for User testing with wireframes

Answer 9

1. Review the user research and business goals
2. Iterate on low-fidelity wireframes
3. Get internal feedback
4. Iterate on low-fidelity wireframes
5. Polish the selected low-fidelity wireframe into a high-fidelity wireframe
6. Get internal feedback(Again)
7. Get user feedback
8. Continue along in the design process: a. Create a mockup and start implementing it with code. b. Start over with a new set of wireframes

Question 10

What is the benefit of using a low fidelity wireframe?

Answer 10

You can explore different layout options quickly