Web vs. Print

AR340 WEB-BASED DESIGN ● FALL 2010 CRAP on the Web The Good, the Bad, and the Ugly Bruce Clary, McPherson College, McPherson, Kansas

AR340 WEB-BASED DESIGN ● FALL 2010 Elements and principles of design As the course proceeds, we’ll spend time reviewing the elements1 of design and the principles of design, but for now we’ll keep it 2 simple… 1 Line, color, value, texture, shape, size, direction 2 Unity, conflict, dominance/emphasis, repetition & pattern, proportion, harmony, balance, gradation

AR340 WEB-BASED DESIGN ● FALL 2010 CRAP

AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast

AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition

AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition Alignment

AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition Alignment Proximity

AR340 WEB-BASED DESIGN ● FALL 2010 CRAP Contrast Repetition Alignment Proximity CRAP is a simplified approach to design introduced by Robin Williams in the first edition of The Non-Designers Design Book, Peachpit Press, 1994.

AR340 WEB-BASED DESIGN ● FALL 2010

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2 3

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2 3 4

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Makes different things different • Brings out dominant elements • Creates energy 1 2 3 4 5

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1 2

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1 3 2

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Provides consistency • Creates unity 1 3 2 4

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements • Imposes order & control

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control 2

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control 2 3

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Creates a visual flow • Connects elements 1 • Imposes order & control 2 3 4

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic 1

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic 1 2

AR340 WEB-BASED DESIGN ● FALL 2010 Contrast, Repetition, Alignment, Proximity • Connects elements • Creates visual order and logic 1 2 3

http://alex-kahl.digital-dictators.de	110
http://www.slideshare.net	28
http://wwwi.mcpherson.edu	24
http://chrisrutz.de	10
http://posterous.com	4
http://mediaissues-daphne.blogspot.com	3
http://wild.freshout.co.uk	2

Web vs. Print

by Bruce Clary on Jan 03, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 181

Statistics

Web vs. Print — Presentation Transcript