The document discusses 4 basic design principles for effective communication: contrast, repetition, alignment, and proximity (CRAP). Contrast involves using differences in color, size, and shape to draw attention and show importance. Repetition makes similar elements look structured and unified. Alignment creates order by intentionally placing elements, while proximity groups related items and separates unrelated ones to build hierarchy. Following these CRAP principles leads to good visual design.

1. 4 Basic Design
Principles
June 2012

2. Good design communicate
• Effectively
• Efficiently
• Easy to digest
• Comfortable to read
• Even though it’s long and has so many info to
communicate

3. Good design is always CRAP
1. Contrast
2. Repetition
3. Alignment
4. Proximity

4. C.R.A.P.
#1 Contrast

5. C.R.A.P. Contrast
Different things should look
very DIFFERENT
• Grab Attention
• Show Importance

6. C.R.A.P. Contrast

7. C.R.A.P. Contrast
Color

8. C.R.A.P. Contrast
Size

9. C.R.A.P. Contrast
Shape

10. C.R.A.P.
#2. Repetition

11. C.R.A.P. Repetition
Similar things should look
SIMILAR
• Structure
• Unity
• Predictable

12. C.R.A.P. Repetition

13. C.R.A.P.
#3. Alignment

14. C.R.A.P. Alignment
Nothing should be placed on
the page arbitrarily.
• Create Order
• Look Clean

15. C.R.A.P. Alignment

16. C.R.A.P. Alignment

17. C.R.A.P. Alignment

18. C.R.A.P.
#4 Proximity

19. C.R.A.P. Proximity
Related things should put
TOGETHER
• Group related things
• Set unrelated apart
• Create Hierarchy

20. C.R.A.P. Proximity
WHITE SPACE is not your
enemy.

21. C.R.A.P. Proximity

22. C.R.A.P. Proximity

23. C.R.A.P.
CRAP to make good design
1. Contrast shows relative importance, grabs
attention.
2. Repetition attach meaning to new elements.
3. Alignment creates order.
4. Proximity creates hierarchy.

24. Further Reading
The
Non-Designer’s
Design Book
By Robin Williams

25. Further Reading
中文版
寫給大家的
平面設計書
羅蘋．威廉斯

26. Thank You.

27. Image Credits
• http://images5.fanpop.com/image/photos/29100000/Be-Different-
think-different-29142411-900-600.jpg
• http://alibuybuy-
img1011.stor.sinaapp.com/2010/11/7d26_repetition.jpg
• http://i3.sinaimg.cn/dy/c/p/2009-08-
20/U2596P1T1D18477378F21DT20090820172628.jpg
• http://2.bp.blogspot.com/-
h9uTHkcpUUM/TpXDQGGmftI/AAAAAAAAATc/mDW3TGu2KK8/s1
600/together.jpg