But first...

• if you're still having problems copying the right URL to paste into C-Base, talk with me during the lab time
• Adding your picture to your WebBoard signature
  • Look at the instructions, but substitute your own picture URL:
    <img src = "http://students.ed.uiuc.edu/YOUR-NETID/YOUR-NETID-tn.jpg">
• major projects from previous classes

.

.

.

.

Interface Design and Interactive Graphics

.

.

.

.

Interface Design

• What makes a good web page?

• What makes a good educational web page?
• What makes a good personal web page?
• your choices for exemplary personal web pages

.

.

.

.

Web Page Design

For Personal web page:

.

.

.

.

.

.

.

Color: Michelle Hinn's Alternative Web Design Guide

• Text color and background color choices
• Background graphics

.

.

.

.

The "squint" test

• examples

.

.

.

.

Interactive Graphics

• regular graphic
  

• "Clickable graphic" (blue or purple line around it)
  

• Simple whole graphic links
• graphic "maps"

.

.

.

.

Whole Graphic Links

• Just link the graphic!

.

.

.

.

"Clickable" maps

• you go different places depending on where in the graphic you click
• Web66 example
• CTER student map example

.

.

.

.

Creating clickable maps

• Use web editors like FrontPage or Dreamweaver

.

.

.

.

Animation

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

.

.

.

.

Bobby

.

.

.

.

For next week

.

.

.

.

What's an IPP?

.

.

.

.