CRAP contrast, repetition, alignment, proximity Slide deck by Saul Greenberg.  Permission is granted to use this for non-c...
 
 
 
CRAP <ul><li>C ontrast   </li></ul><ul><li>R epetition  </li></ul><ul><li>A lignment  </li></ul><ul><li>P roximity  </li><...
CRAP <ul><li>C ontrast   </li></ul><ul><ul><li>make different things different </li></ul></ul><ul><ul><li>brings out domin...
CRAP <ul><li>C ontrast   </li></ul><ul><li>R epetition  </li></ul><ul><ul><li>repeat design throughout the interface </li>...
CRAP <ul><li>C ontrast   </li></ul><ul><li>R epetition   </li></ul><ul><li>A lignment   </li></ul><ul><ul><li>creates a vi...
CRAP <ul><li>C ontrast   </li></ul><ul><li>R epetition  </li></ul><ul><li>A lignment  </li></ul><ul><li>P roximity   </li>...
Where does your eye go? <ul><li>CRAP combines to give you cues of how to read the graphic </li></ul>Robin Williams Non-Des...
Where does your eye go? <ul><li>Boxes do not create a strong structure </li></ul><ul><ul><li>CRAP fixes it </li></ul></ul>...
Where does your eye go? <ul><li>Some contrast and weak proximity </li></ul><ul><ul><li>ambiguous structure </li></ul></ul>...
Where does your eye go? <ul><li>Strong proximity (left/right split) </li></ul><ul><ul><li>unambiguous </li></ul></ul>Robin...
Where does your eye go? <ul><li>the strength of proximity </li></ul><ul><ul><li>alignment </li></ul></ul><ul><ul><li>white...
 
 
Original
Proximity
Alignment
Contrast
Repetition
<ul><li>Terrible alignment  </li></ul><ul><ul><li>no flow </li></ul></ul><ul><li>Poor contrast  </li></ul><ul><ul><li>cann...
IBM's Aptiva Communication Center No regard for order and organization
Haphazard layout Mullet & Sano
Repairing the layout Mullet & Sano
Spatial Tension Mullet & Sano
Using explicit structure as a crutch Mullet & Sano
Redesigning a layout using alignment and factoring  Mullet & Sano
Upcoming SlideShare
Loading in …5
×

Crap

1,015
-1

Published on

sdfsdf

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

No Downloads
Views
Total Views
1,015
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Crap

  1. 1. CRAP contrast, repetition, alignment, proximity Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
  2. 5. CRAP <ul><li>C ontrast </li></ul><ul><li>R epetition </li></ul><ul><li>A lignment </li></ul><ul><li>P roximity </li></ul>Robin Williams Non-Designers Design Book, Peachpit Press
  3. 6. CRAP <ul><li>C ontrast </li></ul><ul><ul><li>make different things different </li></ul></ul><ul><ul><li>brings out dominant elements </li></ul></ul><ul><ul><li>mutes lesser elements </li></ul></ul><ul><ul><li>creates dynamism </li></ul></ul><ul><li>R epetition </li></ul><ul><li>A lignment </li></ul><ul><li>P roximity </li></ul>Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3 4 5
  4. 7. CRAP <ul><li>C ontrast </li></ul><ul><li>R epetition </li></ul><ul><ul><li>repeat design throughout the interface </li></ul></ul><ul><ul><li>consistency </li></ul></ul><ul><ul><li>creates unity </li></ul></ul><ul><li>A lignment </li></ul><ul><li>P roximity </li></ul>Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3 4
  5. 8. CRAP <ul><li>C ontrast </li></ul><ul><li>R epetition </li></ul><ul><li>A lignment </li></ul><ul><ul><li>creates a visual flow </li></ul></ul><ul><ul><li>visually connects elements </li></ul></ul><ul><li>P roximity </li></ul>Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3 4
  6. 9. CRAP <ul><li>C ontrast </li></ul><ul><li>R epetition </li></ul><ul><li>A lignment </li></ul><ul><li>P roximity </li></ul><ul><ul><li>groups related elements </li></ul></ul><ul><ul><li>separates unrelated ones </li></ul></ul>Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3
  7. 10. Where does your eye go? <ul><li>CRAP combines to give you cues of how to read the graphic </li></ul>Robin Williams Non-Designers Design Book, Peachpit Press title subtext three points main point sub point
  8. 11. Where does your eye go? <ul><li>Boxes do not create a strong structure </li></ul><ul><ul><li>CRAP fixes it </li></ul></ul>Robin Williams Non-Designers Design Book, Peachpit Press <ul><li> </li></ul><ul><li> </li></ul>
  9. 12. Where does your eye go? <ul><li>Some contrast and weak proximity </li></ul><ul><ul><li>ambiguous structure </li></ul></ul><ul><ul><li>interleaved items </li></ul></ul>Robin Williams Non-Designers Design Book, Peachpit Press <ul><li> </li></ul>
  10. 13. Where does your eye go? <ul><li>Strong proximity (left/right split) </li></ul><ul><ul><li>unambiguous </li></ul></ul>Robin Williams Non-Designers Design Book, Peachpit Press <ul><li> </li></ul>
  11. 14. Where does your eye go? <ul><li>the strength of proximity </li></ul><ul><ul><li>alignment </li></ul></ul><ul><ul><li>white (negative) space </li></ul></ul><ul><ul><li>explicit structure a poor replacement </li></ul></ul>Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: <ul><li> </li></ul>Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: <ul><li> </li></ul>Mmmm: Mmmm: Mmmm: Mmmm: Mmmm:
  12. 17. Original
  13. 18. Proximity
  14. 19. Alignment
  15. 20. Contrast
  16. 21. Repetition
  17. 22. <ul><li>Terrible alignment </li></ul><ul><ul><li>no flow </li></ul></ul><ul><li>Poor contrast </li></ul><ul><ul><li>cannot distinguish colored labels from editable fields </li></ul></ul><ul><li>Poor repetition </li></ul><ul><ul><li>buttons do not look like buttons </li></ul></ul><ul><li>Poor explicit structure replaces proximity </li></ul><ul><ul><li>blocks compete with alignment </li></ul></ul>Webforms
  18. 23. IBM's Aptiva Communication Center No regard for order and organization
  19. 24. Haphazard layout Mullet & Sano
  20. 25. Repairing the layout Mullet & Sano
  21. 26. Spatial Tension Mullet & Sano
  22. 27. Using explicit structure as a crutch Mullet & Sano
  23. 28. Redesigning a layout using alignment and factoring Mullet & Sano
  1. A particular slide catching your eye?

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

×