Wireframing
Introduction
In this section you will learn
- The definition of wireframing and the things a client should understand.
- What elements to include in a wireframe.
- Best practices – DOs and DON’Ts of wireframing.
Stakeholders
- Designer
- Client
- QA
As Product Designers, we should never skip the wireframing stage. The wireframing stage is the bridge between researching and designing visuals. It lets us test-drive ideas and iterate quickly from early on in the project. Not only does it save us a lot of time that would have otherwise been wasted on neverending adjustments, but it also makes our process more robust, our vision clearer and our rationale more valid. As a result, the final design becomes truly meaningful and valuable to the client. The outcome of this phase is usually a set of user flows and wireframes.
Benefits of wireframing for the client
- Allows for fast prototyping.
- Allows clients to test ideas early.
- Allows us to eliminate errors and problems early.
- The client will know their product, users’ needs and behavioral patterns better.
Benefits for the team
- Wireframes will often help to discover new requirements and questions that may not have been considered by the project team.
- Developers will know how the website/application will work before designers provide them with final designs.
- Opportunity to gather feedback and test how the product will work before proceeding to the design phase.
What is a wireframe?
A wireframe is a basic visual interface guide that outlines the structure of an interface and the relationships between its pages. A wireframe serves as a blueprint that defines a project’s structure, content, and functionality. Wireframes are created before any visual design work starts so that the focus is on the information architecture without the distraction of color or visual elements.
What is included in the wireframing phase?
The wireframing phase can be divided into 2 subphases:
User Flow diagrams
User Flow diagrams (also known as flowcharts) are a visual representation of a desired user journey path through the designed product. They illustrate the steps, decisions, and funnels users frequently come across. Thoughtfully crafted User Flow Diagrams let you reveal the moments critical for user conversion and then apply adequate solutions to the obstacles you identify. For an example of a user flow diagram visit and to check out flowchart click this link.
Single-page wireframes
Single-page wireframes (also known as page schematics or screen blueprints) are a visual guide to a page's structure, composition, and information hierarchy. Their purpose is to arrange the elements of a website’s content in an informed, user-friendly and business-effective manner. As their main focus lies in the functionality unobstructed by flashy visuals, they need to be stripped of all elements of visual language such as colors, infographics, effects, etc. Have a look at an example of a single-page wireframe.
What elements should I include in a wireframe?
List of elements
Wireframes should include all the important elements of a product:
- navigation,
- the company's logo (if it exists),
- content area sections + sample content (placeholder text),
- calls to action,
- widgets,
- fields,
- forms,
- pop-ups,
- hover states (if applicable).
What kind of software should I use for designing wireframes?
At Netguru, we use:
- Sketch for wireframes.
- InVision for quick prototyping.
Wireframing Best Practices
DOs and DON'Ts
The main purpose of wireframing is to create a visual representation of ideas to support conversations, iterations, and rapid ideation. Below is a list of best practices we truly believe in at Netguru:
1. Colors can be distracting. Ensure that your design remains focused on the experience you’re creating and not the visual design solutions to come.
2. Be consistent: the best way to help the presented solutions is to be consistent in your wireframe designs.
3. Use real content: writing is a design skill, and it will help you understand the client and the story better.
4. Never wireframe alone. The main purpose of having this process is the conversational potential and a greater chance of discovering better solutions than if you were working on your own.
5. Set clear expectations: be sure that the client understands the principles behind this process.
6. Use the right tool for the job. At Netguru, we make wireframes mostly in Sketch (it’s flexible, easy to use, and there is no need to recreate layouts in a different app), but remember not to be constrained by the limitations of one tool.
7. You are not your design.
8. Be selective and keep it simple.
9. Control the conversation.
10. Wireframe with the final designs in mind.
Questions your client may ask
Questions to ask yourself at this stage
- Are user flows complete?
- Are wireframes available on InVision?
- Are wireframes clickable?
- Do wireframes follow our best practices? -- Use of real content -- Focused on information architecture -- Wireframe is ready to be reused in the visual design phase
- Has feedback been gathered?
Desired outcomes of this stage
- Clickable wireframe of low or high fidelity (preferably high-fidelity)
- User flows covering jobs to be done/user stories
- Usage of real content included
- Designed test scenarios for wireframes
- Wireframes tested and accepted by the client – ready to use in the visual design stage
Additional reading
- Improve Your Online Store UX With These Handy Tips
- How to get value from wireframes
- Wireframes: A Good Communication Tool, a Poor Design Tool
- The product design sprint: decide (day 3)
- Choosing the Right Level of Fidelity for Your Wireframes
- InVision User testing
- How NOT To Design An Interface For Your Mobile App