free web hosting | free hosting | Business Hosting Services | Free Website Submission | shopping cart | php hosting
Digicom Online Classroom Banner Design Tips Title

A Simple Design Mnemonic: Remembering the acronym CARP can make your Web page sparkle!
  • C means Contrast. It is very important to remember that the purpose of a Web page is its content, not its background. Yes colors are nice, yes pictures are pretty, but make the wrong choice behind your text, and the message gets lost. Use the Weight Watcher's Principle when picking a background color, "Keep it light!" For more on background, read Better Boring Than Bad.
  • A means Alignment. The best designers make it easy for the Web page user to read and use the page. The well-designed page reads smoothly from top to bottom. The reader's eyes are not forced needlessly from side-to-side or at random pockets of text scattered about the page. A good page is neither unnecessarily wide (forcing sideways scrolling) nor excessively long. Pick an alignment and stay with it. Picking the correct width for your page assures that every browser will see it without scrolling sideways. I suggest that you keep the width at 640 pixels wide. Another benefit to this width equals the width of a sheet of paper so your printout doesn't get cut off laterally. For more on page width and heighth, read It's Always Something.
  • R means Repetition. Consistency is a must. Use the same fonts throughout, the same background and text colors throughout, and a unifying logo on all your pages. Not only is this easier on the eye, it helps "brand" your site and tells the user that he is still on your site. For more on branding read Good Page, Bad Page.
  • P means Proximity. White space is nice, but huge gaps between text blocks, or captions too far removed from the pictures they describe, are elements of weak design. Keep your page elements tight! Tables are a definite aid to keeping items in place on a Web page. For more about tables, check out Flexible Page Layout Using Tables.
(For more about CARP and other design issues, check out Robin William's books The Non-Designer's Web Book for Web pages and The Non-Designer's Design Book for print.
Additional Considerations
  • Be sure to choose colors from a Web-safe palette. Web browsers use RBG color and there are only 216 shades that work correctly on all browsers. Visibone gives you the RGB color code for safe colors (just click a color and you will get the color code numbers for that choice.
  • Keep your font choices to a minimum. Pick one that is easy to read and stick with it throughout your site. The Web does not handle fonts the same way print media does. San serif fonts are better for body text; good choices include Arial, Times New Roman, New York, Courier, and Helvetica. Computers have different fonts installed, and browsers handle fonts differently, so it is best to stick with fonts like these that are commonly installed on most computers. Also, browsers handle text differently. Explorer generally will display text larger than Netscape. Check your page in as many browser variations as possible to help you reach a design compromise you can live with. Monitors also are set a different screen resolutions from 640 X 480 to as high as 1152 X 768, so it is a good idea to view your page at different screen resolutions. If you want a fancy font in a large size, it is best to create it as a Photoshop graphic file. That way it will be treated the same by all browsers. For addtional information of using fonts on Web pages check Corel Designer.com and Dmitry Kirsanov's Design Lab.
  • Avoid using background music on your Web pages. It slows page downloads and is annoying to those who frequently visit your site.
  • Avoid over-animating a site. Animations are fun, but they do slow page downloads, and like background music, they can become annoying to someone who visits your site frequently. Unless you plan on changing the animation on a regular basis, and if it doesn't serve a specific informational purpose, it might be best to leave it out.
  • Try to keep a Web page's total file size to 65K or less.

Font Examples (Notice that even though they are all size 3, they don't appear to be the same size.)
This is a sample of Arial This is a sample of Times New Roman This sample is Courier New
This is a sample of New York This is a sample of Helvetica This is a sample of Geneva

Exercises (Objectives and Assignment)

Here are two sample pages for you to evaluate. Look at each page and measure it against the principles of CARP. Describe in writing what is wrong with each. Then select one and redo it. The media necessary is in the classroom server folder as Media1 & Media2.


Related Links

CoolArchives.com A source for fonts and graphics.

Coolhomepages.com A great site for ideas and examples.

Three Rivers Free-Net A chart of good/bad page qualities with example links.

Web Pags That Suck.com Don't let the name put you off; this is the recoginzed authority in bad design and how to avoid it. Many tips and examples.