What Is a Wireframe? A Step-by-Step Guide to UX Wireframing

Author
Joël Sonderegger
March 23, 2021

One of the first steps of designing a website, web application, or mobile application is to create wireframes. Wireframes provide you and your team insight into the high-level layout, structure, and functionality of an application. Wireframes also visualize how users interact with an interface and navigate through it.

In this article, we’ll cover the following:

  • What are wireframes?
  • Why do you need them?
  • How do you create wireframes?

What are wireframes?

Before we take a deep-dive into how to create wireframes, let’s first get clear on what wireframes are and why they’re so valuable.

A set of wireframes is a visual blueprint of how a user interface of your application will work. Before you invest time and money in actually coding your application or creating a high-fidelity user interface (UI) design, it’s a wise idea to get those wireframes finalized.

Creating wireframes involves defining the key elements of your product. Wireframes should include the key copy, buttons, calls-to-action, input fields, and navigation. Furthermore, you should also define error messages, dropdown options, etc.

Let’s take an online banking app, for example. If you’re wireframing a feature that allows users to make payments, you’d define elements such as inputs of the payment’s recipient, payment reference, amount or currency. Also, you’d include the navigation and the buttons to submit and cancel the transaction.

Example of a wireframe for an online banking app

On the transactions overview screen, where all past and open transactions are displayed, you’d design the filtering and sorting functionality. You wouldn’t just scribble a box that said, „some filters.“ You’d define which type of filters exist and by which attributes users could sort transactions.

Not a very helpful wireframe
The same screen, but now more detailed and more useful

You can create wireframes with different levels of fidelity. It’s important to remember that wireframing is where you figure out what goes into each screen and how the different screens connect.

Benefits of wireframes

Wireframes are extremely useful. Design changes on screens can be made quicker and with less effort than if you made them later in the design and implementation process of the product. Therefore, wireframes are a perfect tool to go through many iterations of your product, fast.

Wireframes are also ideal to test your product idea with potential users. Instead of trying to explain how your product will look, you can show wireframes to test users as a first prototype and collect feedback.

Wireframes are also a perfect communication tool. Everyone on a team — developers, clients, designers, businesspeople, etc. — can understand them.

Well-designed wireframes can replace multipage documents with convoluted design specs. Such documents often resemble complicated essay papers — which engineers hate to read as much as designers, requirements engineers, and business analysts hate to create.

Don’t make them pretty

When wireframing, beauty isn’t important. Don’t fuss over how the wireframes look. Focus on the usability-aspects by making them clear and clean. Forget about typography, colors, and well-chosen images. Spending hours upon hours prettifying and making the interface pixel-perfect at this point is a waste of time. You’ll go over many iterations and redo many parts. Besides, if you spend a lot of time on the initial version of your wireframes, you’ll be less willing to make changes even if the feedback from test users suggests that you ought to make adjustments.

Also, test users will be less willing to provide critical feedback about the general concepts of a prototype if it looks close to a finished product. They’ll focus too much on the visual aspects of the design instead of its usability.

This is a visual design, not a wireframe. When wireframing, you should not focus on things such as colors, typography, or images to make the screens pretty.

When to create wireframes

If you choose to build your product according to an agile development methodology, you’ll typically have to create the key wireframes as part of your initial solution design and then extend them in the process of building your product. If you follow a “waterfall” development methodology (usually completely maladapted for today’s rapidly changing business environments), you’ll have to create wireframes for all screens, as part of the product specification, before the software implementation starts.

How to create wireframes

Wireframes can be created quickly and easily. You don’t need to be an artist or an experienced UI (user interface) designer to draw the basic wireframes of your product idea. You just need to be able to draw boxes, circles, and arrows.

To get started, you’ll just need some paper and a pen. If you’re wireframing with group of people, a whiteboard can be useful but isn’t required. If you want to get fancy, you can use an iPad with an Apple Pencil and a sketching app like Concepts.

