A modified version of this post originally appeared on the New Signature blog on August 6, 2011. It has been edited and reposted here with permission from New Signature.
Wireframing is often neglected in the website development process, but it has a huge impact on a site’s success. If you’re involved in website development in some capacity, it’s critical to understand what wireframes are and what role they play.
What are wireframes?
Wireframes are skeletal versions of web pages that indicate what those pages will contain. Generally, wireframes map out the approximate size, arrangement and content of elements on a page, but do not typically contain refined design elements like colors, photos or typography (obviously the words have to be in some font, but the font is usually something generic not intended to reflect the typography actually to be used in the design).
Here’s an example of a wireframe, alongside the final page:
As you can see, the wireframe diagrams the page’s structure — a content rotator in the center, signup form and facebook box in the sidebar, and so on. Like a blueprint, it indicates what will go where but it does not actually convey the feel of the finished product.
Here are some additional examples of wireframes along with their finished counterparts:
As you can see, while the wireframe layouts provide a general sense of size, location, and so forth, they don’t necessarily dictate the exact sizes and placements of all elements. Oftentimes during the design process, page elements will get resized, moved slightly, or otherwise altered to accomodate the spacing needs of the design — but the overall structure of the final design should always match the wireframe.
Why do wireframes?
Just as it’s not a good idea to build a house without a blueprint, it’s not a good idea to build a website without wireframing. Though every individual page on a site typically doesn’t need to be wireframed, the homepage, landing pages, and other key pages typically should be diagrammed out to establish what will go where.
Why not just figure this out during the design process, rather than having a separate stage just for wireframes?
It’s a question we often hear. The answer is that by doing wireframes we can focus on the content and functionality without getting caught up in conversations regarding colors, photos, and the like. When reviewing designs, it’s very easy to overlook the structure of the page and focus on the overall “look and feel€ — which means it’s easy to omit important content or fail to think through questions about whether what’s on the page is right for the audience.
When you evaluate a wireframe, you’re not trying to assess it on an aesthetic level — you’re trying to make sure the page elements are in line with the relevant goals and content. When looking at a design, it’s hard to make those assessments because the design itself may alter your opinion of the layout you are looking at.
To return to the blueprint metaphor, jumping straight to design without doing wireframes is like picking out paint colors without first considering how much closet space the house needs. The wireframes build the structure that the design goes on top of.
Wireframing Tools
Wireframes can be created using just about anything — including a pencil and paper! But using software specifically designed for wireframing, rather than an app that just happens to have tools you could use to create a wireframe (such as Word), has a lot of advantages. Good wireframing tools make it faster and easier to develop wireframes that are easier to edit, and allow for annotations to explain aspects of the wireframe without affecting the layout.
There are a number of good wireframing applications out there. Two commonly used are Balsamiq and Axure RP. Which is used for a given project depends on that project’s complexity and demands.
Balsamiq is good for quick, often one-off wireframes. It’s very easy to use and by default gives wireframes a nice “sketchy” look that helps convey that the wireframe is not intended to be a finished design. Balsamiq creates wireframes that can be distributed in file formats such as PDF and PNG.
Axure RP, on the other hand, is a more robust product that allows for creation of wireframes as actual web pages. This makes it possible to do things like create working links between pages or demonstrate how an interactive element might behave — turning the wireframes into rudimentary prototypes.
Learning More
There are a number of excellent resources on the web that go into more details on what wireframes are, how they provide value to the web development process, and more. I recommend you check out: