Why wireframe?

One of my favorite sessions at Bay Area Drupal Camp this year was "Wireframing Smarter," presented by Garret Voorhees. 

A wireframe is a blueprint that shows the bare-bones layout of a webpage. It shows where the navigation, content area, banner images, etc. go in a sparse, clean format that focuses on function rather than the form you see in design mockups. This shows an example of a wireframe, courtesy of Voorhees' presentation.

Wireframing allows designers to focus on the usability of a website before jumping into design. The first step of wireframing is usually scribbling pen on paper, and then translating those scribbles into a graphic layout program. The layout is in black and white, with a little blue to indicate links, and is quite simple. While reviewing wireframes, the client is asked to focus on the placement of elements on the page and functionality. The designer can ask the client to point to elements on a page to indicate a click and then show the page that would result from that click.

Once a wireframe is approved by the client, the designer begins to design, based on information in the wireframes.

In my opinion, there are pros and cons of the wireframing process, depending on the particular website project.

Pros of wireframing:

  • On a website with a more complicated site map, wireframes can help solve usability issues right out of the gate. It gives clients a sense of how the information on their site will flow.
  • Wireframes get clients involved sooner in the design process, so they know what to expect a bit more when they see their first design mockups.
  • When the website is being built by a larger team of developers and designers, the wireframe can serve as a guiding document for everyone, which makes the process more efficient.

That said, there are reasons I've skipped wireframing and gone straight to design in the past:

  • The website has a simple site map (or navigation structure), and the client's design needs are very specific, so wireframing seems like a wasted, inefficient step.
  • The website has a simple site map (or navigation structure), the website is not a typical color-in-the-lines project, and wireframes seem like they would be a creativity-killer. Sometimes the organic process of placing elements on a mockup leads to some great design. In some instances, wireframes might stifle this process.