NM 231
INTRO. TO WEB PAGE & INTERACTIVE DESIGN
instructor: curt cloninger
email: curt at lab404 dot com
office: Zeis 214. Tuesday + Thursday 11:45-1:15, or 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

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)
(addon bar + firesizer = firefox window resizer) * 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)
net art sampler

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 D-K)



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
VA344 Typography (ayiter)
typomania (spiekermann)
identifont database
what font is
what the font
Typedia: A Shared Encyclopedia of Typefaces
helvetica vs. arial
The Comic Sans Hall of Shame:
i'm comic sans...
comic sans criminal
what's so wrong with comic sans? (garfield)
ban comic sans
moca miami (arcangel)
comic sans must die (roberts)
Flickr: The Comic Sans Pool

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

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

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
37signals style sheet



i.d. magazine
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)



Andrew Allen: playdamage | minimal | maximal
Mitchell Connor: playdamage | minimal | maximal
Izzy Daniels: playdamage | minimal | maximal
Manny Figaro: playdamage | minimal | maximal
Marley Fulp: playdamage | minimal | maximal
Kyle Garner: playdamage | minimal | maximal
Leng Ghuy: playdamage | minimal | maximal
Joe Hollar: playdamage | minimal | maximal
Kimberly Lawson: playdamage | minimal | maximal
Noah Lentz: playdamage | minimal | maximal
Thomas Neptune: playdamage | minimal | maximal
Ashlee Overholt: playdamage | minimal | maximal
Freeman Poarch: playdamage | minimal | maximal
Benjamin Pope: playdamage | minimal | maximal
Kaitlin Porter: playdamage | minimal | maximal
Sami Zoobi: playdamage | minimal | maximal