Contrast | Repetition | Alignment | Proximity

1. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CRAP on the Web
The Good, the Bad, and the Ugly
Bruce Clary, McPherson College, McPherson, Kansas

2. 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

3. 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

4. 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

5. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Principles of design

6. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Principles of design
•
•
•
Unity
Dominance/emphasis
Scale & proportion
•
•
•
Harmony
Balance
Rhythm

7. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CRAP

8. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CRAP
Contrast

9. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CRAP
Contrast
Repetition

10. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CRAP
Contrast
Repetition
Alignment

11. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
CRAP
Contrast
Repetition
Alignment
Proximity

12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity

15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
Distinguishes different content

16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Distinguishes different content
Brings out dominant elements and establishes focal
points

17. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Distinguishes different content
•
Creates interest &
energy
Brings out dominant elements and establishes focal
points

18. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Distinguishes different content
•
Creates interest &
energy
Brings out dominant elements and establishes focal
points
1

19. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Distinguishes different content
•
Creates interest &
energy
Brings out dominant elements and establishes focal
points
1
2

20. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Distinguishes different content
•
Creates interest &
energy
Brings out dominant elements and establishes focal
points
1
2
3

21. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Distinguishes different content
•
Creates interest &
energy
Brings out dominant elements and establishes focal
points
1
2
3
4

22. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Distinguishes different content
•
Creates interest &
energy
Brings out dominant elements and establishes focal
points
1
2
3
4
5

23. AR340 WEB-BASED DESIGN ● FALL 2010

24. AR340 WEB-BASED DESIGN ● FALL 2010

25. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity

26. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
Connects related or equivalent content

27. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Connects related or equivalent content
Provides consistency

28. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Connects related or equivalent content
Provides consistency
Creates unity

29. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Connects related or equivalent content
Provides consistency
Creates unity
1

30. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Connects related or equivalent content
Provides consistency
Creates unity
1
2

31. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Connects related or equivalent content
Provides consistency
Creates unity
1
3
2

32. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Connects related or equivalent content
Provides consistency
Creates unity
1
3
2
4

33. AR340 WEB-BASED DESIGN ● FALL 2010

34. AR340 WEB-BASED DESIGN ● FALL 2010

35. AR340 WEB-BASED DESIGN ● FALL 2010

36. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity

37. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
Creates a visual flow

38. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Creates a visual flow
Connects elements

39. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Creates a visual flow
Connects elements
Imposes order &
control

40. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Creates a visual flow
Connects elements
Imposes order &
control
1

41. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Creates a visual flow
Connects elements
1
Imposes order &
control
2

42. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Creates a visual flow
Connects elements
1
Imposes order &
control
2
3

43. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Creates a visual flow
Connects elements
1
Imposes order &
control
2
3
4

44. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
•
Creates a visual flow
Connects elements
1
Imposes order &
control
2
3
4
5

45. AR340 WEB-BASED DESIGN ● FALL 2010

46. AR340 WEB-BASED DESIGN ● FALL 2010

47. AR340 WEB-BASED DESIGN ● FALL 2010

48. AR340 WEB-BASED DESIGN ● FALL 2010

49. AR340 WEB-BASED DESIGN ● FALL 2010

50. AR340 WEB-BASED DESIGN ● FALL 2010

51. AR340 WEB-BASED DESIGN ● FALL 2010

52. AR340 WEB-BASED DESIGN ● FALL 2010

53. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity

54. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
Connects elements

55. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Connects elements
Creates visual order
and logic

56. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Connects elements
Creates visual order
and logic
1

57. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Connects elements
Creates visual order
and logic
1
2

58. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
Contrast, Repetition, Alignment, Proximity
•
•
Connects elements
Creates visual order
and logic
1
2
3

59. AR340 WEB-BASED DESIGN ● FALL 2010

60. AR340 WEB-BASED DESIGN ● FALL 2010

61. AR340 WEB-BASED DESIGN ● FALL 2010

62. AR340 WEB-BASED DESIGN ● FALL 2010

63. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
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.

64. 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.

65. AR340 WEB-BASED DESIGN ● FALL 2010

66. AR340 WEB-BASED DESIGN ● FALL 2010

67. AR340 WEB-BASED DESIGN ● FALL 2010

69. AR340 WEB-BASED DESIGN ● FALL 2010

72. AR340 WEB-BASED DESIGN ● FALL 2010