MMAS 121
INTRO. TO WEB PAGE & INTERACTIVE DESIGN
instructor: curt cloninger
email: curt at lab404 dot com
office: Zeis 214. Monday 1-2:30. Tuesday 1:30-3.
location: university of north carolina asheville

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



intro
syllabus
rough project calendar
attendance policy

major assignments
html/css: personal web site
dreamweaver: MMAS site-redesign

required texts
Head First HTML (with CSS & XHTML) (freeman, freeman)
Macromedia Dreamweaver CS5, 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)
photoshop tennis example
layer tennis
tennis psd source files (duerden / thomas)
the idea
Fresh Styles cover comps
the ad graveyard
stock photo sources: stock xchange | toolshed (under "images")



resources
a dao of web design
example approaches: HTMinimaLism | mondrian poster | late(st) modern | psychedelic minimalist | dot matrix
fresh styles for web designers (cf: HTMinimaLism, Mondrian Poster)
the russian avant-garde book [reading room > book #2]
web site usability basics (cloninger)
toolshed (cf: tutorials)
in the garden: a design process revealed (bowman) | css zen garden
stripe generator

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

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)

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

project: personal web site
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
javascript image rollover code (view source)
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)
fresher styles for web designers (cf: styles 6-8, +bonus)
fresh styles for web designers (cf: styles d-k)
fresh styles lecture notes

project: re-design MMAS site
requirement details
current MMAS site
rhode island school of design
cranbrook academy of art
MMAS front page redesign mockups
student redesign reel
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