But first...

• Adding your picture to your WebBoard signature
  • Look at the instructions, but substitute your own picture URL:
    <img src = "http://www.students.uiuc.edu/YOUR-NETID/YOUR-NETID.jpg">
• major projects from previous classes
• Your exemplary personal web sites

.

.

.

.

Interactive Graphics & Interface Design

.

.

.

.

.

.

.

.

Interface Design, Part 2

• What makes a good web page?
  • Nan Goggin's Design Guide
  • Yale style guide
• What makes a good educational web page?
• What makes a good personal web page?
• What makes a good organizational web page?

.

.

.

.

Web Page Design

Reasons

.

.

.

.

.

.

.

Design features

• single screen
• inverted "L" layout
• strategic use of motion

Gestalt Psychology's perceptual organization principles

• proximity
• similarity
• good figure
• common fate

Proximity

                          X                  X
                          X                  X

                          X  X
                          
                          
                          
                          
                          
                          
                          X  X

Similarity

                             X     O
                             
   
                             X     O

                             X  X
                             
   
                              O       O

Good figure

Not-such-a-good figure

Common fate

• 
• Coherence illusion applet: http://www.ed.uiuc.edu/courses/edpsy387/fa98/java-illusion/

Implications for interface design

• what to do
• what not to do

Color: Michelle Hinn's Alternative Web Design Guide

• Text color and background color choices
• Background graphics

.

.

.

.

Bobby

.

.

.

.

Animation

• strengths
  • weather.com
  • Antarctica plate tectonics
  • ASL example
• Misuses of animation
  • all animated
  • Hampster dance
  • animaniacs
• controlling animated gifs: GraphicConvertor, GIFbuilder for Macs; Gif Animator for Windows

.

.

.

.

For next week