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.

Every Web site's got colors -- except maybe one for old-time photography. And why not? Unlike print, colors on the Web don't cost any more than black and white. The temptation is to use all the colors. This, however, is a bad idea. Your challenge as a Web site designer is to use colors wisely to create a Web site that conveys the appropriate mood without going overboard.

Develop Your Color Scheme

One of the first steps in Web site design is to determine the color scheme you're going to use. You don't have to decide right away which colors you're going to use where in your page layout, but knowing which colors you're going to use before you get too far along in your project will save you lots of headaches later.

The Color Wheel

You may remember the color wheel from art class or elsewhere. However, the color wheel is poorly understood by most people. Just so we're all on the same page, let's review the basics. Review the color wheel shown in Figure 2-2.

Figure 2-2: The color wheel.

Colors that go well together are:

• Complementary colors: Colors on opposite sides of the color wheel
• Triad or tertiary colors: Three colors that are equidistant from each other on the color wheel
• Analogous colors: Colors that are next to each other on the color wheel

Clearly, there are a lot of options here, and the colors that you select are largely based on your own subjectivity. The key is to pick something that looks good and is appropriate for your Web site.

Two of One, Several of the Other

Your color scheme should, in most cases, consist of two main colors, plus one or more second-level colors. This is not as complicated as it may sound. See Figure 2-3 for an example.

Figure 2-3: A sample color scheme.

Enlarge image

WindPower Sports uses a simple color scheme for its Web site. You can see the two main colors are blue and gray. The Web designer used blue for the company name and navigation links, with a darker blue for the category headers. Gray is used as a background color to show off the blue. Two secondary colors, red and yellow, emphasize important information such as the tag line and phone number.

Tools to Help You

A graphic designer can often help you to determine which colors work well together. When a graphic designer isn't available, you can use a handy online tool that generates color schemes automatically.

The Color Schemer Online, shown in Figure 2-4, provides color schemes based on a chosen color. The company also sells a software version that provides more functionality.

Figure 2-4: Color Schemer Online can help you develop your color scheme.

Enlarge image

So, What Works for My Site?

As mentioned previously, your color scheme should be appropriate for the type of site you're developing. Here are some guidelines to start your thought process:

• Sites for children (or child-related topics, like toys) typically use bright primary and secondary colors such as red, green, yellow, and blue.
• Professional and corporate sites tend to use more subdued shades of blue or green (such as navy blue or forest green), along with grays, tans, and beiges.
• Online store color schemes are all over the map and often relate to what they sell. For example, bath and beauty products can be presented in shades of pink and beige, or forest green and white. Clothes stores can be a bit bolder, using a bright navy blue or crimson red along with tan or gray.

Of course, all these color schemes should use plenty of soothing white or light gray, particularly for text-filled areas. Bold background colors often appear amateurish and distract from the intent of most Web sites. In the next section, find out how to use fonts to match the professional appearance of your colors.

The tasteful use of fonts on a Web site conveys a professional image, whereas wacky and tacky font usage does quite the opposite. Depending on the type of site you're creating, you'll want to go one way or the other. But, in most cases, tastefulness is what you'll be looking for.

One Serif, One Sans-Serif

An oft-cited rule is to use one serif font and one sans-serif font in graphic design. There may be good reason to break this rule sometimes on the Web, but it's nonetheless a good place to start.

First, you need to know the difference between serif and sans-serif. If you've used a word processor in the last 10 years, you've seen them both, but maybe without knowing it:

• A serif font has small decorative lines on each letter, and looks somewhat old-fashioned. Serif fonts are typically used for newspaper stories and novels. Times New Roman and Georgia are serif fonts. Serif fonts lead the eye from letter to letter, word to word, and are best used as paragraph text.
• A sans-serif font doesn't have serifs (for those of you spared the joys of learning French, note that sans means without) and creates a somewhat more modern look. Examples include Arial, Helvetica, and Verdana.

Sans-serif fonts are best used for short phrases or groups of text, such as headers or links. Serif fonts tend to be used for paragraphs. Figure 2-5 gives an example of how this would look on a Web page.

Figure 2-5: Example of serif and sans-serif fonts on a Web site.

