3 Web Design & Graphics

Web site process steps (see Spalter, Ch. 11)

1. Planning: Audience, Metaphor, Storyboarding graphics & interaction: Flowchart
   
2. Creating, gathering & organizing materials
   creation of template page
   
3. Structuring teamwork
   

Interface goals (Spalter):

• Consistency & stability: text, headers, graphics, navigation
• Strong metaphors
• Obvious functionality
• Simplicity (KISS)
• Test, test, test
• Example:  
  • Amiens Cathedral

III. Page Layout Considerations

Proportions

• Set overall width in pixels with Table or GoLive grid
• Narrow columns of text for legibility

TABLES provide a way to structure pages into blocks of text and graphics, following traditional page layout.

• Variables: Cellspacing, Cellpadding, Border, Width
• Examples
  • Arch 484 Template page

FRAMES allow a static index with a changing window.

can cause navigation problems Furthermore, when the referenced frame page is not available, the whole set will not load with some browsers.

• Examples
  • Arch 484 project frame

Traditional principles:  balance, contrast, hierarchy

IV. Copyright issues for images

Fair use guidelines (from Spalter, Ch. 2):

• Purpose & nature of use: educational, spontaneous use for small audience vs. open publishing
• Nature of the work
• Nature and substantiality of material used: fragment vs. whole
• Effect on potential market

V. Color

• Reducing download time by reducing color depth
• Browser safe color, 215 Web Safe Colors (RGB  triad) similar on Mac and PC
• Example

VI.  Graphic File Formats

• GIF: 256 colors, Run Length Encoded = lossless -- good for synthesized computer graphics
  • Transparent GIFs show background
• JPG: full color, lossy -- good for photographs, continuous tone
• PNG: most compressed, still not widely used (can't view with old browsers)

Graphic layout elements

Logos, borders, backgrounds, bullets, buttons

VII. Image Maps

Image maps allow parts of bitmap graphics to be linked to other locations.

• Defining boundaries with GoLive (Basic Elements Palette > Image > Map) or
• Photoshop 5.5, ImageReady's slicer
• Examples
  • Faces as guides
  • Trial image

VIII. Rollovers

(Cyberobjects Elements Palette > Button Image)

Examples

• Museum of Web Art

FOR TUESDAY:  Template page and site structure due