What are wireframes and why are they important to website design?

People are visual, forever drawn to images, color, and movement. And yet, when creating a new website an essential step is to create boring, black-and-white, text-heavy mockups called wireframes. Here’s an (intentionally very small) example of a wireframe, with a designer note on the left-hand-side:

SampleWireframe
and the corresponding colorful final page excerpt:
SampleVisualDesign

Why waste time designing wireframes when it’s much more pleasant to stare at the final pages, that leave nothing to the imagination? Simple: wireframes allow the team to plan the structure and placement of elements for the website. They are just as essential as a floor plan is to build a house.

The wireframes show the placement and priorities of elements on a page, either as drawings (usually PDFs, as shown above) or in clickable prototypes. Either method keeps the discussion focused on content, avoiding our natural biases that enter the moment color and specific typography are introduced.

Wireframes are iterative (like a floor plan), allowing plenty of opportunities for collaboration. And they can be tested with users to confirm the design team’s choices or to provide  evidence for changes to the plan.

Once all of the decisions have been made about placement and priorities, we move into the visual design phase, styling the pages with the final look and feel. Besides color and typography, we specify button, link, and dropdown styling. No need to go back and move things around; those decisions were made during wireframes! This saves everyone headaches, and preserves budget and schedule goals.

The next time your website designer shows wireframes, don’t think s/he is being lazy: it’s an effective technique to structure the design process.

Please contact me if you would be interested in restructuring your support website, or read more about our process.

Tagged under:

Leave a Reply

fifteen + 10 =

Your email address will not be published.