The white and gray boxes with arrows and image placeholders are often the symbols of the UX Design. They are considered to be an integral 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 primary 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 the 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 can quickly validate some aspects of the planned solution.
The Advantages of Wireframes
Before we 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 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 they see. The judgments may be negative because of the wrong interpretation. I was a witness to 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 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 while 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 stakeholder accepted a wireframe and 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 works 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 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 your process and help you maintain consistency of the whole solution.
Design Faster in Figma and Sketch
Never start Your work from scratch. Use the Kit that already have 1500+ components with well structured styles, variants & auto layout.
Use Prime Design System Kit to boost your workflow. Create for Web, Mobile, and Desktop. You may use it as the entire UI Library for Design System or just create Landing Page for your next Client. Perfect for those who want to save time while creating UI designs and learn best practices of Figma and Sketch at the same time.
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 the 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 a 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 a fundamental part of the 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 continuously 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 the 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: