Web Style Guide

Processs

• Planning and design stages
• Design flow chart
• Know what will be crated before you start
• Good planning leads to good navigation

Interface Design

• Define goals of site
• Stages of development
• Consistancy in graphics and colors
• Make sure people without great knowledge of the web can still navigate

Site Design

• Layout and structure of information
• Chunking

Web Graphics

• Browser safe colors
• 2-24 bit
• Dithering
• gif vs. jpg
  • gif is for less colors, sharp edges
  • jpg is for more colors, blending, photos

Page Design

• Pages should not contain too much information because readers get confused
• Consistancy thoughout site is very important
• Use of different page layout tools
  • Frames
  • Tables
  • Layers
• Scrolling
  • Don't make users have to scroll too much
  • Seperate different sections into different pages
• Graphic "safe area" dimensions for layouts Width=595, Height=295

Typography

• Resolution differs when text is on web and also varies from computer to computer
• Make certain that text is easily readable
• Font list available for most browsers is very limited. Only use standard fonts excpet for headings and other places where you can use graphics of the font.
• Cascading Style Sheets help manage your typefaces and styles throughout your site.(very helpful for larger sites)

Editorial Style

• Break up page into "chunks"
• External links should be opened in a new window
• Justified text and right/center aligned may be hard to read and cause problems for some users
• Hyperlinks should be used to give the user more information about what you have already provided not to replace your information

Deconstructing Web Graphics

National Geographic

http://www.nationalgeographic.com/features/97/nyunderground/

• Professional Look
• Inovative ways of using different medium
• Good use of Scrolling
• Too many plugins?

Bosch Power Tools

http://www.boschtools.com

• Good Navigation
• Well designed for people who aren't accustomed to the web
• Use of basic solid colors
• New/Advanced HTML and JavaScript

File Formats, Color Optimization

• color depth, dithering
• 216-color browser-safe palette
• file formats (gif, jpeg)
• hexidecimal based color