3 great reasons to stop using wireframes

Robert Goesch • 20.10.2023
Robert Goesch

This article will illustrate how you can save time and money and reach better results by skipping wireframes. The observations are based on six years of experience working on multi-million dollar projects. However, not everyone is prepared for it.

  • Wireframes
  • Visual Design
  • Usability Testing
  • Interaction Design
  • Design Process

Saying goodbye to wireframes was never going to be difficult for us, as we’ve never stood behind them as a useful design tool. We haven’t used wireframes to design digital products at any point of the Dumbo journey. Thankfully, our clients have never argued with us on this as they have seen that leaving wireframes off the deliverables list has sped up the design process and increased the quality of deliverables. 

Many designers might argue that: »With wireframes, I can better present a concept,« »I can quickly test ideas for their usability,« or »They are indispensable for the cooperation of developers and designers!« not to forget »In small projects you can get along without them, but at the latest when it comes to serious sizes, they are indispensable«.

However, in the four years that we’ve been running our business no one has ever asked us »Where are the wireframes?«

We want to share not only why you can easily save time and effort by skipping the wireframe process, but why using wireframes might actually be damaging the quality of your digital products. 

But first, let’s be clear on what we mean when we talk about wireframes…

What is a wireframe?

In a design process, wireframes are used to visually represent the structure and functions of n interface. Usually abstracted in grayscale and with placeholder content. The spectrum is large, but generally speaking, there are two grades of wireframes: 

  1. The first are sketches created with pen and paper or whiteboard and marker, these are low-fidelity wireframes. 
  2. The second are concepts that are created with the help of apps, these are high-fidelity, digital wireframes. 

Unlike a sketch, the solution becomes more tangible and the level of detail is higher. Conventional interaction patterns illustrate the functionality and provide guidance for further product development.

When we say that we don’t use wireframes, we’re talking about high-fidelity wireframes. The kind that are created using software and are meant to be a blueprint or guide for the user interface. Low-fidelity wireframes, on the other hand, are needed by all of us to express our thoughts and develop ideas together with our teams. We tend to call them sketches or scribbles.

Therefore, for simplicity’s sake, we’re talking about wireframes as a deliverable — something that you’d send to customers. Those are the ones we can do without.

1. Strategy informs visuals, not the wireframe

Wireframes should allow us to decide on strategic and content issues. However, even before each design draft we have to clarify a few fundamental questions such as: what goal do we want to achieve with the page we design and how can we achieve this goal? 

With the answers to these questions we define the strategic direction and set the cornerstones for our design activities. We don’t build the strategy simultaneously with the visual design. Creating wireframes can really only help us to visualize the thesis we have developed, not to formulate them.

Before deciding on what the page will look like, we have to establish a common understanding with all stakeholders around the desired goal. We create this understanding using an »Interaction Blueprint« that is based on our »Interaction Archetype« Framework (linked below). This model enables us to form strategic goals and decide how we’re going to achieve them — even without design know-how. 

The Interaction Blueprint serves as a frame of reference to describe the goals and tasks of an interaction. This allows us to make decisions at a strategic level that inform design, content and functional measures. This way, we ensure that the design follows these decisions and properly expresses them.

2. Wireframes aren’t high-fidelity enough to get robust insights

Wireframes are often used to test initial hypotheses in the form of user or usability tests at an early stage of development. The goal is to find the evidence as soon as possible and the hope is that wireframes will provide insights into the product experience and help to determine the pros and cons of a solution.

The idea isn’t a bad one, but unfortunately users aren’t always able to take information from a wireframe and understand how it will translate into a digital experience. Wireframes are simply too far away from what users expect from digital applications in 2020. In a test with a wireframe, users don’t experience the readability, the colours or the ergonomics and therefore nowhere near the entire usability of the product.

What we ultimately strive for in a test is immersion. We want to get as close as possible to the real context of use. In an ideal world, we are able to silently observe the reactions, gestures, interactions and thoughts of the test user. High-fidelity wireframes just can’t provide that for us. In our experience, it doesn’t require a fully developed prototype that already represents the brand and includes all functionalities. A simple click-dummy is sufficient. The determining factor is that the test product runs on the appropriate device, is equipped with real content and visually resembles the majority of the products that the target group deals with on a daily basis.

The sooner we create an experience that comes close to an interaction with a real product, the sooner we can obtain reliable results.

3. Product teams do need to see specific designs to make lasting decisions

If we present a prototype, there’s a fear that the user or client might be distracted by the design. Wireframes are abstract enough that we are able to create enough distance from the final product to be able to discuss the basic ideas as factually as possible. And wireframes are tangible enough that they enable joint decisions on information architecture, user experience and technical requirements. Right?

Unfortunately, this distance actually causes problems. In a wireframe, we break down navigation bars, galleries and forms into a representative generic interaction pattern. They are nothing more than symbols that represent a certain type of interaction.

However, symbols have to be decoded and interpreted. Everyone sees something different in them. This is how unconscious (and unintentional) expectations of the design are established. The further we move away from the wireframe idea during the design process, the greater the disappointment.

In many cases, the design deviates only marginally from the original wireframes. They become a prescriptive blueprint before anyone has really thought about the form and communication of the content in detail. Wireframes end up backing us into a corner with no way out.

We can’t protect ourselves from discussions of taste by abstracting with wireframes. In doing so, we diminish the importance of the design to an aesthetic layer on which we decide “separately and at a later point in time”. Without the underlying interaction design and its visual characteristics, it is hardly possible today to gain valid insights into technical requirements, information architecture or even the user experience.

It’s important to remember that now more than ever, the entire digital experience is based on so much more than just the content itself. The way that the content is arranged on the page, when it’s presented and how it’s presented are just as important to the product. In order to be able to create great user experiences, we rely on design prototypes as early as possible.

Would you like to say goodbye to wireframes?

We’ve found that we’re better off designing the interaction between man and machine in a creative debate from the very beginning. In our experience, this is how brilliant products are made. However, there are two things that you need to keep in mind if you’d like to adopt this mindset.

1. Commit to the design process

As you already know, digital products have no completion date. The same applies to their design. Release after release, product teams strive to optimize the user experience and respond to the market. The design is part of that. The status »final« is not. The first design draft will not be the last. And before it sees the light of day, it will have changed a few more times. Of course, we may strive for perfection, but it’s impossible to achieve. That’s why we start designing in hour one, and we never stop.

2. Find designers with the right skills

Moving away from wireframes requires a broad level of expertise. Titles like User Experience Designer, Interface Designer, and Service Designer each focus on different contexts. Some of these roles are so focused that they aren’t backed by a traditional design education. However, a broad knowledge of design and the corresponding tools is needed to consider architecture, interaction and visual appearance all at once. It’s the only way to open up the scope for new solutions. We prefer to rely on specialized generalists. They are able to see the bigger picture and use the tools required to design high-performance products from the beginning.

Finally, shift your mindset

In order to move on from a world of wireframes, it does indeed take a mindset shift. What I can say is this: We haven’t used wireframes in 4 years and it has only had a positive impact on the products that we’ve designed. Working without wireframes has meant that our team is able to properly pin down a strategy, get valuable user feedback early on, and ultimately design for the entire digital experience. Our products are better than ever. We’ll never go back.

Our insights straight to your inbox