Designing Web Navigation

WIREFRAMES

In the broadest sense of the word, wireframes are preliminary sketches of pages. They show the skeleton of the navigation system independent of the final visual design, or the primary layer of basic information needed on each page. Wireframes are a visual tool for working out how you will progress from the requirements, concept, and site map to designed pages. They allow you to deconstruct the problem and propose appropriate solutions. A primary function of wireframes is to capture your page template layouts.

There are different approaches to creating wireframes. Some aspects you should consider are:

Fidelity

As with prototypes, there are high-fidelity and low-fidelity wireframes. Low-fidelity wireframes may not even show layout. Instead they may just be a list of navigation types, content, and the functionality needed for each page. High-fidelity wireframes might clearly suggest a final design, including the size and position of navigational elements. Most web designers create wireframes that fall somewhere in between high- and low-fidelity wireframes.

Display of labels and text

One school of thought suggests using dummy text for wireframes. This is often referred to as "Greeked" text. The advantage to this approach is that other team members won't focus on the content, just the structure of the pages themselves. The other school seeks to reflect representative content in the wireframes. This can catch layout issues caused by long labels and dynamic texts before you implement ...