What is Wireframing? A Comprehensive Guide

If you've been studying to become a UX designer, you've undoubtedly come across the term "wireframes" a few times. The process of designing a product must include wire framing. You could, however, be unsure of what wireframes are and how to make them.

‍

Everything you need to know about wireframes is in this guide. We’ll dive in by learning:

‍

• What is wireframing?
• When should I wireframe?
• The 3 types of wireframes
• Top 7 wireframing tools

What is wireframing?

A wireframe is an outline of a web page or app. It’s usually a two-dimensional skeleton outlining what you’ll include in each view of your app, kind of like a blueprint. Wireframes can be hand drawn on paper or built out digitally.

Wireframes are used by UX designers and web designers to provide a clear visual understanding of page structure, layout, information architecture, user flow, functionality and intended behaviors. Wireframes are presented to stakeholders like designers, developers, researchers and investors to agree on concepts before the interface is built out with code.

The downsides of wireframing

Sometimes there are downsides to wireframing but they’re pretty minute compared to the benefits. For starters, wireframes can feel complicated to present to clients or non-technical team members. You may find yourself explaining that wireframes aren’t prototypes more than once during your career.

It can also be easy to get bogged down by your wireframes. You might spend too much time designing them or even over-designing them. Plus, changing your wireframes multiple times can be tricky if you’re hand drawing or using a complicated technical system.

The benefits of wireframing

Wireframing allows all stakeholders to get on the same page before an app or webpage is built out with code. This saves time because developers won’t have to re-do their work if the functional prototype isn’t to the designer’s liking. It also saves money because companies won’t have to pay for as many design phases.

Additionally, wireframing helps designers see if the ideas they have in their heads translate well into real life. Wireframes are sometimes presented in user testing to determine whether they’ll work for the final prototype. Wireframes help designers keep users at the center of their focus, which leads to the best results.

When should I wireframe?

Wireframing generally occurs during the exploratory design phase of the product life cycle. This phase is where designers begin to understand the product’s scope, collaborate on ideas and nail down business requirements. The wireframe is usually the first iteration of a web page or app. It’s used as the basis for the rest of the product’s design.

After the initial wireframe is created, it’s usually presented to users to gain user feedback. Then, designers can make the next iteration of the product’s design, another wireframe, the prototype or a mockup. 

The 3 types of wireframes

Much like prototypes, wireframes are made with varying levels of fidelity. Fidelity simply means how precisely a wireframe lines up with the final product. Different fidelities of wireframes have different uses, functionality, visual design and content.

Regardless of fidelity, nearly all wireframes include pseudo-Latin placeholder text, headers, search fields, image placeholders, logos, share buttons and menus. Most wireframes are created in shades of grey to represent colours but keep it simple.

Let’s take a look at the three most commonly used wireframes.

Low-fidelity wireframes

Use: a starting point, mapping user flow, deciding navigation layout, explaining initial concepts

Low-fidelity wireframes, sometimes called lo-fi, are rough visual representations of a webpage or app. This is usually what the designer starts with. They’re simple and don’t usually consider scale, grid or pixel accuracy.

Lo-fi wireframes are often hand-drawn and don’t include actual content. Instead of images or text, they’ll often have boxes with an X through them, basic labels or scribbles instead of actual text or pictures. They also don’t include typography or colour in this phase.

Mid-fidelity wireframes

Use: explore design ideas, establish spacing and buttons, establish user flow

Unlike lo-fi wireframes, mid-fidelity wireframes provide more precise representations of the layout. They still don’t include images, typography or detailed content. But more detail and attention are dedicated to showing specific components and features clearly.

Mid-fidelity wireframes are still in black and white. But designers will often use different shades of grey and different font weights to convey visual differences. This wireframe phase is usually created with a digital design tool. Keep reading to learn more about the best tools for wireframing.

High-fidelity wireframes

Use: exploring complex concepts, finalising design features for prototypes, user testing

High-fidelity wireframes, a.k.a. hi-fi, have pixel-specific layouts that are designed to scale. Hi-fi wireframes are often presented as initial prototypes.

A high-fidelity wireframe will usually have actual images and written content that is proposed to appear in later iterations of the app or webpage. High-fidelity wireframes are created using a digital tool. They feature actual typography, detailed features and menu systems.

Top 7 wireframing tools

We rounded up the top 7 wireframing tools for you to try out and their benefits, so you don’t have to search. We’ve listed them here in order of popularity.

1. Sketch

Sketch might be the most popular digital wireframing tool. Designers can combine artboards and vector design shapes to create pixel-accurate wireframes efficiently. Unlike Balsamiq, there’s no UI library.

But once you create a UI element yourself, you can reuse it easily with the symbols feature. Plus, it allows you to update styles across every view you’ve created which will save you so much time. Third parties offer UI kits to make your wireframes even more detailed.

2. Balsamiq

Balsamiq is another popular wireframing tools. Its interface is minimalist and clean. Balsmiq uses a static canvas with drag-and-drop tools for a simple, but not pixel-perfect, experience. It also offers auto-alignment, making it easy for even beginners to use. With a built-in UI component library, you can test out your design on various screen sizes too.

3. Invision Freehand

Invision Freehand allows you to digitally create a “hand-drawn” wireframe using your cursor. Or you can add basic images and shapes to a template. You can move your work from Invision Freehand over to Sketch and Photoshop, too.

4. Photoshop

Photoshop is a more advanced option for wireframes. Designers can create pixel-perfect wireframes using their own components or a third-party kit. This one has a steep learning curve, but once you understand it, you’ll easily be able to create high-fidelity wireframes quickly and beautifully.

5. Marvel

If you don’t want to seek out UI components or make your own, Marvel offers pre-designed sections to help you rapidly create wireframes and prototypes. It also has a handy comment feature, allowing your co-workers to easily comment on your design.

6. Proto.io

Proto.io is a cloud-based prototyping tool that can be used for wireframing. Like Invision Freehand, multiple designers can use Proto.io simultaneously, making it easy to collaborate. You can even seamlessly transfer your designers to apps like UserTesting and Userlytics to gather feedback.

7. Figma

Figma provides a straightforward, rapid wireframing interface. It’s a browser-based tool that offers easy visual organisation in the “layers” sidebar. Like Proto.io and Invision Freehand, you can collaborate with your teammates in real time.

The takeaway

Whether you’re attempting to present your initial design idea to your team or collaborating with another designer, wireframing is the way to do it. It’s a vital skill for any UX designer. This simple tool can be the key to solving complex design problems.

As a designer, you’ll probably create wireframes multiple times throughout each product development phase on every project throughout your career. Learning the lingo, the process and the expectations of wireframes is useful.

‍