Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

What we have Learned so far:
Basic Web Design Principles


Reading:  2. Basic Web Design Principles."
 (Read before Class)

Assignment: Work on your Image websites
which are due on Saturday, March 25h. Bring
questions and/or problems you are having
with your websites to class.

1. a) Technology Arts Media Newsletter
    b) TAM Advising: TAM Courses

2. Basic Web Design Principles

  1. Chris Lewis' Basic Web Design Principles

  2. Chris Lewis Basic Elements of a Webpage
     for Digital Design

  3. Top Ten Mistakes in Web Design

  4. Top Ten Mistakes Revisited

  5. Creating a Webpage: a Basic Guide

  6. Art and the Zen of Web Sites

  7. Top 15 newbie mistakes

3. Image Website Examples

4. . Web Design Basic we have Learned So Far

  1. First determine what is the "larger goal" and "purpose" of your website.

  2. Next determine who your "intended audience" is.

  3. Now determine what your site "content" will be. If
    your website provides good, current, useful content, then people will come back to your site.

  4. Now develop a website template that gives your site a strong, clear "look and feel."

  5. Now organize your content into logical and independent categories.  Try to limit your content categories to between five and six topics.

  6. Now create and develop your website navigation.  Make sure that there are links back to each main category page on your site and to your site's home page.

  7. Make sure your website's navigation is simple and 
    intuitive so that it is easy for users to quickly move
    around your site. 

  8. Make sure your website navigation follows the
    "three-click rule," allowing users to find what they
    are looking for on your site in three clicks or less.

  9. Make sure that your website has a clear "title" that
    tells the user what its larger goal and purpose is.  Make sure that each webpage in your site has a clear title as well.

  10. Make sure that each page on your website has clear "contact information" so that users can contact you.

  11. Make sure that each page on your website has
    "date created" and "date last modified" information.

  12. Make sure that each of your pages on your website uses "web-safe colors" so that you don't have trouble with  dithering.

  13. Use active white space to make your content
    stand out on the page.

  14. Use a grid to  provide visual structure.  Use
    invisible tables to create a layout grid.

  15. Try not to use "Frames".  They are often cause more problems than they solve.  Instead of Frames, use a tight, compact invisible grid layout.

  16. Design for the screen.  Remember, a computer
    screen is "landscape oriented" rather than
    "portrait-oriented." Design horitzontally, not
    vertically.  Readers don't like to scroll.

  17. Design for variable screen sizes between 640 x 480,
    800 x 600, and 1100 x 750.  Use variable table grids that will expand or contract to fit into different screen sizes.

  18. Make sure that each webpage has a clear "visual
    hierarchy" that makes it easy for the user to
    determine what are its central elements.

  19. Design using the "Kiss Principle" (Keep it simple, Stupid). Don't throw too much content onto a webpage or put too many fancy web multimedia goodies on your pages.

  20. Design for low Bandwidth.  Try not to create webpages that are bigger than 50 to 60 kbs in size.

  21. Make sure your image files aren't bigger than between 25 and 40 kbs in size.  Too many large image files can make your webpage take to long to download.

  22. Make sure that your central images have "title captions" and, if necessary, "storyline captions" to help reinforce the image's larger meaning.  Don't assume that images and pictures will just speak for themselves.

  23. Make sure every webpage has a clear "focal point"
    that draws the user into the page.  Beware of clutter
    and multiple "focal points."

  24. Make sure that every webpage has "Meta tags" that
    include "description," "keywords," "author,"
     "language," "copyright," "distribution,"  "robots, "
     and your  "e-mail address."See Dr Clue's Metatag Maker.

  25. Always make sure that you have "text links" on each of your webpages and your major images and buttons have "Alt tag" information for those users who have their images turned off.

  26. Make sure that your webpages have file names that
    follow the"8.3 rule" and use lowercase characters.
    Don't name files "html" but "htm," with no file name being longer than 8 characters.

  27. Make sure that your webpages use names that indicate what their content is.  If you can, use some of the keywords for your website as filenames; this makes it easier for Search Engines to list them.

  28. Always test your website and webpages out on multiple computer platforms--Mac and PC--running at variable speeds between 56 kps to 100 Mps.

  29. Learn to understand and respect the limits of your web design tools. Often some of the fancy things you want to put on a webpage can't be done with a "basic"webpage editor such as Netscape Composer or Frontpage Express.

  30. Make sure you have other people look at and explore your website and get feedback from them about how it works.  Good user feedback is essential for successful, dynamic websites.

















Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
8057      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 20 March, 2006

Digital Design Course homepage