Principles of Good Web Design

4 Things to Consider

1. Purpose, Content, & Audience
   Your website must have a purpose, and content that relates to that purpose and to your audience.
2. Colors, Images, & Fonts
   Make sure there are NO conflicting colors, strange fonts, busy animation, or badly scanned or sized photos in your page
3. Contact & Updates
   There must be a way for users to contact you and for them to know how current your website is.
4. Navigation
   Users must be able to easily navigate your webpage(s).

Purpose, Content, and Audience

Before you even begin to create a website, you must carefully consider your purpose, your content, and your audience. Exploring these issues before you begin will help guide your process and help you to create a very well-designed website.

• The Purpose
  Will your website be educational, informative, entertaining, persuasive? A well-defined purpose is the necessary starting point for a productive design process.
• The Content
  Without relevant content there is really no reason to have a website. Gather your content based on your defined purpose and your audience.
• The Audience
  Who is the website for? Are you designing your website for colleagues in your field, for your family, for children, for a class assignment, etc? Obviously, two well designed websites on the same topic aimed at different audiences would look and function differently. For example, a well designed website aimed at children would look and feel much differently than a well designed website aimed at colleagues in your field.

  [top]

Colors, Images, & Fonts

Remember: consistency and simplicity. Color, images, and fonts jump off the page. If you have chosen badly, the important content and purpose that you are trying to convey could be lost in distracting colors and unreadable fonts. Try to find a site whose design you admire and model your site after it. Most important things to do:

1. Use a browser safe color. Pick colors from http://www.lynda.com/hex.asp This ensures that the colors you use can be seen correctly by anyone. It also helps simplify color selection.
2. Keep the layout simple. When in doubt, go with less
3. Use tables to make your layout interesting.
4. Keep fonts simple:
   • Use only one or two typefaces in your site.
   • Do not use unreadable and/or distracting fonts.
   • Do not bold whole paragraphs.
   • Do not use blink or italics for large areas of ttext.
5. Minimize animated elements. Unless you actually need to show how something works, most animations do not do anything and drive users nuts after a while. If you must use animations, try to use ones that only cycle a few times, not forever.
6. Use images correctly:
   • Use copyright-free (public domain) images, or ones that you otherwise have permission to use.
   • A good rule of thumb is to have 200k or less of images on your webpage, any more could cause the page to load slowly over a modem (consider your audience when making this decision--how will they access your page--on a corporate LAN or through a modem!).
   • Do not use HTML height and width html tags to resize images, use an Image Editor such as Microsoft Image Editor or Photoshop.
   • Make sure all images are saved as jpegs or gifs (.jpg or .gif).
7. Learn how to specify page properties so you can globally define link color, backgrounds and other page elements (this helps keep things consistent).

  [top]

Contact & Updates

Users must have a way to contact you. Also, you must give last updated information so users know if the site is current or not. With the amount of websites on the Internet, these two pieces of information are imperative.

• Contact Information
  Please remember to put your contact information on one of the pages on your website. This information can be a email address, or an entire mailing address plus phone numbers.
• Last Updated Information
  Users need to know if the information they are looking at is current.

  [top]

Navigation

How does the user travel through your webpage(s)? Take a hard look at your page. Do you think it is easy to use? If not, consider these ideas.

If you only have one webpage, consider using

• Targets/Anchors
  These links will allow users to easily navigate to different sections of your webpage (see the Netscape Composer Documentation to learn how to create these).

If you have multiple webpages, consider using

• Left-side navigation
  This is one of the most common types of navigation seen on the web. Resembling a table of contents, this left hand display is standard on every page, so the user always has a way to get to other pages.
• Top or right-side navigation
  Much like a left side navigation, this navigation stays the same on all the pages in your site.
• Bottom navigation
  Is used as a backup type of navigation. Since users have to scroll to see it, it should not be used as primary navigation.

Basically, as long as your navigation is consistent and obvious, it should work.

 [top]