1 / 47

09: Good Design is CRAP

09: Good Design is CRAP. What is CRAP. Crap stands for Contrast Repetition Alignment Proximity Guiding principles of good design. Who invented CRAP?. The idea of CRAP was coined by Robin Williams in her book: “The Non-Designers Design Book” She applies principles to print media.

alpha
Download Presentation

09: Good Design is CRAP

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. 09: Good Design is CRAP

  2. What is CRAP • Crap stands for • Contrast • Repetition • Alignment • Proximity • Guiding principles of good design.

  3. Who invented CRAP? • The idea of CRAP was coined by Robin Williams in her book: “The Non-Designers Design Book” • She applies principles to print media.

  4. What is the CRAP philosophy? • William’s contends that understanding the CRAP principles and applying them to the piece you are creating will vastly improve the effectiveness of the piece you are creating.

  5. CRAP applied to design for the screen. • The CRAP principles can be applied to interactive digital media pieces as well as print. • In this lecture we will learn the CRAP principles and see how they are applied to interactive digital media interfaces.

  6. Design Principle #1: Proximity • Things that are related should be grouped together. • Things that are not related should not be grouped together.

  7. The use of a menu bar is an example of good proximity • Most web sites use a menu bar. This is an example of good proximity. All the navigation elements have a similar functionality so they are in close proximity.

  8. Proximity Example Notice how all the main navigation elements are in close proximity to each other along the top of the interface. Extra space has been deliberately added between the main navigation and the rest of the content on the page.

  9. Bad Proximity Example Original header graphic

  10. Put Related Content Together original header graphic modified header graphic

  11. Put Related Content Together modified header graphic explanation of modifications

  12. Consider Whitespace • a related concept to proximity is that of whitespace • whitespace refers to any empty space between visual elements • it is not necessarily white, but it will be if the background color is white

  13. Design Principle #2: Alignment • visual elements should line up in straight lines, horizontal or vertical • straight lines give a more organized appearance

  14. Alignment • as a general rule, left alignment work best – particularly for paragraphs of text • center alignment is terrible for paragraphs, but can work for things other than text • some examples of good center alignment:

  15. Design Principle #3: Repetition • visual elements that have the same purpose or level of importance should look the same • if there are too many different-looking things on a web page, it will not look like everything belongs on the same page • it will not look cohesive

  16. Bad Repetition

  17. Good Repetition

  18. Good Repetition everything with the same purpose/importance looks the same – fonts, colors, icons

  19. Good Repetition • Repetition allows us to focus on what is different.

  20. Good Repetition

  21. Design Principle #4: Contrast • visual elements with a different purpose or level of importance should appear different • this is the opposite of repetition • more important elements should be more prominent (larger, with stronger colors) than less important elements

  22. Bad Contrast

  23. Bad Contrast

  24. Bad Contrast

  25. Bad Contrast - Redesign

  26. Good Contrast

  27. Good Contrast

  28. LET’S DO A LITTLE CRAP ANALYSIS

  29. CRAP Recap • the four principles you should consider to improve your design are: • proximity • alignment • repetition • contrast

  30. CRAP Recap • proximity: visual elements that are related should be close together, and vice versa • use whitespace to separate elements • alignment: visual elements should be lined up in straight lines • left- and right-alignment are usually best • center-alignment can work sometimes, but not with paragraphs of text

  31. CRAP Recap • repetition: visual elements that have the same purpose or level of importance should look the same • this applies to fonts, colors, icons, etc. • repeated elements on a page will give it a sense of cohesion (unity) • contrast: visual elements with different purposes or levels of importance should appear different • the opposite of repetition

More Related