Web Site Look and Feel: Documentation

There are no hard-and-fast rules for site "look and feel", only very strong opinions. However, whatever guidelines you finally decide to adopt, whether restrictive or liberal, local or site-wide, you should clearly document:

  • What style you expect web page creators to follow in order to maintain the look of the site.
  • What you did to create the elements of the site so that others can recreate your work, if necessary.

Style Documentation

This would ideally include:

1. A rudimentary template of the essential elements of each page--headers, text, navigation bar, banner, etc. This could look like:

U.C. banner: UClogo.gif with link to www.berkeley.edu, or at least a text link
Department banner: polisci.gif with link to www.polisci.edu
Navigation bar/menu: can be text, buttons, or image map, but whatever it is, it should be consistent throughout the site (note: front page can be different)
Content/Style: up to department
Name of person responsible for site: preferably with e-mail address too
Date last modified:
optional, but recommended

2. A detailed description of the style of each of the page elements.  This could look like:

Headers: Verdana,Arial,Helvetica,sans
Text: Palatino,Times,serif
Margins: pages should be designed to fit in a 640-pixel-wide screen. You can put all the text in a 1-row, 1-column text box set to be 640 pixels wide or less.
Navigation bar: at top and bottom of each page, in Arial, Helvetica, sans

3. An accessible repository of graphics used in the site. It's a sure bet that at some point, at least one of the images will need to be edited. Whenever possible, copies of the original working files should be saved in their original formats (Photoshop, Illustrator, etc.) This is because when a file is saved as a GIF or JPEG, it is compressed and cannot be easily modified.

If you used text in your graphics, be sure to record what fonts you used and in what point size. Make sure that it's a font that others will be able to get hold of easily! Imagine having to add a button to your navigation bar and discovering that the type doesn't match.

Reference

  1. Section on Consistency in the Yale C/AIM Web Style Guide
  2. Teaching With the Web, a presentation from the University of Georgia
  3. Style Guidelines for WWW Documents at the University of Greenwich
  4. Southern Louisiana University Policy for Official University WWW Publishing


Back to Web Site Look and Feel Page
email kjfalk@sims.berkeley.edu