5.2: First page sets the tone

The first page of your Web site introduces the reader to your site.It establishes the site’s personality through color, architecture, typography and images, and it determines the navigation structure for the rest of the site.

The Web Style Guide lists four primary elements of the home page:

  1. Identity
  2. Navigation
  3. Timeliness, or content focus
  4. Tools (search, directories)

“Good home page designs always blend these four factors,” they write.

The authors of The Web Style Guide urge you to begin designing your site with a template for the internal pages. This is because the internal-page template will be used many, many times, while the first page is unique. The first page arises from the navigational necessities discovered in designing the internal page.

The informational site that you will build for this class may require several types of internal pages. If your information lends itself to division into sections, each section will require its own “first page.”

The War, home page

FIGURE 1: Public Broadcasting’s Web page that accompanies the Ken Burns series The War demonstrates how the first page sets the visual tone and presents the navigational structure for the whole site. Note the multiple layers of navigation.

The first page must be attractive, but do not set out to design the pure splash page. These consist of little more than an image, and they require a click-through to reach the real content. The authors of The Web Style Guide write:

The two most useless words on the web are “Skip intro.” For the vast majority of users, graphic or animated splash screens are an annoying extra mouse click on the way to real content. Splash pages are not accessible in any meaningful way, and if they depend on JavaScript, ActionScript, or other scripting to move the user to the real home page, most web search engine spiders will never get past your splash page, effectively preventing your highest-traffic page from contributing to your search rankings. Don’t ever use an indulgent, functionally useless splash page as “eye candy” at the entrance to your site. Ever.

Navigation for one-of-a-kind sites

The War, second-level page

FIGURE 2: A second-level page from the PBS website. The large graphics for each section from the home page collapse into the navigation bar, and an additional level of navigation is introduced.

The sites for this class will be one-of-a-kind informational sites. We will explore one of these, the site accompanying Ken Burns’ series on World War II. This site is exciting visually while maintaining a high sense of order and functionality through its navigation.

Look at the first page of the site above (Figure 1). The large graphic provides a visual zinger that attracts attention and sets the tone. The picture of the soldier looking directly at the camera tells us that the stories told here will be deeply personal. This image also addresses timeliness through recognizable visual cues and the focus of the site.

The large text sets the typographical tone as well. It uses a traditional newspaper-style serif font, and it also introduces a splash of color. The home page presents the credits that tell the who, and it includes a paragraph that tells the mission of the site.

The smaller graphics introduce visual grabbers for secondary pages.

All of these visual cues collapse into the header for inside pages (Figure 2).

Provide logical navigation and interactivity

Design for consistency