C R A P On The Web
-
Upload
bruce-clary -
Category
Education
-
view
103 -
download
0
description
Transcript of C R A P On The Web
![Page 1: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/1.jpg)
CRAP on the Web
Bruce Clary, McPherson College, McPherson, Kansas
The Good, the Bad, and the Ugly
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 2: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/2.jpg)
“‘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
![Page 3: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/3.jpg)
“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
![Page 4: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/4.jpg)
“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
![Page 5: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/5.jpg)
Principles of design
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 6: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/6.jpg)
Principles of design
• Unity• Dominance/emphasis• Scale & proportion
• Harmony• Balance• Rhythm
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 7: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/7.jpg)
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 8: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/8.jpg)
ContrastCRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 9: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/9.jpg)
ContrastRepetition
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 10: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/10.jpg)
ContrastRepetitionAlignment
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 11: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/11.jpg)
ContrastRepetitionAlignmentProximity
CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 12: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/12.jpg)
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 13: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/13.jpg)
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 14: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/14.jpg)
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 15: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/15.jpg)
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 16: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/16.jpg)
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 17: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/17.jpg)
Contrast, Repetition, Alignment, Proximity
• Distinguishes different content• Brings out dominant elements and establishes focal
points• Creates interest &
energy
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 18: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/18.jpg)
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
![Page 19: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/19.jpg)
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
![Page 20: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/20.jpg)
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
![Page 21: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/21.jpg)
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
![Page 22: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/22.jpg)
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
![Page 23: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/23.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 24: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/24.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 25: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/25.jpg)
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 26: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/26.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 27: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/27.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 28: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/28.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 29: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/29.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 30: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/30.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
2
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 31: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/31.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
2
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 32: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/32.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects related or equivalent content• Provides consistency• Creates unity 1
2
3
4
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 33: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/33.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 34: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/34.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 35: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/35.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 36: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/36.jpg)
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 37: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/37.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 38: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/38.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 39: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/39.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 40: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/40.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 41: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/41.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 42: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/42.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 43: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/43.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
4
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 44: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/44.jpg)
Contrast, Repetition, Alignment, Proximity
• Creates a visual flow• Connects elements• Imposes order &
control
1
2
4 5
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 45: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/45.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 46: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/46.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 47: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/47.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 48: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/48.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 49: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/49.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 50: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/50.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 51: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/51.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 52: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/52.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 53: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/53.jpg)
Contrast, Repetition, Alignment, Proximity
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 54: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/54.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects elements
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 55: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/55.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 56: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/56.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic1
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 57: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/57.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic1
2
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 58: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/58.jpg)
Contrast, Repetition, Alignment, Proximity
• Connects elements• Creates visual order
and logic1
2
3
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
![Page 59: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/59.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 60: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/60.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 61: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/61.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 62: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/62.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 63: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/63.jpg)
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
![Page 64: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/64.jpg)
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
![Page 65: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/65.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 66: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/66.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 67: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/67.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 68: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/68.jpg)
![Page 69: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/69.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 70: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/70.jpg)
![Page 71: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/71.jpg)
![Page 72: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/72.jpg)
AR340 WEB-BASED DESIGN ● FALL 2010
![Page 73: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/73.jpg)
![Page 74: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/74.jpg)
![Page 75: C R A P On The Web](https://reader034.fdocuments.in/reader034/viewer/2022051613/54c7490d4a7959723e8b45e7/html5/thumbnails/75.jpg)