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
- 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