Datasheet

Figure 1-6: Annotating the relationship between sections

But once we’ve built our site map, our work is only halfway done. Now that we understand the “big

picture” of our entire site’s IA, how do we organize content on the individual pages?

Wireframes: Blueprints for Your Pages

A wireframe is a line drawing that represents the different areas of content on a page. Much in the same

way that a site map gives us a sense of how different areas of our site relate to one another, a wireframe

enables us to see how the different pieces of content on a given page will interact. These black-and-white

line drawings imply structure only. Bereft of color, typography, or any other design elements, wireframes

force us to establish a layout for our pages.

Typically, it’s not necessary to build a wireframe for every single page of our site. Rather, we can sketch

out a wireframe for each unique page layout in our site (such as your home page, search results, blog

entry, and so on). By starting with these plain-looking documents, we can identify any possible usability

issues before we’ve begun fleshing out our site’s design.

Just as we started drafting our site map by taking inventory of the types of content our site would contain,

we must identify the different areas of information that our page’s layout will house. If we are building a

wireframe for a WebMag 5000 article, then let’s assume that the page will contain the following information:

❑ Content. The article’s content.

❑ Related articles. A listing of articles related to one the user is currently reading.

❑ Logo. The WebMag 5000 logo.

Learn

Contribute

Accessibility

Statement

Global

Navigation

Content

Home

About

Overview

Articles Tutorials Reviews

Overview Our Authors Colophon

Overview

How It

Works

Writing

Tips

Advertising

Chapter 1

03_588338 ch01.qxd 6/22/05 11:18 AM Page 18