A wireframe is an essential step in the product design process, helping to build the foundation of your final design. It’s like the pillars of a house; you can’t design a good product without them. In this article, I will try to break down all the basics you need to know about wireframing. It’s not rocket science, and anyone can easily pick it up, even those who are just diving into the world of UX.
What is a wireframe?
A wireframe is a visual outline of a digital product’s interface. It is usually simple, representing the skeletal outline of a software, app, or website. It highlights only the main information such as the layout, information architecture, functionality, navigation, and user flow. It doesn’t include the finer details such as colour scheme, imagery, and content.
A wireframe can be low fidelity, and they are quick to whip up, re-drawn, or rearrange. It can be sketched on paper or software. A mid-fidelity wireframe will incorporate more visual elements and are usually drawn using software. Meanwhile, a high-fidelity wireframe is one with a lot of interactivities that could be used for some light user testing.
Why is wireframing important in the design process?
Wireframing is a crucial part of the design process because it serves as a blueprint for the product. Designers, developers, product teams, and other stakeholders work on wireframes to pin down the core user experience before adding the details. This is usually done during the discovery phase of the design process, where possibilities are explored, constraints are considered, and ideas are refined.
Wireframes also help to communicate ideas, helping people understand the overall design and UX flow. It showcases the design intent without visual clutter, serving as a visual communication tool when collaborating with people with different skill sets. And because creating wireframes are easy, quick, and cost almost nothing, they serve as the foundation to building a prototype in an iterative design process.
What is the difference between a wireframe, mockup, and prototype?
The difference between a wireframe, mockup and prototype is the level of detail in them. Wireframe is a skeletal visual outline of a digital product, done in the early stages of the design process. As the design or idea is refined further, you will produce a mockup which has more visual details than a wireframe, including elements such as colour schemes, images, content.
Finally, you will refine the mockup further, and build a prototype, which is a high-fidelity representation of the product. It simulates the user experience, is used in usability tests, and is much closer to the final product.
All three – wireframes, mockups, and prototypes – are produced sequentially in an iterative design process. However, some people may skip the mockup and go straight to prototype if they have a mid to high-level fidelity wireframe.
How to draw a wireframe?
Wireframe drawings are always shared, so remember that you’re not drawing for your own eyes only, unless it is a draft. You can start an initial design either by hand or using software, and then work on it with your team. Refining and finalising a wireframe are best done as a team exercise.
With that in mind, you will have to follow a few basic rules when drawing a wireframe, to make it easier for others to understand and contribute. Don’t worry, they’re super simple to follow, because that’s the whole point of a wireframe – focusing on the user’s needs and experience. These are the general steps in producing wireframes.
1. Choose your medium, whether paper and pen or software. If using software, you will need to mirror the screen sizing for your wireframes, whether you’re designing for mobile phones, tablet, desktop, or wearables.
2. Typically, you will have a user flow drafted already that gives you the journey you will take the users on. Refer to your user flow diagram to understand the general flow of the users’ experience.
3. Start drawing the main screen. This is usually the dashboard or home page, where users start interacting with your product.
4. To draw, you will use basic symbols and shapes for each page element such as rectangles and squares for images, buttons, text boxes, etc. Here are a few examples:
5. Think of the layout and how you present the information. There should be a hierarchy of information on a page, with the most important content highlighted or designed more prominent than the rest.
6. Although we are not designing with a lot of details yet, be mindful of spacing and where you place your elements. And make sure you have included all the necessary elements that will help your users navigate to the next step or screen.
7. Don’t forget to annotate or add comments when necessary. You want to capture the idea discussed and the context. If you’re using software, it’s much easier to do so.
8. Design subsequent screens until you’re done. You may need to draw a different set of wireframes for various types of screens to achieve a responsive design.
9. Once you’re done, remember, this is just the first iteration. Discuss again with the team and see where you can improve, eliminate clutter, and simplify things for the next iteration.
What are some tips to create better wireframes?
1. Sketch first
Start with low-fidelity wireframes, or a hand sketch. This will help you to explore options and see whether something works or not, especially when determining the layout and information hierarchy. Draft a few options and discuss it with your team or stakeholders.
2. Focus on the user, not visuals
When you’re drawing wireframes, always go back to the user’s needs. Is it helping them or is it overwhelming for them? Are you making things simple for them, or do they have to go through multiple screens to achieve their goals? Think about what must be there on the screen, and chop away everything else.
3. Simplicity wins
Making something simple is a lot of hard work. That’s why you need to iterate and refine your wireframes. As you refine it, you’ll find pockets of opportunities, redundant elements, and screens. When in doubt, always go for the simplest option for the users.
4. Draw consistently
You’ll want to maintain the same symbols and shapes for an element to avoid confusing people. This is much easier if you’re using software compared to hand sketch. If you’re adding text to your wireframe, use simple language consistently. You also want to balance the simplicity in your drawing with the design direction, so people reviewing it will understand your design intent.
5. Capture important ideas
Don’t forget to capture important ideas, decisions, and any context or restrictions that come with your design. This is because you will refer to your wireframe when designing the next stage of mockups or prototypes. And if you’re handing the wireframe design to another team, these notes will come in handy. Also, if you’re doing a redesign for whatever reason, like a failed user testing, then these notes will also help a lot!
6. Embrace collaboration
Wireframing is best done not just among designers, but also developers and other stakeholders. You’ll extract more insight, knowledge, and expertise when you work with other teams. Include more cross-functional team collaboration if you want your product design to get better.
