I like to think of the structure and design of Web pages within a site through a metaphor of military uniforms. Web pages wear a specific uniform that identifies them as part of a particular army (the Web site), and perhaps distinguishing them from their fellow soldiers by the use of patches, medals, insignia, hats, etc. Sometimes they need only a minor distinction (e.g. all privates have the exact same uniform, but each has their own individual name clearly set on the front), sometimes they need a noticeable distinction (a general, for instance, may have the same basic uniform, but would be recognizeably offset from the lower eschalon officers and soldiers).
The home page and the basic content page are 2 primary Web page types found in any given Web site. Web page designs within a single Web site are usually limited to 1 or 2 different designs used repeatedly throughout the site: 1 design for the home page, and an alteration of that design for the content pages. In many cases, primary, secondary, and tertiary pages share the same basic page design with all other content pages.
Other Web sites use just one design for both the home page and the content pages. This is excellent when the site's structure and content allows such consistent design.
The advantage of the lack of variation in all Web site designs is obvious: consistency. The more consistent and predictable a page's design and layout is, the easier it is to identify and use. So we are well-advised to limit our creativity of design so as not to be completely inconsistent across different pages. If we do distinguish pages in terms of design and layout, we shouldn't go beyond having slight and justifiable variations. Variations between the home page and the content pages can be more considerable, but should still maintain a series of consistencies
One very convincing reason for variation between the home page and content pages is in the pages' purpose: A content page is usually meant to convey a considerable amount of information, and typically are more than 1 screen long (requiring some scrolling); A home page is usually meant to convey only information that is absolutely critical for users to accomplish their task(s), and typically is not more than 1 screen long (requiring no scrolling). To this end two layout designs may be appropriate.
We may also have some variations in our content pages to identify types as necessary for primary, secondary, or tertiary pages. Again, such variations should be slight and justifiable. At the very least, site navigation should remain consistent.
Let's look at an example in the American Council on Rural Special Education (ACRES) Web site. This site's generally clean and simple design helps quickly illustrate some concepts:
The ACRES home page features a large front-page image and two "news" sections along with the primary navigation system.
The home page has a distinct visual element to catch the attention of the users. Home page designers often like to indulge in this sort of visual strategy, especially when there is little or no other content to put up front. The downside of this strategy is that the image on the front page does not communicate any high-priority information and takes up a good amount of useful screen real estate. One upside of using such a large image on the home page is that it serves to separate the home page's very important informational items, and keeps users from being overwhelmed with information, similar to white space. In my opinion, a large image on the home page is much preferable to "happy talk".
In this example the home page also offers important and possibly changing information--news (1), conference info (2), contact info (3)-- on the home page, making it easy for users to get what they need quickly. Links in the primary navigation section (4) are prominently placed and easy to understand. Many pages list technical information (5) at the bottom of the page. Often this is unnecessary, but in this case the specific audience of users will be interested in the Bobby/508 compliance.
Once a user has clicked on a primary navigation link, s/he is taken to a content page:
A primary content page in the ACRES Web site.
The design here echoes the primary page, but you'll notice a distinct change in the placement of the navigation section. On this site, the reasoning could have been that on the home page the primary links need to be more prominent; therefore, the primary navigation section is larger on the left. On the primary pages, the screen real estate needed to be conserved; therefore the primary navigation section is moved to the top, and is smaller.
In a redesign, I think this site might benefit from a more consistent placement of the navigation system, but let's not get into that right now; as it stands, we should notice that, fortunately, the designer has preserved the same colors in the primary navigation system on both the home page and content pages, making it easier for users to identify the navigation links.
It is important to notice how much space has been appropriated for information--this is a good thing. The use of white space and layout techniques on this site is nice and simplem and headers and other identifiers clearly tell the user where they are and what they are looking at.
As we look at the other primary pages you'll notice that the design and layout is appropriately consistent. Each page is clearly identified with a header, and the header matches the text of the hyperlinks in the navigation system.
Primary pages in the ACRES Web site.
The one thing that does change from primary page to primary page is the use of a secondary page navigation system. In this site it's consistently placed, and takes users deeper into the site as organized by primary topic.
A secondary navigation system in the ACRES Web site.
If one clicks on any of the secondary links within the secondary navigation system, one will notice that the secondary link navigation section stays in place. Or it may be replaced by a tertiary navigation system, if the site is large and deep enough to need it.
A secondary navigation system in the ACRES Web site.
When planning designing page layouts it is important to describe what will happen in the presence or absence of secondary navigation systems. This could require an additional wire frame.
Of course, the primary navigation system always remains in the same place at the top of the screen.
And one can return to the home page at any time by clicking the ACRES title or logo, both in the top left corner. Using organization logos as a link back to the home page is very common.
While it's imperative that page layout remains consistent across all primary, secondary, and tertiary content pages, one can alter the theme of each page without affecting the layout. Theme could be defined by image usabge or by a color scheme, for example, The Gap's Mens section might have a specific banner at the top of each secondary and tertiary page that indicates its part of the Mens section. It should also, however, include the name of the section prominently at the top of each page.
Using the ACRES web site as another example, here's one idea for implementing a theme: we could assign each primary topic it's own color. Links in the navigation section could be colored to match the theme, and major elements of all secondary and tertiary pages in the primary topic could be colored according to this theme:
Using colors so dramatically may not achieve the results you or your client wishes, but this simple example does illustrate the concept of using themes while maintaining the basic structure and design throughout a Web site.
At any rate, we'll talk more about colors and color schemes in Lesson 5. Suffice it to say that whatever specific colors you pick in the future are really pretty irrelevant at this stage.
return to top