It has amazed me in my time doing digital design how many overlook such an easy, but crucial step in the design process. Wireframing.
Defined by Usability.gov, Wireframing is:
A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.
Not only does this allow you to think unrestrained by having to make things “look pretty”, but it also allows for the free-flowing of ideas since everything is rough and quickly done. I can think back to a number of past projects that if a wireframe had been done first, the outcome would have been much better and saved us from going back to rework them.
In my current role, wireframes are part of our process with every project. It’s part of what we deliver to the client first. They can then decide to move forward with the UI design portion — either with us or another agency if they so choose to do. So basically we are solving problems for the client with our wireframes. These can be fixing a user experience (UX) issue they might be having or a total redesign.
So why should you be wireframing?
Well, some key reasons for it are:
- It can make the sitemap or project into a visual tool that all can understand. It helps provide the goals and information flow so that everyone is on the same page from the very start and points out flaws early on in your site’s architecture or project.
- Helps explain features functionality to clients or your team and at the same time help determine if it makes sense to include them. This helps create transparency as you look objectively at the ease of use, conversion paths, element placement.
- Makes the process more transparent and provides direction every step of the way. Think of it as pouring the concrete for a house. Then the framing built on top of that. Finally the drywall and paint. This is what wireframing is to the user interface (UI) design process.
- Another major benefit of wireframing, aside from what I previously stated, is the time-saving aspect of it. With the “blueprint” in place, you can easily just start building on top of it. And you can build with confidence.
Anyone can contribute to the wireframe process. You don’t have to be a designer. Doesn’t even require a computer. Just need a pen or pencil, and a piece of paper to sketch on. The point is to get the ideas out there for discussion. I’ll touch more on the how later, but for now, get everyone talking and sharing in the creative process.
Now that wireframing is part of every project I work on, I can honestly say I regret not pushing harder to make it part of past ones. I know it could have saved a lot of time, money, and headaches for sure.