P&P: Class on Web Page Design


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: This site features a clean and simple navigation at http://www.kare.com/index.html. A more complex series of menus can be studied at the DisneyWorld site at http://disneyworld.disney.go.com/wdw/index and at the Muppets' site.

When and where to add sound? Check out the Rodgers & Hammerstein Organization "Musical Theatre Library" site via http://rnh.com/org/

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/

There are a number of collections of "bad" websites for reference.


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.

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!


Notes on adding Sound and Video to your web pages