A sketching app such as Concepts can be used to draw wireframes (Source: Concepts)

Some people may feel the urge to start wireframing with a design application, like Balsamiq or Figma. However, I highly suggest starting off the wireframing process with pen and paper (or whiteboard). There are a number of reasons for this, and they’ll become clear in the course of this article.

Step 1: Create a sitemap

The wireframing process starts with creating a sitemap. A sitemap shows all the screens of an application and how these screens interconnect. For each screen that your application should include, draw a box with the name of the screen in it. Typically, the first screen is the „Home Screen“. Next, draw the remaining screens. By drawing lines between screens, you define how the screens interconnect, thus how users navigate through the application. If some of the screens of your application should be made accessible to logged-in users alone, you can indicate that by adding a lock symbol to the screen.

A basic sitemap of an online banking app

Step 2: Sketch wireframes

Once you have the overall structure of your application defined on a sitemap, it’s time to draw the wireframes of the individual screens. If you haven’t wireframed before, don’t fret. The process is simple! Each element of the application is represented with a simple shape, such as:

  • Large boxes, for containers and sections
  • Small boxes with text, for buttons
  • Multiple horizontal lines, for long paragraphs (titles and important copy should be written out)
  • Boxes with diagonal lines through them, for images

Two key elements you shouldn’t forget are headers and navigation.

In case you’re creating a web application or website that should be optimized for mobile devices, you should at least wireframe the key screens for mobile devices.

Wireframe of a page for a banking website, including the version for smartphones

Step 3: Draw interactions

After you’ve sketched the wireframes for all screens, draw arrows between screens to indicate how users will navigate through the application. Use the information from the sitemap where you already specified how the screens interconnect. Typically, users get to other screens by clicking or tapping on buttons. Therefore, arrows often lead from buttons to screens.

Wireframes of a rideshare app; arrows indicate how to navigate through the app

Ensure that users are well-guided through the user interface. Users must be able to reach each screen. Avoid dead-ends — situations whereby users can’t return to the previous screen.

A dead-end — users can’t return to the previous screen

Step 4: Digitalize wireframes

Now that our paper-and-pen wireframes are done, it’s time to convert them into a digital version. Paper wireframes are great to brainstorm first drafts and quickly iterate through different versions at the beginning of a design process. But they have some drawbacks. They are more difficult to store, share, and make interactive than digital versions of wireframes. However, don’t get fooled and rush into a digital version as your first step. Digital wireframes take longer to create, take more time to edit, and it’s all too easy to fall into the trap of spending too much time on the details of a screen.

For basic, low-fidelity wireframes, we often use Balsamiq at Voa Labs. Balsamiq doesn’t allow you to create detailed visual designs, which is ideal when the goal is to create low-fidelity wireframes. Other tools that are also great for creating wireframes, but which also allow for greater detail (which can be a drawback), include Sketch, Adobe XD or Figma.

Step 5: Create an interactive prototype [optional]

„An interactive wireframe is the best trade-off of speed for functionality because it allows for natural exploration and discovery on the part of the subject without requiring a fully working product.“

– Laura Klein, Principal at Users Know

Many wireframing tools allow you to make wireframes interactive. You interlink screens by defining the target screens of buttons and links. The resulting interactive prototypes are great for early user-testing. You can ask test users to navigate through the application and share their feedback.

An interactive prototype of a rideshare app

What’s next?

After following the steps above, you’ll have created your wireframes, maybe even used them to create an interactive prototype, and integrated user feedback. Typically, the next step is to create a high-fidelity visual design. Here, you’ll work on the combination of typography, colors, and imagery — all with the goal of creating a visual design that delights users aesthetically.

About Voa Labs

Voa Labs is a digital product studio that transforms ideas into incredible products. Partnering with everyone from tiny web startups to experienced enterprises to help them build digital products that are simple, beautiful and easy to use.

Freigutstrasse 16
8002 Zürich
Switzerland

hello@voalabs.com