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:
- Timeliness, or content focus
- 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.”
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:
Navigation for one-of-a-kind sites
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
- Keep the user oriented: Display the previous location and guide users to their next one.
- Remind users where they’ve been by using breadcrumb navigation and other visual cues.
- Give users an easy exit from each major section of the site and an easy return to their starting point.
- Clearly indicate each link’s destination.
- Keep navigation structures and nomenclature visible, rather than hiding them until the user has triggered an event such as a mouse over.
- Make sure your buttons have well-defined hit areas.
Design for consistency
- Consistency in user interface improves site performance
- Reuse architecture elements, design elements and naming conventions
- Puts emphasis on your message
- Eases site construction and maintenance