What tool would you use to hit a nail in? Only a hammer comes to mind. This is because a hammer’s form meets that specific function. It’s form matching function gives it its utility and value.
A wireframe is only useful and valuable if its form matches its function as well. But many wireframes today don’t follow this principle. As a result, they can end up hurting how others view the future direction of the design. No designer wants to harm their team or project. But if your wireframes don’t have the right form, you could.
The Wireframe’s Function
In order for your wireframe to have the right form, you have to understand its function. The wireframe is a document that’s completed before graphics and coding ever occur. But they can’t occur until you define and arrange the elements for each page.
A wireframe’s function is to display necessary page elements in an orderly arrangement. The UX designer defines this arrangement through user research, best practices and stakeholder goals. It’s then vetted through stakeholders to gain consensus before moving to graphics and coding.
Why Visual Clarity Is Important
Since you have to share your wireframes to gain consensus, visual clarity is of utmost importance. Stakeholders need to be able to see the structure and strategy for the website without getting distracted by how each element will look in the final design. A wireframe should allow them to examine:
- what elements should be on the page
- why they should be there
- where you should place them
- how they should function
When you put different shades and colors on your wireframes, viewers get hung up about how each element will look. Even if you tell them the style isn’t permanent, they still can’t avoid it because it’s a natural reaction to what they see. You want them to think about style in the graphics stage, not wireframing.
Important questions about site structure and strategy need to get answered first. Wireframe styles make this harder to do. Colors, shapes, fonts and images cloud the vision you’re trying to communicate. This can lead to your team making wrong decisions that could have a lasting impact on the site.
Wireframe Styles That Reduce Visual Clarity
Dysfunctional wireframes exist when designers let their personal style get in the way. Sometimes they add style to sell their wireframes to stakeholders better. Other times it’s done out of vanity.
Whatever the reason, style over substance has no place in wireframes, when substance is what makes a wireframe. Here are some wireframe styles that reduce visual clarity to avoid.
The big difference between a wireframe and a mockup is color. When you put color in your wireframes, you mix its function with that of a graphic mockup. The mockup’s function is to communicate branding and style, not the wireframe’s. Mixing the two reduces the wireframe’s visual clarity, making structure and strategy harder to define.
Grayscale wireframes used to be the conventional style. But the various shades of gray distract from the wireframe’s function. This leaves viewers wondering why certain elements are lighter and darker gray than others. It draws too much focus on individual elements and not enough on how the user experience works as a whole.
When you’re using gray on gray, you have to use different shades to make elements more distinguishable. This gives you more work to do. If you’re spending time getting the shading right, you’re taking time away from developing the site’s structure.
Grayscale wireframes also make elements hard to see and read. This can cause confusion and eyestrain when viewing. You don’t want your team to experience this every time they view your wireframes after each iteration.
A structure is useless if it can’t fit the content. It’s important to know early if your content will fit within the structure you’re designing. Block wireframing makes this hard to see by replacing text with blocks.
Text length and height can affect the size of buttons, menus, headings, paragraphs and other fixed areas. Viewers can’t get an accurate picture of how users will read the site if they can’t see how the text fits in the UI. Nor can they get an accurate measurement of element or margin sizes.
Monochrome is as Clear as it Gets
The best wireframe style is no style. The result of no style is monochrome – one color against white. This is the clearest form of wireframing that matches its function.
When viewers look at a monochrome wireframe, all they see is structure. There aren’t any colors or shades on particular elements that fight for their attention. Instead, everything is equal weight so you can focus on the whole user experience. This forces viewers to debate the arrangement of elements, rather than how they will look.
Another benefit to monochrome is that you don’t have to worry about making shades of gray or color tones look good together. You’re only working with one color, so when you wireframe you’re concentrating on the structure, not how it looks. This keeps you focused, saves you time and helps you make iterations faster.
The monochrome color you use should have a high enough contrast against white that it’s easy on the eyes. Gray on white tends to make elements look faint and dull. Black on white tends to have a heavy contrast that can strain the eyes. The perfect balance for a clear and pleasing look is dark blue-gray on white. It’s not only easy on the eyes from afar, but also up close when examining detail.
Monochrome Wireframing Toolkit
Wireframing in no style isn’t easy if you haven’t done it before. You can get Wireframe Patterns, a monochrome toolkit we designed that offers many desktop and mobile libraries each with an array of complete UI patterns.
A dysfunctional wireframe can break a team apart if people can’t see eye-to-eye on a site’s vision. A functional wireframe can bring people together if everyone is clear on a common vision. You need visual clarity on your wireframes for this to happen.
Don’t allow your personal style, preference or vanity get in the way of a document that everyone shares. The goal of a wireframe is to get consensus on the user experience. Make it easier on yourself and your team by adopting a wireframe form that matches its function.