Prototyping Website Structure

Every web development project starts with different initial input. Sometimes an existing website is to be redesigned. Sometimes there's a detailed Request For Proposal, and sometimes there's a sitemap. Sitemaps are my enemy. They're such illusionists. They're so limited in how they define categories and relationships between pages. They fall far short of communicating the details of the pages themselves. Building a website based on a sitemap is insanity.

This ten minute video shows our process of grayscreen prototyping.
To embed this video on your site copy and paste this code:
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=-1308138296088477010&hl=en" flashvars=""> </embed> <br>Grayscreen Prototyping video by <a href="http://www.newfangled.com">Newfangled Web Factory</a>.

I'm also uneasy with notorious wireframes. They're slightly more sophisticated than sitemaps--offering a lot more detail. The problem is, they're still presented on paper. And paper just doesn't work. In fact, the detailed nature of a wireframe, I believe, contributes to illusions of communication even more than sitemaps. That's because they look so thorough and detailed. The detail makes those who review them feel like the site has been thought out. And they probably have been thought out--by the developers who make them. But as a vehicle for communicating this thinking, they fail miserably.

So when we begin a web project, whether we're starting from an existing website, sitemap or wireframe, our very first step is to put all the input into a clickable, web-based, grayscreen prototype. Then we burn the sitemap or wireframe.


Every website is a puzzle. Some are kid-simple 100-piece varieties, others are 5,000-piece brain busters. Regardless of how complex the puzzle, first you need to turn over all the pieces and start looking for edges.

Defining the "edges" of a website consists of working out site categories, grouping and labeling subpages, and differentiating main navigation from universal navigation (such as home, search, contact and sitemap, sometimes also referred to as "site utilities").


Books on information architecture suggest a maximum of seven main site categories. That's a good rule of thumb. Some main navigation categories, like "About Us" are common to most websites. They typically contain pages like History, Mission, People, and Employment. News, Events, and Calendar are also common site sections. But sometimes grouping and naming a site's main categories is trickier. Consider a software company whose main product is called "CyberTrac." A software product section would normally include pages for product downloads, support, developer resources, demos, and documentation. But should we group these pages under a menu labeled "Products"? Or do we name the main navigation tab after the product and label it "CyberTrac"? Getting the product name into the main navigation could be good for branding, but would visitors understand that "CyberTrac" is where to find all their product information?

There are no absolutes. Factors (like the number of products) bear weight in deciding how to group and name such a category. The name of the product is another factor. In this case "CyberTrac" kind of sounds like a software package so it might work as a label, but is the product were called "Centra," it could sound too abstract to function as an effective main navigation label.


Navigation flow is very important. We keep an eye out for navigation items that click to other areas of the site that are not actually under the tab where it was listed. For example, "Downloads" is a popular main navigation tab for software companies but it also makes sense to include a link for product downloads under the "Products" tab. Since there is just one Download page, the page listed under Products could redirect to the main "Downloads" tab. But this is always disorienting to site users. Cross-linking is a common problem and usually betrays a failure in overall site organization and categorization.


During our initial prototyping we evaluate the overall navigation balance. If one section has ten drop-down choices, while the others have only one or two, the navigation is imbalanced. This also usually means there is a problem in overall categorization.

Steve Krug's book Don't Make Me Think, and Information Architecture, by Peter Morville and Louis Rosenfeld are helpful resources for learning more about information architecture and usability design. The website BoxesAndArrows.com is another good resource.

Information architecture can be expressed using a paper sitemap or wireframe. But in a grayscreen prototype clients and developers get a feel for how their choices work in a browser. Cross linking problems, for example, are felt much more acutely with the clicking experience than they are when navigation is represented with lines between boxes on paper.   next >