Chapter 2 - Web Site Design Principles

This chapter covers the basic design principles that you will apply to your Web page designs as you work through this book. By examining a variety of Web sites, you will learn to focus on both the user’s needs and the requirements of the content you want to deliver, while planning a site that is easy to navigate and quick to download.

The sample Web pages in this chapter come from a wide range of sites.The Web is so far-reaching in content and design that no collection of pages represents what is typical. Most of the samples illustrate good design principles, although some contain design defects as well. In truth, almost every site has one flaw or another, whether it is confusing accessibility, overambitious design, or poor download time. Judge the samples with a critical eye. Look for elements of design that you can transfer to your own work. As you progress through the book, you will practice and apply these principles to your own Web design efforts.

When you complete this chapter, you will be able to:

• Design for the computer medium
• Create a unified site design
• Design for the user
• Design for the screen
• Design for accessibility

Sample Web Sites

You can use these sites for design comparisons and class projects. The sites appear in the same order as they do in Chapter 2. Some of the Web sites in this list have changed their design since Principles of Web Design 4th Ed. was published.

CSS Example Page (Figures 2-1 and 2-2)
Web MD
World Travel Guide
Center for Disease Control
CDC kid's site - bam.gov
Philadelphia Zoo
World Health Organization
Rough Guides
Google
E! Online
The Atlantic
National Public Radio
BBC News
United Nations
Wikipedia
Sports Illustrated
National Road / Zane Grey Museum

Individual Case Project

Visualize the page design for your site by sketching a number of page layouts for different information levels of the site. For example, sketch the main page, a secondary page, and a content page.You do not have to be concerned with the exact look of the elements, but be prepared to indicate the main components of the pages, such as headings, navigation cues, link sets, text areas, and so on. Start to organize your site. Create a visual diagram that indicates the main page, section pages, content pages, and so on. Indicate the links between the pages. Indicate whether you will provide alternate navigation choices such as a table of contents and site map.

Team Case Project

Work individually to create your view of the page designs for your site. Sketch a number of page layouts for different information levels of the site. For example, sketch the main page, a secondary page, and a content page. You do not have to be concerned with the exact look of the elements, but be prepared to indicate the main components of the pages, such as headings, navigation cues, link sets, text areas, and so on. Next, meet and work as a team to create the page layouts by combining the best ideas from the individual page designs. Organize your site. Create visual diagrams that indicate the main page, section pages, content pages, and so on. Indicate the links between the pages. Indicate whether you will provide alternate navigation choices such as a table of contents and site map.

Top