Understanding the importance of wireframes in the digital product design process
Yesterday I read an article on the internet written last year with the very big title “Wireframes are dead”. The article had a lot of traction being promoted even on muzli, a website that offers inspiration for designers.
Why write yet another article about wireframes?
After reading that yesterday, I looked back at my last 2 years of work as a Product Designer and tried to understand where do these statements come from and what is my position towards them. Because for my entire team and I (not just design), wireframes are an intrinsic part of our overall product design. We consider them useful on many levels and you can read further why.
I believe such statements and positions stem from the fact that the concept of “wireframes” is wrongly understood. I noticed that many designers out there tend to create wireframes that are just another greyed out version of a UI and this trend is also spreading around the internet very vast. You will find all these beautiful grey, blue, brown or red mock-ups that are not only clean, but pixel perfect, which are often called “high-fidelity wireframes”. I think mostly because they are created by UI oriented designers and show a part of the design process that doesn’t even exist. Because let’s be honest, a user flow or a wireframe is truly meant to be quick and dirty, the so called “low-fidelity wireframes” not pretty and pixel perfect.
What does wireframing really mean for my team and I?
Wireframing is that step of the design process that helps understand the product at a structural level. It’s purpose is to lay out content and functionality together taking into account user needs and user journeys.
Wireframes are used early in the development process after the user flows have been outlined, to establish the basic structure before visual design and content is added.
In my team the wireframes are the ones that keep everyone on the same page — not just product managers and designers, but also engineers. And they can be changed really quickly to accommodate the collaborative and iterative nature of product design and development, especially in agile startups and enterprises. They generate discussion, are a means to make back-end developers understand better the flow and are a starting point for discussing technical challenges that may occur.
That’s why for this purpose we use a digital wireframing tool called balsamiq, we like it because it resembles very well the pen&paper wireframes.
What I find most useful is that nobody thinks of UI when we talk on these wireframes, the conversation usually revolves around, structure, flow, steps, specifications, interactions, product/information architecture and user journey. They also cover all the use-cases and edge-cases that might occur and this helps everyone understand the bigger picture.
Why I think wireframes shouldn’t be dead?
In my opinion the wireframes very useful to communicate the following details, that get everyone on the same page:
- Structure — How will each piece of the user flow fit together and how will the entire flow fit in the bigger picture?
- Content — What will be displayed on each step of the flow?
- Informational hierarchy — How is this information organised and displayed?
- Functionality — How will this interface work? What will it call, where will it go, what would each element do?
- Behavior — How does it interact with the user? And how does it behave?