Most Web site developers use "site maps" to think through the structure of a Web site before they build it. But while a site map shows you the 35,000-foot view of your site and how all the sections work together, it doesn't show you the page-level detail. What goes on each page? How much content does each page require? How can people navigate within the page and to other parts of the Web site?

To answer questions like these, you create a wireframe for each page of your site (or each unique page layout). A wireframe, such as the example shown in Figure 1, is a diagram view of a page. As a designer, I like to use a program such as Illustrator or Freehand to build wireframes, but "information architects" (Web professionals who focus on developing site structures and interaction design) generally prefer Microsoft Visio.

Figure 1: A wireframe diagram shows the content and interaction design structure of a Web page.

Mapping out content zones

Working out what goes on each page and how the content is presented and navigated is a huge task, especially for large enterprise or eCommerce sites. So, at one company I worked with, I instituted a "pre-wireframe" stage and created a template, shown in Figure 2, to help the team quickly map out content zones for each page to make sure they all worked well together and were consistent.

The template included key information to help remind the team of the page-level goals. For example, a key user goal for the Products page may be the ability to quickly find a certain product. A key business goal may be to showcase a new product. With knowledge of these goals, you can define a few content zones and show their relative placement, sizing, and priority on the page. Figure 2 shows the template filled in with content zones and a few key content elements. Notice how low priority elements fall below the fold (out of initial viewing range on the Web page, requiring users to scroll to see them).

Figure 2: A pre-wireframing template is a great tool to help a team quickly map out appropriate content zones while keeping business and user goals in mind.

Wireframing

After a pre-wireframing exercise, you can fill out the detail within each content zone you identified. (A pre-wireframing round is an optional step recommended for large, complex sites. Most sites just go right to wireframes from the site map.)

Wireframes serve sort of like your laundry list of what goes on each page from a content and media perspective. Here are some examples of what your wireframe might show:

• What copy goes on the page and how long it is
• Which CMS objects go on the page (if you're using a content management system)
• What kind of images and media (such as Flash and video files) go on the page
• Your technical and interaction plan for the page links, widgets such as drop-down menus, check boxes, and Submit buttons, and DHTML (Dynamic HTML) implementations like CSS (Cascading Style Sheets)

I create wireframes at-size, meaning they are the same widths and heights of my final Web page. (As of this writing, 800 x 600 is the lowest common denominator size for a Web page which accounts for laptop viewing.) That way, I can get a real sense for how much content comfortably fits on each page before a user has to scroll. Otherwise, you may have trouble at the Design stage trying to squeeze all the stuff required by the wireframe onto the page. Or conversely, the page can look sparse if in reality the content doesn't take up as much room as the wireframe suggested.

Wireframing is an important step that you should not leave out of any interactive project whether it's for a mobile project, a DVD, a Flash presentation at a tradeshow, or of course a Web site. Like a good architectural blueprint, the wireframe is your opportunity to work out all the content and interaction design issues on paper with not only the client, but also the technical team who builds the site.

You don't need to build a wireframe for every page of the site. You need only to make a wireframe for each unique layout. For example, if you have 100 product detail pages in your eCommerce site, you can build just one wireframe that shows how each page works. If one or two product pages have a slightly different layout or content twist to them, however, it's a good idea to make a special product detail wireframe just for them.