CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CRAP on the Web
The Good, the Bad, and the Ugly

Bruce Clary, McPherson Coll...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

“‘Design look’ is mentioned as a sign of Web
credibility almost twice as oft...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

“Good web design is about the character of the
content rather than the chara...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

“Good art sends a different message to everyone.
Good design sends the same ...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Principles of design
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Principles of design
•
•
•

Unity
Dominance/emphasis
Scale & proportion

•
•...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CRAP
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CRAP
Contrast
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CRAP
Contrast
Repetition
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CRAP
Contrast
Repetition
Alignment
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

CRAP
Contrast
Repetition
Alignment
Proximity
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 conte...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Distinguishes different con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Distinguishes different con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Distinguishes different con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Distinguishes different con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Distinguishes different con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Distinguishes different con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Distinguishes different con...
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

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

Contrast, Repetition, Alignment, Proximity

•

Connects related or equivalen...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Connects related or equival...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Connects related or equiv...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Connects related or equiv...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Connects related or equiv...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Connects related or equiv...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Connects related or equiv...
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

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

Contrast, Repetition, Alignment, Proximity

•
•
•

Creates a visual flow
Con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Creates a visual flow
Con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Creates a visual flow
Con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Creates a visual flow
Con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Creates a visual flow
Con...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•
•

Creates a visual flow
Con...
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
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

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

Contrast, Repetition, Alignment, Proximity

•
•

Connects elements
Creates v...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Connects elements
Creates v...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

Contrast, Repetition, Alignment, Proximity

•
•

Connects elements
Creates v...
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
AR340 WEB-BASED DESIGN ● FALL 2010
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

OK, so here goes…

CRAP is a simplified approach to design introduced by Rob...
CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION

OK, so here goes…
What kind of CRAP can you recognize
in the following web p...
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
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
C R A P On The  Web
Upcoming SlideShare
Loading in...5
×

C R A P On The Web

2,603

Published on

Contrast | Repetition | Alignment | Proximity

Published in: Education, Business, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,603
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
63
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

C R A P On The Web

  1. 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. 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. 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. 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. 5. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Principles of design
  6. 6. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Principles of design • • • Unity Dominance/emphasis Scale & proportion • • • Harmony Balance Rhythm
  7. 7. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP
  8. 8. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast
  9. 9. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition
  10. 10. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition Alignment
  11. 11. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION CRAP Contrast Repetition Alignment Proximity
  12. 12. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
  13. 13. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION
  14. 14. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  15. 15. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Distinguishes different content
  16. 16. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Distinguishes different content Brings out dominant elements and establishes focal points
  17. 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. 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. 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. 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. 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. 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. 23. AR340 WEB-BASED DESIGN ● FALL 2010
  24. 24. AR340 WEB-BASED DESIGN ● FALL 2010
  25. 25. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  26. 26. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Connects related or equivalent content
  27. 27. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects related or equivalent content Provides consistency
  28. 28. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity
  29. 29. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1
  30. 30. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 2
  31. 31. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Connects related or equivalent content Provides consistency Creates unity 1 3 2
  32. 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. 33. AR340 WEB-BASED DESIGN ● FALL 2010
  34. 34. AR340 WEB-BASED DESIGN ● FALL 2010
  35. 35. AR340 WEB-BASED DESIGN ● FALL 2010
  36. 36. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  37. 37. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Creates a visual flow
  38. 38. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Creates a visual flow Connects elements
  39. 39. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements Imposes order & control
  40. 40. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements Imposes order & control 1
  41. 41. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2
  42. 42. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • • Creates a visual flow Connects elements 1 Imposes order & control 2 3
  43. 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. 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. 45. AR340 WEB-BASED DESIGN ● FALL 2010
  46. 46. AR340 WEB-BASED DESIGN ● FALL 2010
  47. 47. AR340 WEB-BASED DESIGN ● FALL 2010
  48. 48. AR340 WEB-BASED DESIGN ● FALL 2010
  49. 49. AR340 WEB-BASED DESIGN ● FALL 2010
  50. 50. AR340 WEB-BASED DESIGN ● FALL 2010
  51. 51. AR340 WEB-BASED DESIGN ● FALL 2010
  52. 52. AR340 WEB-BASED DESIGN ● FALL 2010
  53. 53. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity
  54. 54. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • Connects elements
  55. 55. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic
  56. 56. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1
  57. 57. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1 2
  58. 58. CM350 WEB DESIGN FOR EFFECTIVE COMMUNICATION Contrast, Repetition, Alignment, Proximity • • Connects elements Creates visual order and logic 1 2 3
  59. 59. AR340 WEB-BASED DESIGN ● FALL 2010
  60. 60. AR340 WEB-BASED DESIGN ● FALL 2010
  61. 61. AR340 WEB-BASED DESIGN ● FALL 2010
  62. 62. AR340 WEB-BASED DESIGN ● FALL 2010
  63. 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. 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. 65. AR340 WEB-BASED DESIGN ● FALL 2010
  66. 66. AR340 WEB-BASED DESIGN ● FALL 2010
  67. 67. AR340 WEB-BASED DESIGN ● FALL 2010
  68. 68. AR340 WEB-BASED DESIGN ● FALL 2010
  69. 69. AR340 WEB-BASED DESIGN ● FALL 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×