c r a p on the web
DESCRIPTION
Contrast | Repetition | Alignment | ProximityTRANSCRIPT
CRAP on the Web
Bruce Clary, McPherson College, McPherson, Kansas
The Good, the Bad, and the Ugly
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
“‘Design look’ is mentioned as a sign of Web credibility almost twice as often as the next category. Visual design is every bit as important as usability, findability, and accessibility in swaying the perception of today’s Web-savvy site visitors.”
—Dirk Knemeyer
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
“Good web design is about the character of the content rather than the character of the designer.”
—Jeffrey Zeldman
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
“Good art sends a different message to everyone. Good design sends the same message to everyone. Good art is interpreted. Good design is understood.”
—John O’Nolan
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Principles of design
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Principles of design
• Unity• Dominance/emphasis• Scale & proportion
• Harmony• Balance• Rhythm
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
ContrastCRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
ContrastRepetition
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
ContrastRepetitionAlignment
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
ContrastRepetitionAlignmentProximity
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points• Creates interest &
energy
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points• Creates interest &
energy
1
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points• Creates interest &
energy
1
2
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points• Creates interest &
energy
1
2
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points• Creates interest &
energy
1
2
3
4
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points• Creates interest &
energy
1
2
3
4
5
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
2
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
2
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
2
3
4
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
4
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
4 5
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects elements
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic1
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic1
2
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic1
2
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
OK, so here goes…
CRAP is a simplified approach to design introduced by Robin Williams in the first edition of The Non-Designers Design Book, Peachpit Press, 1994.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
OK, so here goes…
What kind of CRAP can you recognize in the following web page designs?
CRAP is a simplified approach to design introduced by Robin Williams in the first edition of The Non-Designers Design Book, Peachpit Press, 1994.
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
