1 / 28

CRAP contrast, repetition, alignment, proximity

CRAP contrast, repetition, alignment, proximity. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press.

mandel
Download Presentation

CRAP contrast, repetition, alignment, proximity

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CRAPcontrast, repetition, alignment, proximity Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press 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.

  2. CRAP • Contrast • Repetition • Alignment • Proximity Robin Williams Non-Designers Design Book, Peachpit Press

  3. CRAP • Contrast • make different things different • brings out dominant elements • mutes lesser elements • creates dynamism • Repetition • Alignment • Proximity 1 2 3 4 5 Robin Williams Non-Designers Design Book, Peachpit Press

  4. CRAP • Contrast • Repetition • repeat design throughout the interface • consistency • creates unity • Alignment • Proximity 1 3 2 4 Robin Williams Non-Designers Design Book, Peachpit Press

  5. CRAP • Contrast • Repetition • Alignment • creates a visual flow • visually connects elements • Proximity 1 3 2 4 Robin Williams Non-Designers Design Book, Peachpit Press

  6. CRAP • Contrast • Repetition • Alignment • Proximity • groups related elements • separates unrelated ones 1 2 3 Robin Williams Non-Designers Design Book, Peachpit Press

  7. Where does your eye go? • CRAP combines to give you cues of how to read the graphic title subtext three points main point sub point Robin Williams Non-Designers Design Book, Peachpit Press

  8. Where does your eye go? • Boxes do not create a strong structure • CRAP fixes it Robin Williams Non-Designers Design Book, Peachpit Press

  9. Where does your eye go? • Some contrast and weak proximity • ambiguous structure • interleaved items Robin Williams Non-Designers Design Book, Peachpit Press

  10. Where does your eye go? • Strong proximity (left/right split) • unambiguous Robin Williams Non-Designers Design Book, Peachpit Press

  11. Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Where does your eye go? • the strength of proximity • alignment • white (negative) space • explicit structure a poor replacement

  12. Original

  13. Proximity

  14. Alignment

  15. Contrast

  16. Repetition

  17. Terrible alignment • no flow • Poor contrast • cannot distinguish colored labels from editable fields • Poor repetition • buttons do not look like buttons • Poor explicit structure replaces proximity • blocks compete with alignment Webforms

  18. No regard for order andorganization IBM's Aptiva Communication Center

  19. Haphazard layout Mullet & Sano

  20. Repairing the layout Mullet & Sano

  21. Spatial Tension Mullet & Sano

  22. Using explicit structure as a crutch Mullet & Sano

  23. Redesigning a layout using alignment and factoring Mullet & Sano

More Related