Wireframing in Design
The benefits of wireframing, knowing when to wireframe and the differences between low-fidelity and high-fidelity wireframes
Before heading into this publication, it’s helpful to understand some definitions.
Definitions
- Wireframing is the process of creating one or more wireframes that depict a user’s journey from their first to their last interaction.
- Wireframes are individual views of the user’s journey, for instance, a page, a subview, or a small group of elements.
What is wireframing?
Wireframing is a technique that visually articulates and communicates ideas about how to solve a particular problem. It focuses on two key points: the steps required to complete a specific business or user goal, and the digital interactive elements that may be necessary to achieve this. The wireframing process can be large or small. It can be used to illustrate an entire end-to-end user journey or to solve smaller, micro-interactions that take place within a single step of a journey. Wireframing is a process that can be used across the entire design domain, but it is particularly useful within the web, service blueprint, and product design.
The benefits of wireframing
Wireframing is an essential aspect of the design process and has many benefits, such as:
- Inexpensive — Wireframing is not tool-focused, it is the ability to quickly project ideas onto a physical plane. As a result, simple and inexpensive tools such as a pen and paper or a whiteboard and marker offer great alternatives to modern and popular digital products because they allow you to rapidly generate a series of ideas, connect flows visually, and communicate thoughts. These tools are also user-friendly, require no upfront learning, are accessible to everyone, and don’t require a subscription, which makes them ideal for wireframing.
- Improves collaboration — Sharing wireframes with team members provides insight into the various approaches that are being considered to solve a particular problem. When all team members are aware of and understand the problem, it helps frame their thinking when providing feedback. This feedback can be communicated and discussed between teams and individuals, which opens the possibility of generating new ideas or advancing those already put forward.
- Improves decision-making — Sharing wireframes also improves decision-making as early-stage visibility can influence considerations relating to aspects such as tooling, architecture, and/or product strategy. For example, if a product architect has early visibility of wireframes, this could positively influence their decisions around tooling, database structure, technology stacks, or other fundamental decisions that holistically affect the whole product.
- Provide progress visibility — Wireframes provide insight into the progress of a product or feature. If wireframes are still at an early stage of development and they include annotations or ideation areas, it suggests that the exploration of an idea is still in progress. This is beneficial as it helps people understand the impact of their feedback. If feedback is provided early, it is likely to be easier to implement and have fewer consequences than a wireframe that is close to being fully complete and tested.
- They’re role-agnostic — Wireframing is not a process that is exclusive to designers. As the aforementioned points have discussed, the key to successful wireframing is to explore the best way to solve a business or UX problem. Successful wireframes can be achieved with just a pen and paper, and therefore, wireframing can be a process created by any team member. This is advantageous as it incorporates an element of inclusivity by breaking the myth that only designers can wireframe.
When should you wireframe?
Wireframing is an iterative process that can be returned to throughout any stage of a product's or feature's lifecycle. Wireframing is not a one-time process, and wireframes should evolve and be kept in line with all product updates. There are, however, two key points at which the process of wireframing offers greater advantages:
- At the start of a new product or feature — It’s a good idea to start any new product or feature with the wireframing process, as it's an inexpensive and expeditious method for quickly building an end-to-end user flow that can help identify user pain points. At this stage, it’s important to share and open up wireframes to the wider team to confirm if they also meet business and development goals.
- Iterating after collecting user feedback — Collecting user feedback is critical to a user-focused product. Once feedback has been collected, returning to the wireframes is essential as it allows ideas to be trialled with an understanding of how adjustments and improvements may impact the overall user journey. Wireframes offer clear visibility into how small changes at the micro level could lead to big changes at the macro level.
Another time to wireframe is during or after discussions with key stakeholders, such as product owners, CTOs, etc. Individuals within these roles often take on a business perspective of product delivery, and it is the job of the designer to try and produce a product that will deliver both business and UX outcomes. Wireframes are a crucial starting point in helping to visually understand how these goals can be balanced against each other in order to benefit both parties.
The differences between low-fidelity and high-fidelity wireframes
“Fidelity” refers to the level of aesthetic and functional detail included within the wireframe.
Low fidelity means that the wireframe will be short on visual and functional detail. Much design form may be removed, and often, wireframes may appear monochromatic and will not reflect brand or visual guidance.
High-fidelity wireframes will most likely reflect the final, delivered design and will be highly visual in their appearance. They may often include working prototypes that appear to functionally operate and show how a user may navigate their way through a particular journey.
Other differences between low-fidelity and high-fidelity wireframes include:
- Audience — Low-fidelity wireframes are likely to be shared internally, whereas high-fidelity wireframes are likely to be shared externally with customers. Customers can better understand the form and structure of common user interface components, which makes it easier for them to digest high-fidelity journeys with less confusion.
- Tools to build — Low-fi wireframes are likely to use tools that focus more on speed and the use of a pre-defined component library, such as Whimiscal, Balsamiq Mockup, and more, whereas high-fi wireframes are likely to make use of tools that provide greater design affordance, such as Figma and Sketch.
- Level of detail — Low-fi wireframes are likely to include less visual detail, whereas high-fi wireframes will form a higher degree of aesthetic by incorporating brand or product typography, official icon sets, the use of the product colour palette, and more.
- Content — Low-fi wireframes will focus less on copy and may include placeholder forms such as “Lorem ipsum”, whereas high-fi wireframes are more likely to include marketing copy that follows product tone of voice guidance.
- Interactivity — Low-fi wireframes are often a flat, birds-eye view of the end-to-end product that can be located in one file, whereas high-fi wireframes are more likely to focus on individual page design and may exist across several files and include various browser breakpoint considerations.
- Use of components — Low-fi wireframes will often rely on using components that are pre-existing with the wireframe tool of choice, whereas high-fi wireframes are likely to use components from an external design library that may have established rules and patterns.
Tools for wireframing
The best tool for wireframing is the one that helps you quickly generate ideas that can be shared, collaborated on, and discussed with the team. As touched on earlier, wireframes are less about particular tooling and focus more on the ability to communicate ideas. However, there are several tools available that empower you with the ability to produce user journeys at speed while reflecting common user interface components that help create interfaces that your audience will recognise. At the time of writing, the following wireframe tools are all web-based, and this is advantageous as it removes the reliance on having a particular operating system installed.
The relationship between user flows and wireframes
User flows are an internal view of a product that typically measures clicks or hierarchy, and they’re often created using a series of shapes and connecting lines with titles to indicate a particular step or page within a journey. They’re more closely aligned with service blueprint design and can often be used alongside user emotional maps to provide a wider, high-level flow. They’re a popular way to provide a schematic-like view of the entire user journey, which includes their first touch point, to their last. These touch points may sit outside of the product itself, and they may not require a wireframe process to be created in order to reflect them.
Wireframes are a detailed, more in-depth, and closer view of a user flow as they present page elements such as buttons and inputs to provide an understanding of how page structure may be formed. They also present different states of a journey, such as unhappy paths; these are areas in which the user may face errors such as page or form field errors.
Relationships can be made between user flows and wireframes, and, depending on how these are linked together, a strong relationship can be built between them. There is no right or wrong way to connect a user flow to a wireframe; however, there are some basic rules of thumb that can be used to help:
- A single product for both use cases — When using a tool such as Whimsical, this offers the ability for both wireframes and flows to exist on the same page. This is a great solution as both can exist within the same view.
- Be descriptive — If the user flow and the wireframes exist in separate products, it’s essential to communicate this. This could be via hyperlinks within the tool itself, a central repo that links to both the user flow and wireframe, or links to each on the feature or epic view of a ticket.
- Maintain alignment — When making changes to either the user flow or wireframe, it’s important to ensure that the other is updated as well. When out of sync, they can be a source of frustration, as it may not always be clear which is the most recent version.
- Consistent naming conventions — Similar to the aforementioned point, it’s good practice to keep both versions aligned with each other by using the same naming convention for both. This helps to communicate the most recent version from the previous, and it helps people understand the version history of each flow.
Conclusion
Wireframes and the process of wireframing are important to all designers and product teams. It helps to focus on the end user’s journey and interaction and not on visual designs. Hopefully, this article has helped to uncover more detail about why wireframing is important, and I hope this and the wireframing tools listed provide value to people.
