Design Basics

Web design may have had its roots in traditional paper design, but online design is different. One of the biggest differences when designing for online is the capability to hyperlink. Adding hyperlinks in your Web pages gives you the capability to quickly direct your viewers to the information you want them to see, including reference material on, or off, your Web site. Unfortunately, the capability to link also is one of the biggest disadvantages to online design. Occasionally, viewers get so caught up in clicking on all those "for additional information click here" links that they forget what they were looking for in the first place; in effect, they get lost in cyberspace.

Web site designers have a number of design elements available to help them make it easy for their users to recognize which Web pages are part of the same Web site. These elements can also help set the mood for their Web site. The layout, images, navigation buttons, bullets, lines, colors, and even the fonts you choose should support the overall design theme of your site. In the following sections, you'll learn how each of these elements works together.

To design an effective Web page, you'll need to be aware of the differences in moving from traditional design to online design. Table 13.1 summarizes some of the differences. Knowing the problems you'll face is only half the battle; the rest is knowing how to avoid them. You'll learn that in the sections that follow.

Table 13.1. Paper Design Versus Online Design

Paper Design	Online Design
Viewers follow content along a linear path with a beginning, middle, and an end.	Using search tools or hyperlinks, viewers can access the content at any point. The only way for you to control that movement is to provide hyperlinks and navigation.
Viewers can see an entire page (text and graphics) at the same time.	With larger graphics (or non-graphical browsers), viewers often have time to read the entire text before they ever see any images.
Serif fonts (such as Times Roman) usually are used for content; sans-serif fonts (such as Arial) usually are used for headings.	Sans-serif fonts usually are used for content; serif fonts usually are used for headings.
Viewers see an entire page (or multiple pages in a book or magazine layout). The size of the page, and the amount of content presented on it, are controlled by you, the author.	Viewers see only the amount of content that will fit on their monitor at one time, which often is only a couple of paragraphs of text. The viewer controls the presentation of the content with the size of their monitor and the browser settings.

Two whole fields of study, Information Design and Usability, are devoted to finding the most effective methods of communicating your message. Researchers in these fields have come up with some standard design guidelines that can help you make the most of the material you have to present. Following are some facts I'll bet you didn't know:

• Red, yellow, orange, and green are the most difficult colors of text to read online. It's best not to use them or to use them sparingly. You'll learn more about colors and fonts in the subsequent sections.

• Your visitors read almost 50% slower online than on paper. You can counter that by keeping your page length short (no more than two to three screen lengths) and providing tables and bulleted lists to give their eyes a rest from large blocks of text.

• Animated images and moving text catch the eye of potential visitors, but most people find them annoying if they continue to move while the visitor is trying to read or search for content on the page. You'll learn about these features in Lesson 14, "Creating Active Web Pages."

• If your visitors are looking for a particular piece of information, they will search your site for less than a minute before moving on to some other site, unless they are confident that you have the information they are looking for. A well-designed Web site will help your visitors find their information quickly. You'll learn how to do this in the "Layout, Content, and Navigation" section.