Home || Syllabus || Reading || Assignments || Resources || Tutoring


Web Design Topics: Some sites to check for ideas and examples:

An example of contemporary visual design using various tones of a few colors and clean typefaces (sans serif). Note that on this site the opening page uses many shades of the same color (red) : http://www.tedbaker.co.uk A site that uses opposite colors on the opening page is: http://www.scooterdeath.com/

Navigation: Both the Museum of Natural History and the Brooklyn Botanical Gardens have clear menus and navigation as well as FreshDirect which is designed to get the user quickly to hundreds of items. A more complex series of menus can be studied at the DisneyWorld site at http://disneyworld.disney.go.com/wdw/index and a site on puppies.

When and where to add sound? Check out the Rodgers & Hammerstein Organization "Musical Theatre Library" site via http://rnh.com/org/. Sound is also a feature in http://homestarrunner.com/ which features simple animation.

Using just pure HTML, some stills and a bit of javascript: The New York Times site appears complex because the design crams lots of information into a small space but it is technically simple at http://nytimes.com and the BBC News Site is also a good example of a site that is text-intensive.

Art museum sites are often good examples of how to use animation and other tools throughout the site: MoMA (the Museum of Modern Art) and the Whitney Museum .

Some sites are interactive such as the games on http://www.CartoonNetwork.com/ , JK Rowling's site. and a "do-it-yourself" Jackson Pollock painting.

There are a number of collections of "bad" websites for reference as well as well-designed sites.


Some concepts to keep in mind while you design your pages and sites:

The first step along the way is to design the information architecture. Draw a site map. It is a good idea to practice drawing site maps by analysing sites you are familiar with and drawing site maps of them. Information architecture for a site is the key to organizing the contents of the site (example: Museum of Natural History site map).

Use persistent navigation so that there are links which are seen all of the time. The user should always be able to find the "home" page if s/he gets lost for example or a table of contents.

Color schemes: plan the background images or background color and font colors. Use sketches in other media (e.g. paints, markers, etc) to map out the color combinations.

Use story-boarding techniques to plan the narration used for Flash animation and animated GIFs.

Select fonts that go well with the overal "look and feel" of your site.

Color theory can help you decide how to use color on your site. For example, using several different shades of the same color will give a "harmonious" look to a page while using opposite colors on certain elements in a page will make them stand out. Color theory is a fascinating field where science and art meet; further information can be found at http://www.colormatters.com/colortheory.html among others and in many wonderful books. Here are three pairs of opposite colors if you wish to use them for contrast:

  green and red  
  blue and orange  
  yellow and purple  

Avoid too much eye candy! and have fun!


Questions? Please send email to