4 basic design principles

1,165 views
909 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,165
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Summary (recap)
  • 4 basic design principles

    1. 1. 4 Basic Design Principles June 2012
    2. 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. 3. Good design is always CRAP1. Contrast2. Repetition3. Alignment4. Proximity
    4. 4. C.R.A.P. #1 Contrast
    5. 5. C.R.A.P. Contrast Different things should look very DIFFERENT • Grab Attention • Show Importance
    6. 6. C.R.A.P. Contrast
    7. 7. C.R.A.P. Contrast Color
    8. 8. C.R.A.P. Contrast Size
    9. 9. C.R.A.P. Contrast Shape
    10. 10. C.R.A.P. #2. Repetition
    11. 11. C.R.A.P. Repetition Similar things should look SIMILAR • Structure • Unity • Predictable
    12. 12. C.R.A.P. Repetition
    13. 13. C.R.A.P. #3. Alignment
    14. 14. C.R.A.P. Alignment Nothing should be placed on the page arbitrarily. • Create Order • Look Clean
    15. 15. C.R.A.P. Alignment
    16. 16. C.R.A.P. Alignment
    17. 17. C.R.A.P. Alignment
    18. 18. C.R.A.P. #4 Proximity
    19. 19. C.R.A.P. Proximity Related things should put TOGETHER • Group related things • Set unrelated apart • Create Hierarchy
    20. 20. C.R.A.P. Proximity WHITE SPACE is not your enemy.
    21. 21. C.R.A.P. Proximity
    22. 22. C.R.A.P. Proximity
    23. 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. 24. Further Reading The Non-Designer’s Design Book By Robin Williams
    25. 25. Further Reading 中文版 寫給大家的 平面設計書 羅蘋.威廉斯
    26. 26. Thank You.
    27. 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

    ×