As is typical on the Web, you can break the rules a little bit. Using Arial for both headers and text would be fine as long as the headers are sufficiently larger than the text (to clearly differentiate them). It might not be as visually interesting as mixing it up a bit more, though.

When You Need a Third Style

On the Web, there are page elements other than just headers and text, such as site navigation, sidebars, and/or pop-up windows. You want to use another font, or at least another style, to differentiate these areas from the rest of the page.

How to do this is partly a judgment call, but a good rule to remember is, if you're going to make it different, be sure to make it significantly different rather than slightly different. For example, if you're creating a sidebar for the style in Figure 2-5, you could make it Arial, but bold and green.

You can also differentiate special areas from the rest of the page using background colors.

Size Matters

Another case in which to keep the make-it-significantly-different rule in mind is when creating various levels of headers. Your second-level header should be sufficiently smaller than your top-level header so users can notice the difference. When deciding on heading sizes, view your page in several different browsers to see whether it works.

Now you know how to use colors and fonts on your Web site. The next step is to add images to enhance your message. Pick up some tips for using images wisely on your Web site in the next section.

Unless your site is purely technical, with no commercial or personal interest (the W3C Web site, for example), you want to use images to make it visually interesting. Images can help convey moods and ideas not easily described in words. They can also help users understand how to use the site.

Convey Ideas with Images

Say you own a miniature golf course, and you'd like to create a promotional Web site that encourages families to come out and play a round at your course. A good image to use might be one of a family playing miniature golf, laughing, and having a good time. This image conveys the feeling of fun and family bonding, without you actually putting the words "Fun and Family Bonding!" on the site.

Selecting an image to convey a feeling can be as straightforward as putting a big, juicy-looking orange on an orange juice Web site. Despite the fact that any visitor would already know that the site was about orange juice, the image of the big, juicy orange is a more positive and emotional way of getting the user engaged in the site. Putting the words "Yummy Orange Juice" in huge text across the homepage just wouldn't have the same effect.

On the other hand, some sites call for more subtle use of images to convey a feeling. For instance, many Web sites for funeral homes feature photographs or sketches of the funeral home or its employees. Both convey a feeling of reassurance to the potential customer. The funeral homes look invariably spotless, and the employees invariably respectful and professional.

Helping Users Get Around with Images

Images are often used on Web sites to help users figure out what to do. For instance, a picture of a pencil could indicate that a user can write to the Webmaster by clicking there. Or an image of a cloud with the sun peeking out might indicate that weather information is available by clicking. One of the most ubiquitous images is a question mark, where a user can click for help.

Such images, called icons, are often used together with text to guide users. For example, if you visit any of the numerous travel sites, such as Expedia, shown in Figure 2-6, you might see an image of an airplane and the word flights to let the user know this is a link to the Flights section of the site. Both visual and literal people are served by using both.

Figure 2-6: Icons help visitors visually identify links and information.

Enlarge image

Children's sites often use simply images as a navigation tool, partly because small children may not be good readers, and also because children enjoy more colorful media. Take a look at the instructions for a game on SesameStreet.com in Figure 2-7. The instructions for the visitor consist primarily of images.

Figure 2-7: SesameStreet.com uses images to help kids use the site.

Enlarge image

Images convey a lot of information about a site and should be chosen carefully. There are a seemingly infinite number of images to choose from, so the next step is to cull through them to find images that best suit your needs.

One of the trickier tasks in Web site development is collecting appropriate images to use on your Web site. Assuming you don't have a big graphics budget, you'll be doing some scrounging to come up with good material.

Don't steal images. Ah, there are so many sites out there with so many beautiful images. But they're not there for the picking. Although it's simple to download an image from someone else's Web site, you shouldn't do it, at least not for use on your own Web site.

There are three main sources of images:

• Copyrighted images you can get for free
• Copyrighted images you must buy
• Images that you create and own the copyright to

First, we'll explain a bit about copyrights. When you create something, you own it. No one else can use it unless they obtain permission to use it, or purchase rights to the item from you. Even though a site might not contain a copyright notice, assume that everything used on someone else's site is copyrighted. Whoever owns the site always owns all the words and all the images on the site (unless they stole the images -- or the text -- from someone else). This means that you risk legal problems, and sleepless nights, if you copy any part of the site.

