Wireframing 101: The Whats, the Types, and the Tools

Unlock the essentials of wireframing in UX/UI design, exploring types, tools, and their pivotal role in digital product development.

Key takeaways

• Wireframes are foundational visual guides focusing on functionality and content priority, essential in UX/UI design, similar to blueprints in architecture.
• Three main types of wireframes: Low-fidelity (focuses on user flow and page structure), Mid-fidelity (adds detail and functionality focus), and High-fidelity (close to the final product with detailed design elements).
• Wireflows, mockups, and prototypes represent subsequent stages in the UX/UI design process, with prototypes being the final, most detailed representation before product delivery.
• Top wireframing tools: Sketch (vector editing and prototyping), Adobe XD (integration with Adobe products and usability), and Balsamiq (low-fidelity wireframing with a ‘hand-drawn’ look).
• Not every project requires all wireframing phases; the key is understanding each stage’s purpose and how it fits into the overall design and development process.

The importance of wireframes

In digital design, wireframes are essential visual guides devoid of graphics, typography, interactive elements and even colours, to depict page-level layout concepts which focus primarily on functionality and priority of content.

Wireframes are a major part of the UX and UI workflow and are used to communicate ideas regarding screen layouts, similar to blueprints used in CADs and architecture, for example. Wireframing can go from hand-drawn sketches on paper, to more sophisticated digital and interactive prototypes which display the desired end product. It could even be something in between these two (more to follow). The amount of information displayed in each wireframe reflects the stage of the design process and product life cycle.

The stripped-down style of wireframing makes it a great tool to use early on in the conceptualisation phase, as it provides time to finalise your content architecture before diving into the details. That’s why wireframing is a crucial step in the process of building a mobile app, for example. Additionally, its simplicity is forgiving of mistakes and allows you to experiment before the prototype delivery phase.

Every decent design team has its own preferred workflow and version of this process, but there are typically three types of wireframes used in design production. They are:

• Low-fidelity
• Mid-fidelity
• High-fidelity

Types of wireframes

Low-fidelity

Low-fidelity wireframes are usually the first stage of the wireframing process and their primary focus is concerned with user flow. Their purpose is to define a page’s hierarchy and structure, and they are commonly presented as simple, hand-drawn sketches using various shapes to depict initial layout ideas.

These are likely to include the menu, text blocks, and images. Stylistic details like colour and copy are left out as the primary goal for this stage is to narrow down the page structure and strategy. 

Visual style and appearance will be decided upon in a later process, with low-fidelity wireframes aiming to address various stakeholder goals, user interactions, and user needs. And because they are rough sketches they are very easy to adjust. Apart from a pen and paper, the most common tools to create these wireframes are Sketch and Balsamiq.

Mid-fidelity

Mid-fidelity wireframes follow on from low-fidelity sketches to add refinement, detail and focus primarily on functionality. Apart from further developing ideas of overall content and structure, mid-fidelity wireframes start to define the various UI elements for sections with a focus on functionality. 

Mid-fidelity wireframes are usually presented as black and white digital (using the same tools mentioned above) or hand-drawn sketches. Content layout and overall structure are more clearly defined in this phase, however, specifics in terms of styling and design come in the next phase. 

High-fidelity

High-fidelity wireframes further build upon the details of mid-fidelity wireframes with a clear focus on usability and design. They are post iterative drawings which show more detail and higher level renderings of each component. They also include behavioural characteristic elements with a deep focus on content layout.

Here, designers add in copy, UI elements, hover states, and text hierarchy. Their purpose is to ensure that all ideas and elements from previous phases are represented in the design. 

High-fidelity wireframes should closely resemble the final product and so should be digitally created. Pro tip: Upload your high-fidelity digital wireframes into a prototyping tool (like InVision) to insert certain touchpoints, to mimic interactivity and get a good idea of your project’s final form. 

Product workflow body in UX/UI

Wireflows: The Skeleton

For UX designers, the next step in the wireframe process is the wireflow. Wireflows combine the features and functionalities of wireframes and flowcharts to display and chart interactions that represent task flows in a product (web apps, for example).

Mockups: The Skin

After the wireframe phases have been approved by all stakeholders, designers are then tasked to work on UI mockups. As the most comprehensive stage of the design process, mockups display colours, typographies, images, and animations. All mockups should display the closest representation of the final product.

Prototypes: The Soul

Prototypes are the final stage of the process before delivering the final product, and in many ways prototypes can be considered as close to ‘finished’ as possible. Prototypes allow you to test your interface ideas and receive vital feedback to know whether your design is on the right track or not. Prototypes are the most functional piece of documentation you can create when showing your ideas.

Top wireframing tools

These days, designers are spoilt for choice when deciding which wireframing tools to use for their next project. Such is the nature of the tech industry, that new and exciting wireframing tools are constantly entering the market so designers are able to pick and choose the tools which best serve their workflow needs at whim.

With that in mind, here are our top 3 wireframing tools to use:

Sketch

One of the more popular design tool choices among UX/UI designers, Sketch provides a platform for vector editing, prototyping, and collaboration with a large library of plugins. Wireframing in Sketch is made easy through the use of drawing tools and kits/templates. Sketch allows designers to create a low-, mid-, and high-fidelity wireframes, through to prototypes and mockups. 

Adobe XD

Adobe XD has done a good job in winning over UX/UI designers thanks to its simple interface, thorough links to other Adobe products, simple usability, and classic Adobe built-in functionality resulting in less need for further plugins and extensions. You have the choice to either create your own wireframes using shapes and elements, or you can choose a variety of templates from various online sources, such as XD resources.

Balsamiq

Balsamiq is a simple and easy low-fidelity wireframing tool loved by UX/UI designers the world over for its simplicity and instantly recognisable ‘hand-drawn’ look. Balsamiq’s library of pre-built templates can be used quickly through its drag-and-drop functionality (you can create your own layouts too). You can also present basic prototyping by linking your mockups for basic usability testing. 

In conclusion

In reality, not every product or project requires the necessity for a wireframe. And if they do, many do not require designers and teams to undergo each phase of the process – from low-fidelity wireframing to prototyping – where a few phases will suffice. If a single stage of your wireframe process is sufficient to get vetted and approved by stakeholders, then you have already reached your intended goal and the other phases, therefore, may not be necessary. What is important to remember, as a designer, stakeholder, or team member, is that every stage requires questions, edits, and improvements.

Each phase in the wireframing process has its merits and drawbacks, and so it is important for UX/UI designers to understand what each phase entails, and how it can improve their workflow according to their project requirements.

Martijn Hinfelaar

Previous story

Living in the moment: What marketers need to know about micro-moments

Next story

Meet Alexandr, our new Automation QA