General Info   Cool Tools     Getting Started   Troubleshooting     Design & Promotion   Feedback

Search this site: view site map

Web Design Guidelines

Introduction

These design guidelines will help you create a quality, professional, and well-designed Web site. When first creating Web pages, you may be tempted to try bold or innovative designs. We beg, plead with, implore you: adhere to the design guidelines outlined below!

The take-home message of this checklist of guidelines is:

Content, content, content

The whole purpose of having a Web site is to deliver content. Quality design enhances your content. Poor design gets in the way. If you want to learn more about incorporating more advanced design concepts into your Web site, please visit the sites listed in the References section at the bottom of this page.

Priority One: Can't live without them

1. Use black text on a white background
   If you must use a color stick to pastels. Patterned backgrounds always make text harder to read. Background images can be exciting, but they are an advanced design concept, and can easily be very distracting. Black background pages might not print.

2. Remember the three C's of the Web: content, customers, and consistency
   Content really drives the Web. Make design decisions that improve the presentation of the content. Know your customers. Build community between customers when possible.

3. Put a toolbar on every page
   Use text tool bars to make sure the user can't get lost while navigating your Web site, and get the additional benefit that people who are handicapped or who have images turned off can still navigate your site.

4. Decoration is not design
   Putting cool graphics on a page is not the same as creating a well designed page. Only use graphics that make a contribution to your content, or add to the professional appearance.

5. More whitespace makes a page more elegant and less energetic
   Whitespace in design terms is blank areas of the page. Pages with larger amounts of whitespace are easier to digest, and have a slower more deliberate feel. This is good for first time visitors, but can be frustrating to repeat visitors.

Priority Two: Also vital...

1. Organize your content by creating a site map before you build your site
   Quality content makes a great Web site. Part of that quality is that the content is organized carefully in a way that everyone will understand. Break topics into Web page sized pieces, and link the pieces together in a logical (and simple) manner.

2. Include contextual feedback where possible

3. Underlining is only for hyperlinks

4. Avoid: Frames
   Their utility is dubious at best. They are an advanced design feature. Frames have very serious problems, including an inability of many search engines to index a frame site, and your customers can't bookmark pages within your site. For more information, visit our Problems with Frames page.

5. Create a design that has multiple ways to navigate your site
   

6. Consider the density of your links and toolbars vs. the number of mouse clicks to reach a given page (try for a 2-click rule).
   You want users to be able to quickly get to any page of your site, but be careful not to overwhelm people with a 'wall of text'.

7. Customers should not be surprised by what happens when they click the mouse
   Actively avoid anything mysterious. A good user interface has obvious functionality.

8. Register with search engines
   Add your URL to Yahoo manually, then use the free service at Submit-it or Postmaster to register with 5 or 10 most popular search engines. Be sure to include Altavista (www.altavista.digital.com).

Priority Three: These items help...

1. In general, good formatting requires tables
   Use tables with the border set to 0 (zero) in order to get improved formatting. If you want to wrap text around an image, see my Web site below on editors.

2. Check your Web site on alternate platforms
   This means other browsers, other size screens (many users still have 14 or 15 inch monitors), and other types of computer (Macintosh versus Windows). Try different browsers, and older versions as well.

3. Capture the attention of new customers
   If your customers are from the general public, or are unfamiliar with your organization, make sure that your home page captures their attention. Only 10% of people browsing Web sites look beyond the top half of a Web page.

4. Make your site friendly to repeat visitors
   When most of your customers use your site as reference, quick and efficient are more important than visually stimulating. Think in terms of organizing the site so that you only have to traverse two links to find any important information.

5. Consider making additional versions of Web pages that people will print
   You can save documents in Adobe PDF or MS Word format. Viewers for these formats are free. PDF files retain exactly the formatting of the original document, no matter where the document is viewed.

6. Name the file of your home page "home.html" or "home.htm"
   Include a file named home.html in each subdirectory of your site.

7. Use the ALT attribute with all images
   These are used quite extensively in new versions of both Navigator and Internet Explorer. ALT attributes are crucial for people who have images turned off. Use the HEIGHT and WIDTH attributes as well (this is automatic with wysiwyg Web editors). For an example of an ALT attribute, place your mouse over the following image:
   

8. Use Web site statistics instead of counters
   For more information on Web site statistics, please visit our Webstats page.

9. Check your Web site from home via a modem connection
   It should load quickly.

Priority Four: For a professional touch

1. Be sure to use multi platform font names if you must specify non-default fonts
   For example, the text on this page is formatted as:
   <font face="Verdana, Arial, Helvetica, sans serif">

2. Make sure your text is large enough to read

3. Use color to draw attention to important items
   The eye is drawn to colored areas first, so your title, or some other important text in a colored box will get the customer's attention.

4. Page length should be 4 to 5 screen lengths

5. Redirect dead pages instead of just deleting them
   Remember that people can bookmark any page of your site. Don't just delete an old page, but redirect people to the best new location for that old information.

6. Avoid: Cheap graphics
   Poor quality icons and images give the impression of low quality to your whole site. Do not use images on your site until you completely understand graphics. You must especially understand antialiasing, and you must use software that can perform this optimization. If you aren't using high quality graphics, you should avoid them all together.

