Jesse James Garret introduced us to the idea of the 5 planes of user experience. In this stage we're working on the structure and organization of individual pages, which equates to the skeleton plane:
The skeleton plane is akin to what many refer to as wireframes, which identify the structure and organization of our Web site pages. Wireframes are simply storyboards for Web pages; wireframes are to the Web page what a site map is to the Web site as a whole. They are non-design oriented sketches that roughly identify the location of navigation, text or media content, logos, key headers, and other elements necessary for use of the site. You probably recall createing wireframes in MCT 2120, Web Essentials.
In their book Web Style Guide 2nd Edition Lynch and Horton refer to the wireframe concept as design grids. I dislike that term because it implies an angular, grid-based approach; I believe that sometimes a grid-based mindset can restrict creative thinking away from more organic design possibilities.
Wireframes should not concern themselves with visual design; instead, they should focus on conveying information about how the user will use the page. The can be simple, showing organization logo(s), basic content layout possibilities, and the navigational organization of a few key pages in the site. More complex wireframes show content, indicate functionality, identify links, articulate navigation, address production details or specs, and point out interactive elements or features.
Because we may have more than one page type in our site, we may need to construct more than one wireframe. For instance, if our content pages differ from our home page, we'll need a wireframe for each. If our site will use a series of forms or other interactive pages, we probably need a specific wireframe for those. Regardless of how many page types we need to wireframe, we should keep logos, page identifiers, and navigation systems consistent.
Planning and drawing out our wireframe(s) brings us closer to the visual design of our Web site's pages by approaching the layout aspect of design. We should continue to focus on information architecture at this phase, however, and keep the users' needs in mind.
One thing to remember about the user experience is that humans in general greet new information by comparing it to established information. For example, if you say scientists discovered a huge, never-before-seen dinosaur-like lizard in South America, I'm going to imagine any number of dinosaurs that I am already familiar with. If I've visited J. Crew's Web site a hundred times, when I go to The Gap's Web site for the first time, I'm going to try to base my interactions with The Gap's Web site on my past experiences at the J. Crew site. Here're some popular clothing site Home Pages one-by-one:
The Gap: gap.com
Eddie Bauer: eddiebauer.com
J. Crew: jcrew.com
Old Navy: oldnavy.com
They all look different (though The Gap's site and Eddie Bauer's site are so similar it'd be easy to forget which you were looking at, if not for the logo), but retain the same basic layout conventions. Even though Old Navy's site has the most significantly different visual "feel" because it uses less white, graphical "buttons", and is far less aesthetically minimalistic, it's really J. Crew's site that is the most unusual in it's layout (it offers immediate and somewhat redundant secondary navigation on the left, and spends far more screen real estate on its front page models).
Web site designers that understand how user's approach and try to use a new Web site will often take advantage of Web page conventions. Using the clothing store as an example, it's easy to look at a handful of clothing Web sites and recognize layout conventions. Here're those clothing sites again, this time looking at tertiary pages (Home > Mens > Pants):
Not only should you notice how the secondary and tertiary pages differ from the home pages, you should also recognize common elements that can be classified as conventions for clothing store Web sites. Before I tell you the ones I've noticed, how many can you spot? Based on these four Web site examples, try making a quick list of clothing store Web site conventions:
Here's what I came up with:
There are more than this. Yeah, some of these that I've listed aren't visible in the examples listed above, but are verifiable if you hit their real Web sites.
On the one hand, use of such conventions carry the threat of making Web sites seem cookie-cutter. On the other hand, good design on the surface plane will ensure individual identity regardless of the skeleton plane. The real power of conventions is that they allow users to very quickly navigate and use your site without thinking about it.
So as you go into wireframing your organization's Web site page types, analyze the competition's Web sites. Try to identify layout conventions. Imagine the sites as they'd appear without any graphics, text, etc--i.e. as wireframes. Seriously consider applying any noticable conventions to your site.
It's tempting to say that the only convention some sites use is to ignore all conventions. But, in almost every case, the navigation system at least follows some convention. For instance, navigation systems are uniformly at the top or left of the page content, in a row or column. In some cases they are on the right. Rarely they will be at the bottom, and this is usually in Flash sites or other sites with fixed page sizes. Some artsy sites like to use a circular pattern located around a central object, but this is even more rare.
As you start thinking about composing wireframes for your site's Web page types, consider the following steps:
To help you understand how Web site navigation should be approached, and to reinforce what we've learned already about page layout design, let's read an excerpt from Steve Krug's chapter 6 in Don't Make Me Think, Street Signs and Breadcrumbs.