Freebies

So what can you do if you're a terrible artist but you still want to jazz up your site with pretty pictures?

Most word processors, desktop publishing software, and image processing software applications come with a wide variety of free images. In Microsoft Word, for example, click Insert > Picture > Clip Art. Use the Microsoft Clip Art Organizer, shown in Figure 2-8, to organize all the clip art, pictures, sounds, and videos on your computer into one collection for easy viewing and selecting.

Figure 2-8: Clip Art Organizer helps you organize pictures and media files.

Enlarge image

Royalty-Free Artwork

Another option is to use royalty-free artwork. A royalty is the fee you pay the owner of a copyright to use the copyrighted item, each time you use it. Royalty-free means that instead of having to pay a fee each time you use the image, you can pay a flat fee once, and be able to use the image repeatedly. There are two ways to get images royalty-free:

• You can purchase CD-ROMs that contain thousands of royalty-free images. Check out your local, large office supply stores to see what's available. Be sure to check for legal notices on those CDs. There may be limits on what you can use the image for -- for example, use may be limited to schools and non-profit organizations.
• There are a bunch of places on the Web to download royalty-free art, for a fee. One of the best values is iStockphoto. You should also visit the GettyImages, Corbis, and Clipart.com Web sites. Or you can google royalty free art, copyright free art, or simply free art.

No matter where you buy get your artwork and images, make sure you read the fine print and the restrictions on use. Most royalty free work is available for use on a public Web site but sometimes they restrict use on business or e-commerce sites.

To Clip Art or Not to Clip Art

Clip art is a mixed blessing. You'll find lots of it on the Web or on inexpensive CDs, and you'll probably find images that express the idea you want to get across with your Web site. The trouble is that clip art images are simple line drawings, and as such they don't always convey the professional message a site designer needs.

When considering clip art, look at a lot of it before you make a choice. Pick the best images that express the ideas you want, and be careful not to overuse clip art, or any kind of graphics, on your site. Discretion in the use of graphics prevents your page from looking cluttered.

Why Use Photographs Rather than Clip Art?

Although a great deal of the royalty-free images available on the Web consists of clip art, there are also many photographs and other high-quality images on the Web, particularly through iStockphotos, GettyImages, and Corbis. Because photographs usually look better than clip art, it's worth considering these images for your Web pages.

On the downside, photos almost always require more disk space than clip art images do. This means that pages containing photographs usually take longer to download than pages with clip art -- especially if you use multiple photos on a page. That's not a fatal problem by any means, because more people are switching to broadband, which means download times are less of an issue. You can easily compress photographic images (and clip art, too). You'll learn about these techniques in Lesson 3.

If you've got a camera and a good eye, you can forgo searching for images altogether. In the next section, you'll learn how to create your own images.

Freebies aside, there's nothing quite like custom-made graphics. That's where a graphic designer comes in. Designers can advise you about the best look for your site as a whole, and can create the kind of images for you that enhance its appearance significantly. Of course, you have to pay for their services, but sometimes it's really worth it.

If you have a bit of talent, you might want to take a course in digital design and learn how to think like a designer when approaching your Web site. You also learn how to use software tools that can help you create your own artwork.

Photography with Digital Cameras

The advent of digital cameras has made taking and uploading pictures to the Web rather simple. These days, most digital cameras take great pictures and come with software that makes transferring the photos to your desktop a piece of cake.

Many graphics applications include a nifty tool that allows you to import digital camera images directly into the program via a plug-in. A plug-in (in a graphics application) is software that enables you to manipulate a specific camera or scanner within the application. In some cases, plug-ins are bundled with the application. In other cases, you need to install a plug-in for the camera or scanner you're working with. That software comes with the camera or scanner, which also includes instructions for installing it.

When using a digital camera, take the pictures at the highest resolution you can. This will give you more flexibility when working with your images later.

Film Cameras Work, Too

If you don't have a digital camera, just how can you get your photographs into your computer? You can still use your regular camera. Take the pictures, but instead of getting paper prints, get your pictures saved to CD-ROM.