7. Avoid: Animated gifs
   On the plus side they can be attention catching and amusing, but often they are irritating and inelegant.

8. Do not use interlaced or progressive images
   They take longer to download, and with modern, higher speed modems, loading a low resolution version of the image isn't as important as when modems were slow.

9. Avoid: Dropshadows
   This makes text hard to read. If you want your banner text to be easily legible, then simply choose a nice font. Any visual feature that obscures text should be used carefully and deliberately.

10. Avoid: Blinking text
    If you have to draw attention to something, use a more professional method, such as color, position, size, or a clever graphical element.

11. Avoid: Under construction signs
    People don't care, and it gives a 'half dressed' impression. If your content is good then your customers will be happy.

12. Avoid: Splash screens and zero content site covers
    Take your customers to your quality content as fast as possible, especially if they are using a modem. Pages that have no content and only proclaim how wonderful your site will be are an irritation in most cases. You've just wasted you customer's time on a sales pitch.

13. Avoid: parenthetical links
    A Glossary is probably a better solution. If your material is very dense, perhaps it needs to be written in a different format. Parenthetical links tend to lead a person out of your Web site.

14. Avoid: Browser endorsements
    Create pages that are compatible with all browsers. Period. Your task is to create good Web pages, not to get involved in browser wars. When you use features only available in some browsers, you identify yourself as an amateur Web designer.

15. Avoid: Javascript
    It crashes browsers. If your site crashes your customer's browser, you may have just lost a customer. I've never seen a Javascript that was useful enough to justify crashing the customer's browser. Some Javascript is safe to use, but only knowledgeable experts can be reasonably sure.

Examples

Yahoo http://www.yahoo.com/ Dense, efficient, ideal repeat visit site, product identity is not so important since nearly everyone knows what Yahoo is.

New York Times http://www.nytimes.com/ Looks and works like a newspaper, visually appealing, good example of a site cover where the site looks like what it is: a newspaper. Clever use of formal visual logic. The column widths are all integer multiples of the narrow background columns. This is both nice design and a historical reference to newspaper layout techniques. The (usually) animated advertisement in the upper left corner irritates many people and degrades the professional demeanor of the site.

Yale Web Style Guide http://info.med.yale.edu/caim/manual/index.html Visually appealing (one of the authors is an illustrator), visually very consistent, great contextual navigation hints, very well organized, multiple navigation aids. Also an excellent reference to Web design, and human factors interface design.

Tom's VW Bug Repair and Upgrade http://laudeman.com/bug.html This site was built following the Guide you are currently reading, and following the Yale Style Guide, etc. The VW Bug site has meta tags and reciprocal links, contextual feedback, multiple ways to navigate, good layout consistency, fast load times, and most importantly - great content. Currently the site is at it's third major revision. Even though it could be improved, this is a very effective site that anyone can build and maintain.

ColorConsult by Frances Kerr http://www.colorconsult.com/ This site is proof that even a 3 page site can be well done. Graphical navigation at the top of every page, and text navigation at the bottom of every page. Contact information on every page. Totally consistent layout. Clever use of a background color in combination with a table make the site eye catching while being friendly to all monitor resolutions.

NIKE http://www.nike.com/ An expensive site. Nice consistency - note the top and bottom toolbars. Great graphics and very high production values (everything is well executed, well edited, very detail oriented.) Some odd and radical navigation, and the site occasionally opens new window which confuses many people. Oriented towards young, hip, Web savvy customers. No frames here, which I think is wise. Multiple Web sites by major topics.

TOYOTA | everyday http://www.toyota.com/ A clean, fairly low tech site. Visually consistent, and easy to navigate. Uses frames, but tends to redraw at least two of the frames which cancels out one of the strengths of frames. A quality site with quality content.

U.Va. Medical Center http://www.med.virginia.edu/ Great visual consistency, nice design, friendly to first time visitors, multiple ways to navigate, very professional.

1999 Dodge Web Site http://www.4adodge.com/ The Dodge Web site, as a mixed good/bad example. High production values (photos and text are well done and sophisticated). The site has some contextual feedback, nice content, good organization, regular updates, good visual and navigational consistency, etc. However, it has so much Javascript that it regularly crashes browsers. Incidentally, this is an expensive Web site, which makes the inconsistencies and irritations that much more noticeable.

References

Yale Style Manual http://info.med.yale.edu/caim/manual/index.html The finest and most comprehensive guide to Web style and design. You must at least skim this site. Serious designers will learn all of this material in depth and with complete understanding.

Web Developer's Journal http://webdevelopersjournal.com/ This site covers a very broad spectrum of Web issues: site creation, maintenance, promotion, design, graphics, tools, etc. Nearly all of the material here right on target. You aren't a Webmaster until you can intelligently discuss the pros and cons of most of the issues covered at this site.

ITC Web Development Support http://www.itc.virginia.edu/desktop/web/ Broad coverage of general Web topics. There's a special focus on U.Va. issues. The site is searchable, indexed, and has a handy feedback form if you can't quickly find your answer.