Introduction to Wireframing Flashcards
A drawing which visualizes the elements of a website or mobile app.
Wireframing
The main reason for wireframing is to focus on the
structure and the functionality
Why is wireframing useful?
- Lets your team get involved in ideation
- Helps the team understand the goals
- Sets expectations
- You can quickly brainstorm ideas before polishing and refining the visual design
- You can get feedback on the concept, without the visual design creating bias
- You can get feedback and stakeholder approval early on
- 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
- 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.
an early stage, barebones drawing with minimal polish. It is typically more loosely drawn and hints at the specific elements on the page.
Low-fidelity wireframe
Fidelity in design
how much detail goes into a design
more polished and displays more specific or realistic renderings of content.
High-fidelity wireframe
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
Thumbnail wireframes
How should you use wireframes with your users?
- Meet users and test in-person
- Emphasize that this is early exploration and users should ignore the visual design
- Ask for feedback and users’ expectations
- Have users talk through how they interpret the content and navigate the app
The Best Case Scenario for User testing with wireframes
- Review the user research and business goals
- Iterate on low-fidelity wireframes
- Get internal feedback
- Iterate on low-fidelity wireframes
- Polish the selected low-fidelity wireframe into a high-fidelity wireframe
- Get internal feedback(Again)
- Get user feedback
- 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
What is the benefit of using a low fidelity wireframe?
You can explore different layout options quickly