NM 231
INTRO. TO INTERACTIVE MEDIA
instructor: curt cloninger
email: ccloning at unca dot edu
office: Owen 311 (office hours are online, by appointment)
location: university of north carolina asheville

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



intro
syllabus
rough project calendar
attendance and grading policies
Sister Corita Kent's 10 rules

major assignments
minimal web site
maximal web site

required text
HTML and CSS: Design and Build Websites (duckett)
code samples from the book

optional texts
lynda.com video tutorials (via Ramsey Library)

handy reference
html tag reference
css reference
browser safe fonts
box model specifications
javascript image rollover code (view source)

software/tools
lorem ipsum dummy text
filezilla (sftp client)
free ruler
TinyPNG
text wrangler * brackets * sublime text * atom (text editors)
codePen * firebug (in-browser editors)
chrome window resizer * safari window resizer



minimal site
a dao of web design (allsopp)
Late(st) Modern Style * Psychedelic Minimalist Style * Dot Matrix Style
fresh styles for web designers (cf: styles A, B, and D)

maximal site
usability experts are from mars, graphic designers are from venus (cloninger)
Corkboard Sprawl Style * Fullscreen Fashion Style * Hand-Drawn Analog Style * Dusty Cowboy Style
fresh styles for web designers (cf: styles E-K)
net art sampler



resources
Contrast. Repetition. Alignment. Proximity.
principles of graphic design (sections 1)
stock photo sources: stock xchange | toolshed (under "images")
large image of a dog



resources
web site usability basics (cloninger)
web do's and don'ts
w3c markup validation service
stripe generator
create a javascript pop-up window
create and center a pop-up window

process
in the garden: a design process revealed (bowman) | css zen garden
web.without.words
Fresh Styles cover comps
make my logo bigger cream

grids
principles of graphic design (sections 3)
müller-brockmann posters
müller-brockmann manual
grid template (elam)
online grid system resources
960 grid system
gridding the 960 (moll)
grid links (designing with Grid-Based Approach)

typography
toolshed (under "fonts")
principles of graphic design (section 5)
historical typeface examples
typomania (spiekermann)
identifont database
what font is
what the font
helvetica vs. arial
The Comic Sans Hall of Shame:
i'm comic sans...
comic sans criminal
what's so wrong with comic sans? (garfield)
comic sans must die (roberts)
Flickr: The Comic Sans Pool

web typography
google web fonts
browser safe fonts
typographic contrast and the web (green)
The Elements of Typographic Style Applied to the Web (bringhurst/rutter)

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

starter templates
basic html template | basic css template
fixed html template (ice layout) | centered html template (jello layout)
maximum/minimum width html template
2-column html template
fancy html template | fancy css template



how magazine
communication arts magazine
eye magazine
meggs' 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)



Wendy: minimal | maximal
Ruby: minimal | maximal
Starling: minimal | maximal
Alex C.: minimal | maximal
Ko: minimal | maximal
James: minimal | maximal
Kyle: minimal | maximal
Ethan: minimal | maximal
Anna: minimal | maximal
Fran: minimal | maximal
Logan O.: minimal | maximal
Alexa: minimal | maximal
Natascha: minimal | maximal
Kelsie: minimal | maximal
Avery: minimal | maximal
Chris: minimal | maximal
Logan W.: minimal | maximal
Alex Z.: minimal | maximal