MMAS 121
INTRO. TO WEB PAGE & INTERACTIVE DESIGN
instructor: curt cloninger
email: curt at lab404 dot com
office: Zeis 211. MW 12:00-1:30
location: university of north carolina at asheville

class-specific | photoshop | html | dreamweaver | supplementary reading | student sites



intro
syllabus
rough project calendar

major assignments
photoshop: waffle house ads
html/css: personal weblog
dreamweaver: MMAS site-redesign

required texts
Photoshop CS3 or CS4, Visual QuickStart Guide (weinmann, lourekas)
Web Designer's Reference (grannell)
Macromedia Dreamweaver CS3 or CS4, Visual QuickStart Guide (negrino, smith)
Fresher Styles for Web Designers (cloninger)

inspiration
link-o-rama
web design advice from Strong Bad



resources
Contrast. Repetition. Alignment. Proximity.
principles of graphic design (sections 1)
design matters
photoshop tennis example
layer tennis
tennis psd source files (duerden / thomas)

grids
principles of graphic design (sections 3)
grid template (elam)
müller-brockmann posters
müller-brockmann manual

project: waffle house ads
requirement details
the idea
Fresh Styles cover comps
the ad graveyard
wafflehouse.com
stock photo sources: stock xchange | toolshed (under "images")
gen-x examples: billabong usa, thrasher magazine
yuppie example: four seasons hotels
nostalgic example: mast general store
fresh styles for web designers (cf: lo-fi grunge, mondrian poster)



resources
a dao of web design
htmimimalism deconstructed
web site usability basics (cloninger)
toolshed (cf: tutorials)
fresh styles for web designers (cf: HTMinimaLism, Mondrian Poster)
the russian avant-garde book

typography
browser safe fonts
true is true (cina)
principles of graphic design (section 5)
historical typeface examples
designing {with} typography
typographic contrast and the web (green)
typomania
behind the typeface: cooper black
identifont database
comic sans comic (onstad)

project: personal web log
requirement details
basic html template | basic css template
fixed html template (ice layout) | centered html template (jello layout)
2-column html template
fancy html template | fancy css template
css reference table
xhtml tags
lorem ipsum dummy text
funky html | funky style sheet
37signals master style sheet
BD4D master style sheet



resources
usability experts are from mars, graphic designers are from venus (cloninger)
in the garden: a design process revealed (bowman) | css zen garden
fresher styles for web designers (cf: all styles)
fresh styles for web designers (cf: all styles)
fresh styles lecture notes
pirated sites

color
principles of graphic design (sections 2)
color in motion
colors "change" based on their context: example
hue/saturation/value diagram

project: re-design MMAS site
requirement details
current MMAS site
parsons school of design
rhode island school of design
cranbrook academy of art: 2d design department
MMAS front page redesign mockups
UNCA front page redesign mockups
toolshed (cf: schools)



i.d. magazine
how magazine
communication arts magazine
eye magazine
the non-designer's design book (williams)
notes on graphic design and visual communication (berryman)
a history of graphic design (meggs)
grid systems in graphic design (müller-brockmann)
grid systems (elam)
the elements of typographic style (bringhurst)
interaction of color (albers)
experience design (shedroff)
don't make me think (krug)
mtiv (curtis)
you work for them



Brooks: weblog | mmas redesign
Dahlstrom: weblog | mmas redesign
Galdy: weblog | mmas redesign
Goldberg: weblog | mmas redesign
Hall: weblog | mmas redesign
Herman: weblog | mmas redesign
Hosler: weblog | mmas redesign
Leavitt: weblog | mmas redesign
Lor: weblog | mmas redesign
Pierce: weblog | mmas redesign
Tevia-Clark: weblog | mmas redesign
Trussler: weblog | mmas redesign
Witherspoon: weblog | mmas redesign
Wolfe: weblog | mmas redesign