Kodak pioneered the concept of processing photographs to a CD-ROM, and this service is available at most photo counters. It's also available on the Web through such services as Shutterfly and Snapfish .

These services also publish your photos directly to the Web, usually at little or no cost above film processing. You send them your film and get hard copy photos and a downloadable file of the film roll online. Once you're notified that your photos are available online, all you have to do is surf to the site, view your images, and then download them to your computer.

Drawing on the Computer

If you have very good mouse-hand-screen-eye coordination, or have an electronic drawing pad, you might want to try drawing your own art on your computer. Microsoft Office comes with Paint, a basic drawing program that saves images in a variety of formats.

See Lesson 3 for more information on Web-ready file formats.

More sophisticated drawing programs include Adobe® Illustrator and CorelDRAW® . These programs require an investment of cold, hard cash, but it's worth it if you're interested in creating your own graphics. Download trial versions to compare the programs and pick the one that best suits you.

No matter where you decide to go for graphics for your Web site, the most important factor of all is that they add value to the site, not detract from what you're trying to accomplish. Not only do you want your site to be clear and professional looking, you want it to be easy to navigate and use. In the next section, you'll learn about usability and accessibility, and how to make your site meets these ideals.

In the last few years, the concepts of usability and accessibility have become ever more important to Web design. To make your site friendly to everyone who visits, it's important to keep both of these concepts in mind, and put them into practice as much as possible.

Usability

Usability is the technique of making something (in this case, a Web site) as easy to use as possible, so visitors can accomplish what they want in as little time as possible. There are a vast number of techniques to achieve usability, and we'll go over the basics here.

Don't Get Clever

Marketing people may get miffed when we say this, but overly clever names for the sections and links on your Web site are not a good idea Whenever possible, use terms that reflect what the user will experience or is looking for. Instead of saying "Vision," use a phrase such as "What We Do."

Using Color as a Guide

If you're building a large site with many sections, consider color-coding the sections. Color-coding helps visitors stay aware of where they are on the site and alerts them if they inadvertently switch to another section.

Don't Be Afraid to Use White

Make your text easy to read by sticking to black text on a white background as much as possible. Sometimes, to set a section apart from the rest of the Web page, you'll want to use a light background color. That's okay, as long as it's light enough to still be readable. White text on a black background is also fairly easily read.

Do Your Homework

It pays to find out more about usability. Check out the following Web sites to solidify your knowledge:

• Usability.gov
• Usability First
• Useable Web

A lot of sites are dedicated to this theme -- use your favorite search engine to find more.

Accessibility

Accessibility is the practice of making your Web site as usable as possible for people with disabilities. There are quite a few tools available these days to help people with disabilities use the Web. Just a few tricks will make your site much friendlier to these tools.

Alt-Text, Alt-Text, Alt-Text

Every image you use on the Web has the option of showing alternate text, or alt-text. This was originally developed because in the olden days some browsers could not display images, and some people set their browsers to not load images to save download time. Nowadays, there are Web navigation tools for vision-impaired people that actually read the contents of your site to the user. If there is no alternate text for your images, these visitors will have no idea what the image is. Even worse, if you're using images for your navigation buttons, the user won't be able to navigate the site without alternate text. It's quick and painless, so be sure to include it.

Avoid Image maps

Image maps are images where certain parts of the image are clickable and linked to other parts of the Web site. These are difficult for accessibility tools to interpret, so it's best to avoid them. If they must be used, be sure to include the same links as regular text links on the same Web page.

Learn More

A quick search on the Web leads you to a wealth of resources on Web site accessibility. You can also check out these Web sites for more information:

• Section 508
• Web Accessibility Initiative
• Dive Into Accessibility

Be sure to read up on this subject before you get too deep into your Web site construction. If you plan for an accessible site from the beginning, you'll save yourself a lot of trouble down the road.

Next Up

You've learned how to use colors, fonts, and image to create a great Web site design, and now it's time to put your ideas and design together to actually create your first Web site. First, though, try your hand at the quiz and assignment to make sure it all sank in. And don't forget to visit the Message Board to swap Web design ideas with your classmates and instructor.