Wireframes – The Fifth Wheel of UX Design Process. How to design without them?

The white and gray boxes with arrows and image placeholders are often the symbols of the UX Design. They are considered to be the inseparable part of the software creation process. But, is it true?

Now, take a cup of your favorite coffee and let’s think why we do not need digital wireframes anymore to design great apps.

What Are The Wireframes?

If the wireframe creation is your day job, you may skip this section and move directly to the “Disadvantages of Wireframes”.

The wireframes are schematic layouts of a screen or a view. Their purpose is to demonstrate which elements will be included.

Classic wireframes are built from gray and white blocks. It is allowed to use symbolic iconography. However, there should be no pictures in the wireframe. If the page will contain one – it is recommended to use the image placeholder.

The main goal of a wireframe is to present in a simple visual form the concept of a view. Stakeholders and Development Team may review them and approve. They are created before designer will jump to the detailed high fidelity mockups, that were usually time-consuming.

What is more, these deliverables theoretically ensures that the information architecture will be planned correctly. It is important to include appropriate text resources, not just “Lorem ipsum” placeholders.

Finally, The navigation scheme and flow may be quickly visualized with the wireframes. Low fidelity prototypes are often built from this deliverables. This way designers are able to quickly validate some aspects of the planned solution.

The Advantages of Wireframes

Before we will get into some critique, let’s discuss some bright sides of wireframing. There are a couple of reasons why these deliverables may be useful.

Wireframes are fast

They are slower than sketches but it seems that they are much quicker to be created than high fidelity mockups (especially ones done in Photoshop). There are apps like Axure, Justinmind Prototyper or Balsamic that helps in that task.

However, recently some software tools closed the gap. Modern apps for UI design like Sketch are extremely fast and robust.

Wireframes let us validate the design direction

Deliverables that are done after brainstorming let us quickly review the ideas in a digital form that somehow imitates the real views. These ones may be used to create quick prototypes for usability tests.

Every member of a project may see how content lays out on a view. Thanks to this, some refinements may be done before more time-consuming tasks.

They may determine documentation and requirements

Today it is quite popular to work in Agile methodologies. If you do not work in the waterfall, you know that sometimes there is a lot of things to be done in parallel on many different levels.

Analysts do not have to wait for high fidelity mockups. They can start to prepare functional specifications with wireframes. The development team may start to implement rough layouts quickly.

The Disadvantages of Wireframes

After reading the previous section you may think that wireframing may be an ideal solution for small and agile start-ups. Personally, I see these deliverables as the figment of a corporate world. Why? To answer it, let’s move to some critique.

People do not understand wireframes

Wireframes are made digitally and people see them usually on screens. Some stakeholders perceive them as the ugly version of the final product. This way they may reject some great ideas just because they thought that it looks bad on a screen.

It is not the role of stakeholder to imagine the final look of the solution based on wireframes. But still, they have to review what the see. The judgments may be negative because of wrong interpretation. I was a witness of such situations many times. It is not stakeholders fault that he did not see the desired visualization. We as the designers have the responsibility to present our ideas in the understandable form.

“It is not the role of stakeholder to imagine the final look of the solution based on wireframes.”

Wireframes are not so fast anymore

In the time when the Photoshop ruled the world of UI Design. Small tools for wireframing were a real saving. However, nowadays we live in a golden age of tools for designers. There are great alternatives to Adobe software like Sketch, Figma or even UXPin. Creators of Photoshop noticed that and are already working on their tool called Adobe XD.

Personally, I do not have to spend much more time to create high fidelity mockup in Sketch than during making a wireframe. If you use tools like this you do not have to waste your time for gray boxes.

Wireframes may block creativity

Many designers take these schematic layout deliverables too serious. After creating wireframes they can’t force themselves to create visually attractive UI. Their final design looks like painted wireframe.

Furthermore, if a wireframe was accepted by a stakeholder and a documentation is almost ready, a designer who came up with another great idea while creating a high fidelity mockup will have to overcome some formal difficulties to implement the enhanced vision.

What to use instead of wireframes

When you create a solution, firstly you have to create a vision of the product. You have to see how it may work in general. Then you have to specify those vision precisely, validate and iterate it until it will work as planned.

