Now that you've decided what your Web site is about and what content you're going to have on it, you need to figure out how to present this information to visitors. That's where your Web site design comes in. In this lesson, you learn how to lay out a page, pick colors to use in your site design, choose fonts, and find and create images for your site. You'll also learn about Web usability and accessibility. We've got a lot to cover, so let's get started.

Page Layout

When you lay out your Web site, you're creating a framework, or template, that applies to every page of your site. This framework is where you'll place your content. This template should include site navigation, the site's logo, a copyright statement, and any other items that should be on every page of the site. The template should be consistent throughout the site, with the exception of a few cases:

• Homepage: Your homepage template can be somewhat different, because it serves as a gateway to your entire site. However, many designers create the homepage template to be pretty darned similar to the rest of the site, if not exactly the same. If you have good reasons, go ahead and make it different -- but not so different as to be unrecognizable as part of the same site.
• Store pages: If part of your site is a store, you probably want to use a different template for that section. It should be similar in style, but the primary colors might be different, and the navigation options should be mostly limited to store functionality; therefore, users don't accidentally leave the store without buying something. You wouldn't want that, would you?
• Feedback page: If you have a form for submitting site feedback, put it on a page that has fewer navigation options than the other pages of your site. After all, you want users to fill out the form, not be distracted by the other riches your site has to offer.

Remember that every page template needs to represent the "look and feel" you've chosen for your company or endeavor. When a visitor moves around the site, they should feel as if each page is related to the others and come away with the same sense of purpose from every page. If your homepage is designed with subdued monotones, your visitors are going to be uneasy if they suddenly land on a page created in bold primary colors.

Standards Exist for a Reason

Web site design has matured to the point that there are plenty of standards, and it's a pretty good idea to use them. Putting things where visitors expect to see them helps people use your site.

Logo Placement

Web site logos are almost always placed in the top-left corner of the page layout and are usually linked to the homepage. The logo should appear on every page of your site, in the same place. It can, however, be smaller on interior pages than it is on the homepage. By following this rule, you're ensuring your visitors always know they're on your site, and know when they've accidentally moved off the site.

Navigation

Web site navigation is almost always in one of two places, and sometimes both, as shown in Figure 2-1:

• Top navigation: Along the top of the page or just under the page header, consisting of your logo, plus a search box and maybe a spot for banner advertising.
• Left navigation: In a column on the left side of the page. This is usually used for main content navigation.
• Bottom navigation: Along the bottom of the main frame on the page. These links are usually reserved for legal and non-commercial related links, such as the site map and copyright information.

Figure 2-1: Gone with the Wind Kites Online offers top and left navigation links.

Enlarge image

You can put navigation in both locations, but avoid putting the same navigation items in both locations. When possible, use the left navigation for general maneuvering through the Web site and the top navigation for a more personalized experience, such as account and contact information.

Using the content list you generated in Lesson 1, make a note of how you'll link to that content from the homepage. Determine which content can be grouped together and reached from a common link, and then decide which links make sense in the left navigation and which belong at the top. Once you've figured all that out, it's time to move on to choosing colors. In the next section, you'll learn how to make good decisions about which colors are right for your site.