Global Schoolhouse Home Home Base: Harnessing the Power of the WebIntro to NetPBL: Collaborative Project-Based LearningBuilding Collaborative Student Web ProjectsGuide to Conducting Research on the InternetLibrary of References, Readings and ResourcesTable of Contents
Building a
Web Project
Site design
Project site
Web development resources
Web design
Write for the Web
Balance content & presentation
Copyright issues
Further reading
1. Naming conventions
2. Color and Graphics
3. Relative Links
4. Finding a Web Host
5. Keep it Simple

2. Color and Graphics

Color as design tool

Color is an extremely powerful tool for Web designers. It can make or break an entire site. And, the best guide for determining which color to use is your instinct. The problem is, no two people react to color in exactly the same way. So although your instinct is saying "BLUE", you might have a teammate that is shouting "RED.

Cultural biases are another issue to take into consideration. If your team is ethcnically diverse, or includes team members in distant locations, you may confront how different cultures perceive color in different ways. The best way to address these issues is to agree as a team from the early stages of development what color choices will work best for everyone.

Brainstorm with your team what kind of Web site you want to create. Do you want it to be bright and vibrant? Do you want to invoke mystery? Maybe you're looking for a style that represents technology. Once you've agreed on the style of the site, create your own color palette that best supports that style.

But, you should remember that there are only 216 browser-safe colors to choose from. For one of the best introductions to Web color visit Lynda Weinman's browser-safe color palette Live Internet Connection Required.

Color as navigation tool

Color can also be a very effective tool for navigation. The key is to keep color in navigation simple, elegant and consistent:

  • Make sure the colors for links and visited links are the same throughout the entire site.
  • Navigational text links should remain the same color.
  • If your site has a number of different sections, you can assign a certain color to each section to help provide a point of reference for the audience.

Graphic size and style

You've probably already discovered the importance of keeping your design consistent, but have you given much thought to keeping the size of your graphics consistent?

This is especially important if you are aligning graphics for a navigation bar. A few pixels difference can change the layout of your entire page. The following includes some important tips for consistent graphics size:

  • Make sure to save navigation graphics with the same dimensions.
  • Headers and subheaders should be consistent throughout the entire site.
  • If you're using tables for layout, make sure that the table dimensions are the same for each page.

Optimize Graphics

When you do use graphics on your Web page, make sure that they will be worth your reader's time to download them, especially since most of your readers will probably be using slower connections. (Also, check out The Yale Style Manual for useful guidance to using graphics.)

Re-use graphics
Once a graphic or icon has been loaded, it can be re-used without slowing access down. Therefore, re-use as many graphics as possible, rather than having new ones on every page.

Use text, small icons, or thumbnails
as stand-ins for larger graphics. To speed downloading of your page, all of your major images should be small in-line thumbnails, icons, or even just text which permit the visitor to download the large graphic if they want to. If your images are large, indicate their size so that readers can decide if they have enough bandwidth to warrant downloading the image.

Thumbnails are smaller versions of a larger image. Many image processing programs have the ability to save an image in a reduced size that takes up much less memory. This in effects lets you create your own custom icons to give the reader a smaller version of what you want to show them.

Use captions
Pictures in other media almost always have captions. Use descriptive captions with every picture.

Use ALT= labels
People without graphics-capable browsers or visually impaired readers (who can't see your graphics) will rely on your use of ALT= labels to give them an idea of what they are missing:
<IMG SRC="mountain.gif" ALT="mountain">

Page 1: Naming conventions
Page 2: Color and Graphics
Page 3: Relative Links
Page 4: Finding a Web Host
Page 5: Keep it Simple

Previous Page     Next Page

  Global SchoolNet Foundation    copyright 1996-2004     All Rights Reserved    Last Update: 02-Dec-2003