Elements of Effective Web Design

Excerpts from about.com
Additional tips from C. Moore
More sources
Website samples on your skill level


Simplicity

Study the site design of any large corporation. Scrolling text and animations are used conservatively or not at all. Too much repetitive movement is distracting and sometimes annoying. Try to keep scrolling text and gif animations to a minimum. Simplicity in design should also be reflected in background choice. Busy, loud backgrounds detract from content and make text illegible. Too many colors or fonts can also be distracting and give the site a cluttered feel.

Good

Bad

Google.com The Monkey Page
AppTools  

Consistency

Use one design throughout the site. Remember that to a visitor, a website is a physical place. It is confusing if pages within a site are not consistent in design. Color is sometimes used to identify different sections of a Web site but the design and navigation should remain consistent throughout the site. Choice of fonts is also part of the design. Be consistent in your use of fonts.

Good

Bad

College of Charleston Mark Perkel's Website
  Tried & Trusted

Identity

Keeping with the concept that a Web site is a physical place, consider the purpose of the site and reflect that purpose in the design. For instance, a Web site for a bank most likely will not look like a Web site for an amusement park. A Web site should reflect the philosophy and identity of the business or entity for which it was designed. Use of color and fonts again has a large impact on the 'look and feel' of the site. Choose these elements carefully.

Good

Bad

La Petite AS-Graphix (this is a graphic design site)

 

Content

Have you ever taken the time to hunt down a Web site, waited for the page to load, and then not found the information you needed on the site? I am usually not only irritated by this but also inclined to never return. Make sure that as much information as possible is made available on your Web site.

Good

Bad

NPR Water on Wheels (poor navigation too)
Mr Glass Mr. Glass (OMG, it's bad!)

User-Friendly Navigation

This is one of the most important elements of your design, so take time to lay out a logical and effective method of navigation. Consistency is again important. Ideally, full navigation should be on each page—at least the top level links. If you use graphics for navigation, provide alternate text navigation.  

Good

Bad

Photoshop Brusheezy Trade Shop
  Anacrome Movies
  BJ Designs

 

Visual Appeal

Part of visual appeal involves personal preference but another part is reflected in adherence to the qualities of simplicity and consistency. Visual appeal is also dependent upon the quality of graphics used in a site design. You should visit sites that you think are appealing. Notice the layout and graphics on professional sites. Then try to emulate what you can.

Good

Bad

Too many to show. Depends on your taste. Scope Sys
  Mama Cheezy
   

 

Compatibility

Make your Web site platform, resolution, and browser compatible. If the site is not compatible to all viewers, consider creating alternate pages for those without the capability to view the enhanced site.

 

 

Additional Tips from Christine Moore
(some are repeated)

  • Do not center narrative text. It is harder to read the text.
  • Do not center bulleted items. It is harder to read the text.
  • Only use .jpg, .gif, or .png images. Do not use .bmp images.
  • Avoid garish, ostentatious backgrounds. Also, background must tile seamlessly.
    They should be less than 60 KB.
  • Photographs and text must have proper layout and alignment. For example, do not leave a lot of empty space; yet do not crowd items on the page. You can control excess blank space in a variety of ways: tables, div and styles, blank.gif files, wrapping/aligning, box model elements, etc.
  • For easier readability, do not type text across the entire width of the screen. Keep blocks of text fairly narrow. For control, use the features that I mentioned above. .
  • Use only "safe fonts" such as Arial, Times New Roman, and Comic Sans MS. Also, provide alternative fonts.
  • Your web site should be quick to download in 15 seconds or less. Try to keep image sizes below 60 KB. Also do not place too many images on one page. The use of thumbnails is helpful. Compress image as much as possible without losing quality. Use the "Alt" attribute which displays words in case image is taking a long time to load. Reuse your images, eg. backgrounds and bullets.
  • The use of CSS is a very effective way to format your page in columns and to control the position of various elements on your page.
  • Some websites still use tables for layout. However, tables should only be used for tabular data.
  • Even if you have only a small amount of content, don't use large text. It gives an appearance of a novice. White space and graphic elements will help to focus on your content.
  • Your web site should be easy to read. Use backgrounds and text that create a contrast. Don't forget to change link colors if necessary.
  • Your web site should be easy to navigate.
  • The design, page layout, and navigation should be consistent throughout the site. Consistency and coherence project a professional image. It also makes it easier to follow because pages have the same look and feel.
  • Novices have a tendency of oversizing elements of a website. In particular, buttons, mastheads, and fonts often get super-sized. To give your site a more polished look, avoid this amateurish habit.

 

Additional Sources of Information

Web Design Best Practices Checklist

Ten Tips to Drive Away Your Readers

Top 10 Tips to a Great Web Page

Web design Tips

For fun and a good learning tool, see World's Worse Website