👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

What are wireframes and why are they used?

A wireframe is a rough schematic created in the early stages of digital product design to help visualize and communicate the structure of a product or website.


What are wireframes all about?

The design artifacts on this page are called wireframes (sometimes called wires, mockups, or mocks).


A wireframe is a rough schematic created in the early stages of digital product design to help visualize and communicate the structure of a product or website.

The video below explains how wireframes are used through a real world example.


Why are wireframes used?

The same screen can be built in a lot of different ways, but only a few of them will get your message across correctly and result in an easy-to-use software or website.

The purpose of a wireframe is to define a skeletal layout that is easy to understand, and encourages iteration and feedback. Getting to agreement on a good interface structure is a critical part of the software design process.

Wireframes are important because doing this work now, before any code is written and before the visual design is finalized, will save you lots of time and painful adjustment work later.

Watch the short video below to learn more.

Summary:

  1. Wireframes let you explore solutions quickly.
  2. Wireframes help collaborate with others.
  3. Wireframes let you show your ideas visually.
The end result is that wireframes save you time and effort.

Who is responsible for creating wireframes?

The primary reason for wireframing is to generate and communicate ideas, so making wireframes is not limited to any single role or specialization in an organization.

Here are some roles that commonly make and use wireframes:

  • Founders and Business Owners use them to communicate or pitch their product or app ideas to investors or product teams.
  • Product Managers and Business Analysts use wireframes to translate requirements into visual specifications for designers or developers.
  • UX Designers use them to explore and refine concepts before moving to high fidelity.
  • Developers use them to sketch out user interfaces when they don't have a designer or when working directly with clients.
  • Marketers and Copywriters use wireframes to explore landing page concepts and visualize the placement and size of copy on the page.
A list of job roles and how they use Balsamiq
Roles that commonly use Balsamiq for wireframing

Low fidelity vs. high fidelity

The term fidelity is often used to describe wireframes and other digital product designs. In this context, fidelity means the degree of realism of a design artifact.

A low fidelity wireframe in front of a high fidelity design

Low fidelity designs are often used for the following reasons:

  • They are faster to create because they are less detailed.
  • The product appearance and/or functionality aren’t fully defined, so many of the details are unknown.
  • To get reviewers or collaborator to focus on the structure, layout, and navigation instead of visual details.

High fidelity may be used in the following scenarios:

  • When the placement of controls and flow from one page/screen to another has been decided.
  • For usability testing with actual or representative users.
  • As a final checkpoint before coding begins or the project is approved.

Wireframes typically range from very low fidelity, using only simple shapes, to medium fidelity, where more realistic details are shown.

A very low fidelity wireframe
A very low fidelity wireframe
A medium fidelity wireframe
A medium fidelity wireframe

As wireframes approach high fidelity, they start to become more like a prototype. To learn why, see the next section.


What’s the difference between a wireframe and a prototype?

While there is some overlap between wireframes and prototypes, they are distinct from each other.

The main difference is that prototypes are high-fidelity designs intended to pass as a realistic representation of the final product. The viewer of a prototype should feel as if they are in front of a real product and any interaction with it should mimic the intended behavior of published code.

A wireframe, in contrast, is like a sketch of a digital product. It does not include all of the details of a final product and won’t be mistaken for one. Because they are much faster to create and modify, wireframes should always be created before prototypes.

A prototype and wireframe of a similar user interface side-by-side
A wireframe (left) often eschews color, final text, and images, while a prototype (right) is indistinguishable from a real product.

Why do wireframes look the way they do?

Wireframes typically have an intentional low-fidelity look and feel to them.

Three rough wireframes of the same content as it may appear on a mobile phone, a tablet, and a computer.

Here are some of the reasons behind the rough, low fidelity style of wireframes:

  1. Wireframes make it clear that this is not the final design. No one could mistake a wireframe for the final look and feel of your application. Low fidelity and few colors force you to focus on structure over details.
  2. Wireframes convey that "this is all up for discussion." The unpolished feel encourages conversation and feedback, which leads to more input and better ideas. We call it a look no one is afraid to criticize.
  3. Wireframes make it clear that no code has been written yet. If your customer or stakeholder received some screens that looked like screenshots of the final app, instead of a wireframe, they might assume that all the code behind those screenshots had already been written. Wireframes avoid this risk and leave the window for iteration open longer.

Tools for making wireframes

One of the benefits of wireframes is that you can create them using lots of different tools, many of which you already have. However, there are clear benefits to using a tool that is optimized for wireframing.

The most popular tools for making wireframes are:

  • Pencil (or pen) and paper
  • Presentation software
  • Diagramming or whiteboard software
  • UX prototyping tools
  • Wireframing-specific software, such as Balsamiq

Below you can find a comparison of the most common types of tools for wireframing.

  Pencil/Pen and Paper Presentation software Diagramming / Whiteboarding tools UX prototyping tools Balsamiq
Minimal learning curve x
Basic shapes included by default x
User interface controls* included by default (no plugins or upgrade required) x x x varies
No design experience needed x
Easily sharable via a web link x varies

*a.k.a. widgets, shapes, stencils, templates

As you can see, Balsamiq Wireframes is one of a very few tools made specifically and primarily for wireframing. It includes all the functionality needed for wireframing, without features that distract from the process.

To get started with Balsamiq, start your free 30-day trial now.


How do I make a wireframe?

Just because wireframing tools make it easy to come up with user interfaces, that doesn't mean that creating good user interfaces is easy.

A tool like Balsamiq can be learned in just a few minutes. But to make effective wireframes that help efficiently drive your idea from concept to code, you need to learn a few fundamentals.

Fortunately, we're here to help you learn, regardless of your previous experience. Our learning site has all the resources you need to learn how to make great wireframes.

Start with our free course on rapid wireframing with Balsamiq, or browse our other free articles, courses, and videos.

Happy Wireframing!


By Peldi Guilizzoni
Got questions or feedback? Email peldi@balsamiq.com.