Wireframes

A wireframe is a stripped-down representation of an interface, typically a Web site. Wireframes allow a developer to work at a high level towards usage-based design, without worrying about colours, fonts, content, or underlying technologies. The purpose of a wireframe is to define the "what" and "who" rather than the "how."

Wireframes attempt to answer:

What is going to be presented? Who is the audience?

Wireframes do not answer:

How is it going to be built? Where is it going to reside? When is it going to be ready?

Wireframes help define the elements of an interface that will remain constant, as well as the elements that are expected to change. A wireframe is also useful for determining some basic information architecture, showcasing how the same content may be accessed by more than one means.

Typically, wireframing is one of the first steps in developing a new Web site. In addition to creating new wireframes, I have found it useful to deconstruct competitors' Web sites in an effort to identify what elements an audience is likely to expect from my client's site.

The process for creating wireframes for an existing Web site is surprisingly easy:

Do a screenshot of the page you wish to deconstruct.
Paste the screenshot into your favourite design application (Visio or Illustrator work well).
Overlay screenshot with labelled boxes.
Wash, rinse, repeat.

The following sample wireframes are from projects completed while working at Navigata Communications. I am not keeping the wireframes current, so it is possible that they are no longer accurate for the sites outlined.