What, Why, and How: Wireframing

“Give me six hours to chop down a tree and I will spend the first four sharpening the axe.”
–Various, famously misattributed to Abraham Lincoln¹

Preparation is an essential element of success. This wisdom applies very generally; whether you’re constructing a skyscraper or concocting an elaborate three-course meal, preparation is key. Building a website or web application is no different. That’s why in today’s post we’ll be discussing one of the key steps of preparing a web design: wireframing.

What is Wireframing?

Broadly speaking, a wireframe is a low-fidelity model of a web page or application. Its primary purpose is to show the layout of content (i.e. information and interactive elements) on the page. Wireframes can be sketched out using pencil and paper, or rendered digitally with software.

Wireframing, then, is the process of constructing a wireframe based on design specifications for a web project. Wireframing is generally an iterative process, meaning that it gets repeated several times over in order to refine aspects of the design.

When I say that wireframes are low-fidelity, I mean that they only serve as a rough sketch of a web page; they don’t aim to model every small detail. For example, style considerations (e.g. fonts, colors) are not usually included in this stage of the design. To understand why the design process starts with low-fidelity models, we have to talk about a concept called the design funnel.

The Design Funnel

Whether you’re designing a teapot or a website, the ideal design process charts a course from general to specific. Early stages of the design process ask questions about high-level goals/problems that the design needs to meet/solve. With these general aspects in mind, the next questions follow naturally: what kinds of processes/functionalities would meet these goals/solve these problems? From there, the design is refined iteratively, with progressively more attention paid to small details, until the final product is achieved. Many influential designers have likened this general-to-specific progression to the shape of a funnel, which starts out broad on one end and tapers into a small point. Wireframing occupies the space closer to the broad end of the design funnel, where some details are being nailed down, but where the emphasis is largely on high-level aspects of the design, in particular the layout of information and interactive elements on the page.

It’s worth noting that the term “wireframe” connotes a specific level of fidelity to most designers; anything less detailed would be called a sketch, whereas something more detailed probably qualifies as a mock-up, or (if it’s sufficiently interactive) a prototype. This is all design jargon meant to encapsulate the main idea of the design funnel: design models become progressively more detailed during the course of a project.

Why Wireframe?

To many people (i.e. non-designers), the wireframing process can seem a bit superfluous. Why start with a watered-down version of the webpage, when we could simply jump to the final look-and-feel for the page? Unfortunately, it’s not that simple (trust us, we wish it was!). Following the design funnel properly, which invariably involves wireframing, affords several advantages:

It prioritizes

Arguably, the most important part of any design is what problems it solves, not how it solves them. In the early phases of the design funnel (e.g. wireframing), we’re forced to nail down the “what” questions before the “how” questions, keeping the project focused on what matters and letting the details fall into place organically.

It breaks the design down into manageable subproblems

Trying to tackle every design aspect of a project at once is like trying to assemble a 1,000 piece puzzle by trying to fit random pieces together; it’s frustrating and egregiously inefficient. Everyone who’s ever tackled a large problem (like a jigsaw puzzle) knows that you have to “divide and conquer”: break the big problem down into manageable subproblems. Wireframing does exactly this by focusing the design process temporarily on aspects of the page layout. After wireframing solves its subproblems, later phases of the design process can proceed more smoothly.

It saves time

This was implicit in the other two advantages, but it bears repeating: wireframing ultimately saves time over the course of a project. And if the dictum “time is money” rings a bell, then it’s easy to see that wireframing is a worthwhile investment in any web design process. By leveraging the build-in prioritization of the design funnel and breaking the design process into easier subproblems, wireframing helps a project run more smoothly and quickly, which is frankly great news for everyone involved.

How We Wireframe

There’s no secret ingredient to our wireframing process; our success comes from working closely with our clients to discover their goals and following a strict, funnel-like design process to ensure that we deliver beautiful, well-developed content. Whether we’re designing a simple WordPress site or a sophisticated custom web app, we stick to this process. The value of this consistency is reflected in the efficiency of the project cycle, as well as in the overall quality of the finished product.

Take the First Step

Interested in reaping the benefits of wireframing and a streamlined web design process? Let’s talk!

References

¹ http://quoteinvestigator.com/2014/03/29/sharp-axe/

A great article on fidelity and the design funnel:
http://www.uxbooth.com/articles/concerning-fidelity-and-design/