Download - Crap
![Page 1: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/1.jpg)
CRAPcontrast, 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
![Page 2: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/2.jpg)
![Page 3: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/3.jpg)
![Page 4: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/4.jpg)
![Page 5: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/5.jpg)
Saul Greenberg
CRAP
Contrast
Repetition
Alignment
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
![Page 6: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/6.jpg)
Saul Greenberg
CRAP
Contrast – make different things different– brings out dominant elements– mutes lesser elements– creates dynamism
Repetition
Alignment
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
1
2
3
4
5
![Page 7: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/7.jpg)
Saul Greenberg
CRAP
Contrast
Repetition – repeat design throughout the interface– consistency– creates unity
Alignment
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
1
2 3
4
![Page 8: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/8.jpg)
Saul Greenberg
CRAP
Contrast
Repetition
Alignment – creates a visual flow– visually connects elements
Proximity
Robin Williams Non-Designers Design Book, Peachpit Press
1
2
3
4
![Page 9: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/9.jpg)
Saul Greenberg
CRAP
Contrast
Repetition
Alignment
Proximity – groups related elements– separates unrelated ones
Robin Williams Non-Designers Design Book, Peachpit Press
1
2
3
![Page 10: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/10.jpg)
Saul Greenberg
Where does your eye go?
CRAP combines to give you cues of how to read the graphic
Robin Williams Non-Designers Design Book, Peachpit Press
title
subtext
three points
main point
sub point
![Page 11: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/11.jpg)
Saul Greenberg
Where does your eye go?
Boxes do not create a strong structure– CRAP fixes it
Robin Williams Non-Designers Design Book, Peachpit Press
![Page 12: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/12.jpg)
Saul Greenberg
Where does your eye go?
Some contrast and weak proximity– ambiguous structure– interleaved items
Robin Williams Non-Designers Design Book, Peachpit Press
![Page 13: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/13.jpg)
Saul Greenberg
Where does your eye go?
Strong proximity (left/right split)– unambiguous
Robin Williams Non-Designers Design Book, Peachpit Press
![Page 14: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/14.jpg)
Saul Greenberg
Where does your eye go?
the strength of proximity– alignment– white (negative) space– explicit structure a poor replacement
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
![Page 15: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/15.jpg)
![Page 16: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/16.jpg)
![Page 17: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/17.jpg)
Original
![Page 18: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/18.jpg)
Proximity
![Page 19: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/19.jpg)
Alignment
![Page 20: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/20.jpg)
Contrast
![Page 21: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/21.jpg)
Repetition
![Page 22: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/22.jpg)
Saul GreenbergWebforms
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
![Page 23: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/23.jpg)
IBM's Aptiva Communication Center
No regard for order and
organization
![Page 24: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/24.jpg)
Haphazard layout
Mullet & Sano
![Page 25: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/25.jpg)
Repairing the layout
Mullet & Sano
![Page 26: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/26.jpg)
Spatial Tension
Mullet & Sano
![Page 27: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/27.jpg)
Using explicit structure as a crutch
Mullet & Sano
![Page 28: Crap](https://reader033.vdocuments.us/reader033/viewer/2022061220/54867f44b4af9fdc3d8b477f/html5/thumbnails/28.jpg)
Redesigning a layout using alignment and factoring
Mullet & Sano