Creating and using wireframes is sometimes perceived as an outdated practice. Or it's thought that wireframing is for non-designers or beginners who aren't very skilled with Sketch or Figma. Once designers can whisk up a high-fidelity design, they tend to drop wireframes entirely.
Personally, I am a big believer in those ugly ducklings of UX. Starting with wireframes can strengthen your design and make user testing more efficient. The quality of feedback you get with wireframes is higher than with polished design. Finally, wireframes offer a way to get your stakeholders involved in early decisions, which means less redesigning.
Let’s take these points one by one.
Improved Layout and Visual Hierarchy
Creating a wireframe (or a sketch) forces you to focus purely on the layout and how well it serves the content. The benefit is, of course, felt more in a complex interface than, for example, on a landing page. You often abandon the initial wireframe layout for something more creative in the later phase of the design process. This is why some may feel wireframes don’t contribute anything.
Yet, they do. By creating wireframes, you will have figured out the importance of different UI elements and bits of content. It's an opportunity to establish which information needs more real estate and which less. This is harder to do while also thinking about style, color, effects, typeface, etc. Wireframing will uncover design priorities and help you stick to them. This way, your final design will never accidentally sacrifice them for a pretty visual.
Flexibility in Testing with Wireframes
If a testing session discovers a design flaw, it's common to fix the prototype before the next user or a group of users continue to test a solution. You scramble to update the high-fidelity prototype. One small change means lots of work and rearranging, but you somehow manage it in time.
But what if no designer is present? What if the flaw is more significant, and you don't have time until the next session? You're destined to listen again and again to the same feedback, plus you can't test your new idea that may fix the problem!
When using a paper prototype or a wireframe, all you need is a post-it, a pen, and some white-out to change the interface or your wireflow quickly. You can even do it during a testing session. The designer prepares a change and signals to the moderator to leave some time in the end to try the new solution.
More Valuable Feedback
Wireframes invite feedback from users and colleagues more easily than a finished design. How so? The finished design is visually much richer, full of colors and effects, which will focus the feedback on the visuals. High-fidelity prototyping is useful, but often the thing designers most wonder about is clarity of information, usability, whether the interface "makes sense"...
Furthermore, your non-designer colleagues and especially your users will likely be impressed by the high-fidelity design, so they might doubt that their comments have merit. After all, it is such a great-looking design, it must be good!
Wireframes cut straight through this. There are no visuals to distract or to make people doubt they have the expertise to critique your work. This means you get quality user feedback, which can only make your final design better.
Getting Buy-In and Approval
A common obstacle in design work is getting approval and validation from clients or senior management. Every designer knows what it is like to explain your careful design considerations only to end up discussing change after change. There are more and less difficult people you will work with, but most are fairly reasonable. How is it then that requirements change so wildly, and what was an almost approved design ends up getting redesigned?
Clients and managers usually aren't much involved with the design process. Because of this, they perceive their role in the project as critics and judges. That mindset leads people to search for problems actively, and since the design process is subjective and involves compromise, it is easy to find them.
To avoid this mindset developing, get the stakeholders involved earlier by presenting wireframes before presenting design. Ask whether you are going in the right direction. Seek feedback, not approval. Clients and stakeholders become more invested in the design that they helped create. It reduces the number of redesigns and makes them more confident in the final result.
Online Tools to Use for Wireframing
- Sketch (30-day trial), Figma (up to 3 projects free), Adobe XD (free with limited sharing and users)… any standard design tool is also a neat wireframing tool
- Balsamiq (30-day free trial) is a tool purposefully made to support wireframing. If you are tempted to jump straight to designing, using Balsamiq is a good way to avoid that.
- UXPin (free limited version) is similar to Balsamiq with more advanced prototyping capabilities.
Let's Recap the Benefits of Wireframes and Sketches
Knowing how to use wireframes will significantly improve your development process and benefit your design. Though simple, they have versatile advantages. Use them to discover which content and features to prioritize. Quickly try out fixes and ideas in user testing. Encourage more accurate and focused user feedback. Bridge the rift between you and your stakeholders by getting validation early. Make your design better, and your life much easier.