Wireframing is a middle layer of the design process. It does not specify precisely how the final product will influence the user. This is why it does not provide much value. If you will properly focus on the phase before – brainstorming, Customer Journeys and UI sketching, you will be able to jump quickly to the pixel perfect view creation.

First, focus on on the big picture of the solution you create. The best way to do it is to make sketches on paper and whiteboards during the brainstorming phase. The drawn diagrams and views will give you a sense of the direction, that may be quickly validated using some heuristics.

Many designers misunderstood sketches as wireframes done on paper. However, these are very different deliverables. When you make sketches you clarify the overall concept of how UI will work. While wireframing you are forced to think in a more detailed and schematic way, that may block your creative mind. Even if you will continue to create wireframes it is important to makes sketches before them. I recommend reading the article from uxmovement.com – Why It’s Important to Sketch Before You Wireframe.

Then, it is a time when you get used to creating those ugly white and gray boxes. But, now you have to forget about them.

Now, you should jump right to pixel perfect mockups that will clarify your vision with a great precision. Using modern tools like Sketch or Adobe XD will let you create high fidelity screens in a moment. 

For the best effects, you may prepare a set of standard UI elements before creating a specific feature. Collect these views in the style guide and use them as symbols (in Sketch or XD). Creating a design system is a powerful ability that will gain you process and help you maintain consistency of the whole solution.

What about prototyping?

Wireframes were perfect for low fidelity prototypes. Now, thanks to the tons of tools like Invision, UXPin, Principle, Flinto Origami or XD, creating high fidelity prototypes is even more efficient. Mentioned tools are easy to use and fast, some of them even include rich abilities to create advanced motion design and animated interactions.

There is no reason to go back to the wireframing to prepare prototypes for user testing. If you need to validate your ideas immediately, use your sketches to do it.

The benefits of designing without wireframes

If you will follow advice mentioned in a previous section. You will notice some really positive results.

High fidelity mockups shown to the stakeholders and the rest of the team will get much better and concrete feedback. People will not have to wonder how the view will look like in a final product because they will see almost it’s screenshot.

Next, while you will be creating high fidelity views you will be able to validate the ideas faster. The middle layer, wireframing, disappeared so the vision of the solution is created digitally as the specific views and screens.

Wrapping up

Wireframes are perceived as the fundamental part of design process. However, there are lots of rational arguments to omit them while creating a solution. If you would like to make fewer wireframes, try to make more sketches during brainstorming sessions and then open you modern design tool and create something in high fidelity.

If you are like me and you constantly search for the unique insight into UX & UI Design, there is a community around the UX Misfit blog. If you would like to share and read inspiring stuff with people like you – feel free to join UX Misfits Community on Facebook.

What is your opinion about wireframes? Do you think wireframing phase may disappear in the near future? I will be glad if you will share some thought about this subject. Thank you!

Similar articles:

  1. When Bottom Navigation Fails? Revealing Pain Points
  2. Skeuomorphic Design is good. Minimalism is overrated
  3. Motion Design Specs – How to Present Animations and Interactions to Developers
  • Fluid UI

    Hi, nice article. You make a lot of good points. In general I think wireframes still play an important part in the design process and we may need to work at some aspects such as explaining their purpose to clients and other stakeholders. If a client does not understand properly the role they play then they may misunderstand their purpose and see them as prototype without all of the bells and whistles. They are fundamental in my view to the early stage design process where details are, and indeed should be, vague. We are focussing on the big picture and trying to build the superstructure for the design not the design itself. If a client thinks they add time to the process, and perhaps expense, then they need to be shown that they are important because it is easier to discuss the big points and the context with a wireframe while when we are the stage of a high fidelity prototype we are beyond that point. It is still possible, obviously, to make changes but we should be discussing details at this point rather than context and the bigger picture. So, basically, we dont want any conversations which start with: ‘I thought it was going to have x or y on the home page and I thought the home page was going to have an image taking up only a portion above the crease…’.

    All in all, I think wireframes fill an important role but it is always important to be examining the processes which lead to overall design phase.

    • Thanks for sharing your opinion and parts of your workflow with clients. Useful thoughts. Every designer , every company should find own process that will be effective in their environment. Nowadays, wireframes are overrated, but they are useful in particular cases (as you mentioned). Thanks!