Resources

The Web Style Guide
UIWEB

Links

boxes & arrows
Communication Arts:Interactive
Digital Web Magazine
SHIFT
Laszlo's process
location-based media
dreamhost
mediatemple.net
pair.com
flashcoders
flashnewbie
sfsu - Conceptual/Information Arts
sfsu - multimedia studies

week four : function DHTML DOM Reference
Drag & Drop DHTML demo
ebay scripts
google's maps
Lessons in JavaScript
Laszlo Sample Apps
Laszlo Systems
Learn Laszlo in Ten Minutes!
First Principles of Interaction Design
Jakob Nielson's Usability Hueristics
Jennifer Tidwell's Design Patterns
Sari A. Laakso's UI Design Patterns
Welie's Design Patterns

a very small website
Squared Circle Colr Pickr
CSS Zen Garden
Edward Tufte on...
Graphic File Formats
Position is Everything
quick CSS test app
quirksmode.org
tenable info
The New York Times
understanding color

del.icio.us
dom.net
shared class blog

Broadmoor Hotel Example
Glen Murphy's experiments

Class-submitted links

Brian Anthony Online
Carbon House
Fridge magnets
Madonna.com
red monkey designs

Readings

week one : overview

good design/bad design
UIWEB.COM Issue #8 : Why Good Design Comes from Bad Design

Site Planning
Web Style Guide : planning, setting goals

Site Specification
Web Style Guide : Site Specification

week two : structure

Visual Vocabulary for IA
A visual vocabulary for describing information architecture and interaction design

week three : style

Page Design
Web Style Guide : Page Design. Read the whole chapter.

Typography
Web Style Guide : Typography. Read the whole chapter.

Class notes

introducing the User
structure
style
function
overview, crits

overview, crits

• what is design?
  • designing good experience for people
  • style, structure, function

• style
  • page-design
  • simplicity
  • space
  • comfort
  • familiarity
  • uniqueness
  • regularity

• structure
  • information architecture
  • site layout

• function
  • back-end
    • database
    • php, jsp, python
    • page outlines
    • front-end

• flash
• flex
• director
• DHTML

• positions
  • Information Architect – hierarchies, taxonomies, use of metadata, wireframes
  • Visual Designer – icons, themes, backgrounds, colors
  • Branding Specialist – higher-level view, icons & color-schemes
  • Graphic Production Manager –
  • User Experience/Creative Director – real-time interaction
  • Usability Specialist – user testing, usability studies, task-based
  • Interaction Designer –
  • Marketing Strategist –

• my approach
  • brainstorm
    • produce lots of lists, diagrams, etc
    • no idea is a bad idea
    • get it down on paper
    • organize
    • produce sitemaps, consolidate lists
    • trim down ideas
    • cluster
    • remember that most people think best in chunks of 7 +/- 2
    • site-organization
    • style
    • produce
    • maintain

• deployment
  • trade-offs between hosting yourself & hosting elsewhere
  • stability
  • scalability
  • redundancy
  • support
  • spam

• documents
  • brainstorm notes
  • site map
  • information outlines
  • thumbnails
  • wireframes
  • use-case
  • user profile
  • contents
  • prototype

• technical reqs
  • cross-browser support
  • plugins

• further education
  • list discussion – thevidlist
  • see links on left pane

• delivering according to process
  • laszlo’s process
  • it’s good to set up a process
  • so customers know what they’re getting & when they’re getting it
  • project-management style

[please see list under “Week 5” on right panel]

EXERCISE :
Informed Crits

* * *