Annotated Nike Ad

1
Lecture 14

• Annotated Nike Ad
• Course Review
• Course Objectives

2
Short Movie Example

• NIKE AD Annotated
• Click onhttp//www.scils.rutgers.edu/aspoerri/Te
  aching/MPOnline/Video/ Please click on
  nikeadslowannotated.wmv link to play video (it
  may take a while)

3
Course Objective

• Learn New Skills Vocabulary
• Learn MECHANICS
• Create MEANING
• Hands-on ExperienceCreating Multimedia Website
• As your calling card - job search

4
Recap Guide the Eye

• Sharp Contrasts
• Light intensity, Color, Texture, Shape, Motion
• Visual Grouping
• Continuity Within vs. Sharp Change Across
• Related Spatially Close
• Unrelated Large Gap
• Visual Hierarchy
• More Important Larger / Sharp Contrast
• Visual Weight Conceptual Importance
• Short-term Memory 5 ? 2

5
Recap Color Coding
Large areas low saturation Small areas high
saturation
12 Colors for labeling
6
Web Design Krugs Suggestions

• Design for Scanning, not reading
• Visual Hierarchy
• Visual contrast - size, bold, color
• Important things Visually prominent
• Break pages up into clearly defined areas
• Related things Spatially close, Nested
• Avoid visual noise"
• Leverage Conventions
• Clear what's clickable
• Use underline and/or color coding
• Make each click a mindless choice
• Cut ½ of words, then cut ½.

7
Recap Web User Behavior
Scan pages - don't read them
Look for anything Search Interest Decide
quickly Choose first reasonable item
Muddle through Don't figure out how things work
Resist forming models
Stick to what works
8
Web Design Implications
9
User Behavior ? Design Implications ? Design
Specifics

• 1 Use Grid System
• Maintain ConsistencyHelps you decide location
  of primary secondary navigation location and
  sizes of images location of headlines, main
  text, annotations etc.
• Create Visual Hierarchy Rhythm
• Present Information Clearly LogicallyUsers can
  read info more quickly.Facilitates understanding
  and recall.
• Invisible Hand guiding users and creating sense
  of place

10
User Behavior ? Design Implications ? Design
Specifics

• 2 Create Visual Hierarchy Guide Eye
• Important Things Visually Prominent(More
  Important Larger / Sharp Contrast)Use
  headlines to guide the eye
• Visual ContrastUse sharp changes in size
  (headline), light intensity (bold), color,
  texture, motion to create contrast.
• Proximity related things spatially closeSpatial
  separation conceptual separation.Don't mix
  alignment styles.
• Use Grouping Nesting to Increase Information
  Density (Short-term Memory 3-7)Use bounding
  shapes.

11
User Behavior ? Design Implications ? Design
Specifics

• 3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic for small blocks of text
• Enough contrast between type background

12
User Behavior ? Design Implications ? Design
Specifics

• 1 Use Grid System
• Maintain ConsistencyHelps you decide location
  of primary secondary navigation location and
  sizes of images location of headlines, main
  text, annotations etc.
• Create Visual Hierarchy Rhythm
• Present Information Clearly LogicallyUsers can
  read info more quickly.Facilitates understanding
  and recall.
• Invisible Hand guiding users and creating sense
  of place

• 2 Create Visual Hierarchy Guide Eye
• Important Things Visually Prominent(More
  Important Larger / Sharp Contrast)Use
  headlines to guide the eye
• Visual ContrastUse sharp changes in size
  (headline), light intensity (bold), color,
  texture, motion to create contrast.
• Proximity related things spatially
  close.Spatial separation conceptual
  separation.Don't mix alignment styles.
• Use Grouping Nesting to Increase Information
  Density (Short-term Memory 3-7)Use bounding
  shapes.

• 3 Typography Heuristics
• Sans Serif type is easier to read on screen
• Type size 10 -14 points
• 7 - 10 words per line
• Column width proportional to type size
• Bold and italic used for small blocks of text
• Enough contrast between type and background

13
Thank you

• For Your Effort
• For Your Creations
• and I believe we are in the process of reaching
  our Goal
• Create Interactive Multimedia Websites that
  Communicate