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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Joël Sonderegger is the Founder & Managing Director at Voa Labs. He helps his team strategize, design, and engineer products that enable businesses to transform their ideas into digital solutions, while energetically steering all aspects of Voa Labs’ operations.
Previously, Joël was a VP of Product Management at Sygnum, the world's first digital asset bank. Prior to that, he worked at Zühlke and IBM, where he gained his passion for agile, high-tech environments in which creativity and collaborations are proactively encouraged.
Joël holds a Master of Business Innovation from the University of St. Gallen (HSG) and a Bachelor of Business Administration from Zurich University of Applied Sciences (ZHAW).
.png)
.webp){kind=logo}
