Williams

1
Williams Tollett 5-8
2
Chapter 5Web Advantage vs. Print

• Cost to produce
• Color
• Sound, animation
• Revisions, updates, archives
• Distribution
• Customer response
• Information variety, convenience, access
• File size
• Designer-client proximity

3
Print Advantage vs. Web

• Portability
• Cost to read
• Familiarity
• Convenience to read
• Tool development
• Reliable WYSIWYG
• Speed to read

4
Chapter 6CARP

• Contrast
• Alignment
• Repetition
• Proximity

5
Contrast

• If two elements are not the same, make them very
  different, dont make them almost the same
• Type, rules, graphics, color, texture, etc.
• Focal point depends on contrast

6
Alignment

• Choose one alignment and use it on entire page
  (left, center, right) Dont mix them
• Get things away from the left edge
• Align vertically, but also horizontally
• Dont center everything
• Turn off borders in tables

7
Repetition

• Repeat elements that tie parts of project
  together
• Navigation widgets, logos, colors, styles,
  illustrations, formats, layouts, type, etc.

8
Proximity

• Things that belong together should be together
• Keep headlines with text
• Keep captions with images
• Leave space between different things
• Group like items together

9
Non-CARP Guidelines

• Dont set type all in caps
• If text is capitalized, dont also italicize
• Dont use unneeded counters dont make any
  counter prominent
• Know when to use paragraph vs. break
• Spell thigns rite!

10
Chapter 7Interface Navigation

• Keep the plan simple
• Design for LCD 800x600 ? maybe dated
• Make initial visual impression fit into this
• No horizontal scrolling
• Important stuff above the fold
• Navigation is about organization
• Dont trade clear communication for unclear
  cleverness

11
Styles of Navigation

• Buttons, icons, tabs, text links, (animated)
  graphics, image maps
• Keep navigation to main parts of site in compact
  package, either top, side, or bottom
• Allow for graphics/non-graphics use of site
• Use frames only with caution
• Repeat navigation (make it persistent)

12
Navigation (cont.)

• Multiple navigation methods are OK
• Let site decide the navigation style
• Include a site map/index
• Have only useful links
• Make sure links work

13
Chapter 8Good Design

• Text
• Not interrupted by background
• Big enough, but not too big
• Clear hierarchy of information
• Columns are narrow, to allow easier reading
• Links
• Colors are coordinated with page
• Underlined, unless design makes them clear

14
Good Design (cont.)

• Navigation
• Buttons, bars easy to understand
• Frames, if used, unobtrusive
• Index/map for large site
• Graphics
• Buttons not big, dorky
• Each has an alt label
• Text link for every graphic link
• Animated graphics automatically shut down

15
Poor Design

• Backgrounds
• Gray/default color
• Poor coordination with text
• Too busy, distracting
• Frames
• One or more scroll bars in middle of Web page
• Narrow frames that force sideways scrolling

16
Poor Design (cont.)

• Text
• Left edge crowding
• Text stretched all the way across the page
• Centered type over flush left body copy
• All caps, bold, and/or italic
• Underlined text that isnt a link
• Too small to read

17
Poor Design (cont.)

• Links
• Default blue
• Blue borders around graphics
• Unclear about destination(mystery meat
  navigation)
• Irrelevant, distracting
• Unrecognizable
• Dead
• Flash graphics with no browser hand

18
Poor Design (cont.)

• Graphics
• Large files that take forever to download
• Meaningless or useless
• Big thumbnails
• Halos
• Lack of alt labels
• Missing
• Improperly sized (esp., too large)

19
Poor Design (cont.)

• Blinking animations
• Things that blink
• Things that are rainbows
• Under construction signs
• Animated signs
• Incessant animation
• Pointless flash animation

20
Poor Design (cont.)

• Tables
• Borders turned on
• Junk
• Counters
• Junky advertising
• Sideways scrolling
• Awards

21
Poor Design (cont.)

• Navigation
• Unclear
• Overly complex
• Complicated, numerous frames
• Orphan pages
• Useless page titles

22
Poor Design (cont.)

• General design
• Home page doesnt fit in 800x600
• No focal point
• Too many focal points
• Visual interest navigation buttons
• Cluttered, non-aligned
• Lack of contrast
• Inconsistency across browsers