Keeping It Simple

On Usability.gov, the author provides a succinct and accurate definition of wireframes:

“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 [ . . . ] It’s important to keep in mind that wireframes are guides to where the major navigation and content elements of your site are going to appear on the page. Since the goal of the illustrations is not to depict visual design, keep it simple.”

This quote outlines four essential truths about wireframes:

1. They are basic two-dimensional illustrations
2. They focus on layout, content, and order
3. They do not include styling, color, or graphics
4. They should be kept as simple as possible

Wireframes are a communication tool. They communicate the way information will be organized in an interface. They also communicate the user flow – how a user will progress through the site or application. Finally, and most importantly, they communicate the fact that they are not finished products and are subject, and welcome, to change.

What wireframes do not communicate is a “brand identity.” Intentionally devoid of color and imagery, wireframes remain open to subjective interpretation (of what could be). Internally, design team members can continue engaging in the free flow of ideas that might change the layout and order of content on the page. Externally, clients and stakeholders might posit suggestions about how the product (of which the wireframe is a minimalistic representation) could look or behave differently. Color and imagery carry “meaning” and for that reason are distracting. The purpose of a wireframe is to allow designers and stakeholders to remain focused on the essential form and function of the design.

No style? No style at all?

The short answer is yes. The long answer is communicated in the following quote on UX Movement’s website:

“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.”

Wireframes are the building blocks that allow for the rest of the UX design process to unfold. Wireframes are all about structure – form & function. The key question that the designer has to ask at this stage of the process is: “Why am I creating a wireframe rather than a full color mockup?” Read more about the Theory, Psychology, and Benefits of Wireframes in a related post.

Wondering about Wireframes?

If the answer is that the structural considerations of the design haven’t been fully fleshed out, then you’ve started in the right place. Wireframes are the key to avoiding structural usability mistakes early on, which can require more structural changes later on, resulting in more time and cost allocated to the project.

It’s always tempting to work with color and images early on, especially if you come from a design background.  But UX and visual design are not synonymous, even though they are closely related in many respects. UX design is about creating an experience. An experience can be influenced by graphics – beautiful imagery and color can pluck heartstrings, spark synapses, and evoke sentiment.

But in web and application design, the intended experience is generally for a user to successfully satisfy their task and your goal in using your product. Color and imagery play a part in that, but without creating a logical architecture for the product, you’ve risked creating something aesthetically appealing but rife with usability problems. Wireframes are the key tool for planning out an experience where users are able to accomplish their goals with as little friction as possible.

A Holistic Approach

At the wireframing stage of the design process, we’re still in somewhat of a bird’s eye view of the project in question. Rather than focusing on any one part of the design at a detailed level, we’re still in the phase of developing an understanding of how it works as a whole. To avoid the risk of becoming obsessed with minor details of the design, it’s important to – in the wireframing stage – stick with using black, white, grey, and unglamorous placeholders for text and images. We know it can take more time and be painful for designers, but it’s worth it.