RESEARCH
GATHER
Gather all the data.

Immerse yourself in details relating to the material.

Know the competition.

Get inspired!

Exercise 1
Brainstorm discussion
Thumbnail sketching

The Design Process

Thumbnail samples: thumbs.html
Mock-up samples: mock-ups.html
Site map samples: sitesketch.html
To do list: todo.html

Sketch a redesign:
http://www.abaloneinn.com/

R E S O U R C E S
Web guru’s opinion of great looking sites
http://www.lynda.com/resources/inspiration/index.html

DESIGN PRINCIPLES
Look and listen.

Think and talk: learn the principles by critiquing the Design Workshop flyer and a few of these websites.

Exercise 2
Group Ex: critique the newspaper ad assigned to your group, be specific using design terms, offer redesign suggestions, sketch thumbnails.

Design Principles

Focal Point
http://www.rivertrout.com/main.html
http://www.leary.com/index_top.html

Hierarchy and Eyeflow
http://www.apple.com/
http://www.allanhouser.com/
http://www.denverartmuseum.org/

Consistency
http://www.allesdayspa.com/

Balance
http://www.decleor.com/

White Space
http://www.satguide.com/index.htm
http://www.sapient.com/what/enterprise_arch.htm

Simplicity
http://www.roxx.com/

Appropriateness
http://www.icehair.com/main.html

Unity
http://www.bellevuesquare.com/
http://catnet.stanford.edu/adoption.html

Contrast, Repetition, Alignment, Proximity
http://www.jamesyang.com/
http://counterspace.motivo.com/
http://www.seasonbyseason.com/home.html

Before & After
Marty's Pub: Before
Describe how the principles have been applied: After

R E S O U R C E S
Eyewire’s Mini-tips on focal point
http://www.eyewire.com/tips/mini/focal1.html
Click the Next button to see Tip 2 and again to see Tip 3.

Principles of design in brief
http://www.mundidesign.com/presentation/index2.html

B R E A K: Taking care of yourself!
http://www.mydailyyoga.com/yogaindex.html

GRAPHICS: sample of web graphic techniques
graphics.html

Legibility & Readability
Dynamic type contrast

Exercise 3
Trace type in B& A magazine, picking words from at least three different type categories.

Exercise 4
Create a word collage tracing over three contrasting words in any arrangement (text does not need to make sense).

Typography

NEW: List of type foundries on the web
Fonts and Foundries

NEW: Barb’s list of type-related sites
http://www.sonic.net/~ohbarb/fonts.html

Type Contrast
contrast.html

Size & structure contrast
http://www.virtuallastchapter.com/examples/chapter02/plazacafe/index.html

Readability
Poor readability: serif type, long line length
Student bloopers
http://www.cstone.net/~Erey/fhof.html
http://www.ravenswood-wine.com/visit.html
http://www.norcal-gymnastics.org/

Good readability
http://www.drivesavers.com/
http://www.pbs.org/ktca/americanphotography/features/
persuasion_essay.html

Slab serif for web reading
http://www.tiro.com/

Leading too tight! Too many alignments!
http://www.collegenet.com/about/index_html

Paragraph space & indents
http://www.solardevelopment.com/index.html

Patterns of organization, good page length
http://www.realgoods.com/

Before and After
readability.html

R E S O U R C E S
Robin's wisdom
http://www.eyewire.com/magazine/columns/robin/

Web typography
http://www.wpdfd.com/wpdtypo.htm

Writing & presenting on the web
http://ratz.com/stcApril/
Useful info on a few simple web pages

REVIEW the design principles!

REVIEW the typography principles!

Exercise 5
Group critique of flyers, thumbnail sketches and redesign comps.

Recap: review of Design Principles

What’s not working?
http://www.angelisland.org/

http://www.paragonlabel.com/

Which techniques need applying?
http://www.themiddleway.biz/

http://WWW.SLS.LIB.IL.US/admin/contined/