4 basic design principles
2 likes1,488 views
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.
4 basic design principles
- 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
Editor's Notes
- #24: Summary (recap)