09: good design is crap
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/1.jpg)
Introduction to Interactive Media
09: Good Design is CRAP
![Page 2: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/2.jpg)
Introduction to Interactive Media
What is CRAP
• Crap stands for – Contrast– Repetition– Alignment – Proximity
• Guiding principles of good design.
![Page 3: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/3.jpg)
Introduction to Interactive Media
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.
![Page 4: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/4.jpg)
Introduction to Interactive Media
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.
![Page 5: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/5.jpg)
Introduction to Interactive Media
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.
![Page 6: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/6.jpg)
Introduction to Interactive Media
Design Principle #1: Proximity
• Things that are related should be grouped together.
• Things that are not related should not be grouped together.
![Page 7: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/7.jpg)
Introduction to Interactive Media
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.
![Page 8: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/8.jpg)
Introduction to Interactive Media
Proximity ExampleNotice 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.
![Page 9: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/9.jpg)
Introduction to Interactive Media
Bad Proximity Example
Original header graphic
![Page 10: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/10.jpg)
Introduction to Interactive Media
Put Related Content Together
original header graphic
modified header graphic
![Page 11: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/11.jpg)
Introduction to Interactive Media
Put Related Content Together
modified header graphic
explanation of modifications
![Page 12: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/12.jpg)
Introduction to Interactive Media
![Page 13: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/13.jpg)
Introduction to Interactive Media
![Page 14: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/14.jpg)
Introduction to Interactive Media
![Page 15: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/15.jpg)
Introduction to Interactive Media
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
![Page 16: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/16.jpg)
Introduction to Interactive Media
![Page 17: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/17.jpg)
Introduction to Interactive Media
![Page 18: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/18.jpg)
Introduction to Interactive Media
![Page 19: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/19.jpg)
Introduction to Interactive Media
![Page 20: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/20.jpg)
Introduction to Interactive Media
Design Principle #2: Alignment
• visual elements should line up in straight lines, horizontal or vertical
• straight lines give a more organized appearance
![Page 21: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/21.jpg)
Introduction to Interactive Media
![Page 22: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/22.jpg)
Introduction to Interactive Media
![Page 23: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/23.jpg)
Introduction to Interactive Media
![Page 24: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/24.jpg)
Introduction to Interactive Media
![Page 25: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/25.jpg)
Introduction to Interactive Media
![Page 26: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/26.jpg)
Introduction to Interactive Media
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:
![Page 27: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/27.jpg)
Introduction to Interactive Media
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
![Page 28: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/28.jpg)
Introduction to Interactive Media
Bad Repetition
![Page 29: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/29.jpg)
Introduction to Interactive Media
Good Repetition
![Page 30: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/30.jpg)
Introduction to Interactive Media
![Page 31: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/31.jpg)
Introduction to Interactive Media
Good Repetition
everything with the same purpose/importance looks the same – fonts, colors, icons
![Page 32: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/32.jpg)
Introduction to Interactive Media
Good Repetition
• Repetition allows us to focus on what is different.
![Page 33: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/33.jpg)
Introduction to Interactive Media
Good Repetition
![Page 34: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/34.jpg)
Introduction to Interactive Media
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
![Page 35: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/35.jpg)
Introduction to Interactive Media
Bad Contrast
![Page 36: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/36.jpg)
Introduction to Interactive Media
Bad Contrast
![Page 37: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/37.jpg)
Introduction to Interactive Media
Bad Contrast
![Page 38: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/38.jpg)
Introduction to Interactive Media
Bad Contrast - Redesign
![Page 39: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/39.jpg)
Introduction to Interactive Media
Good Contrast
![Page 40: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/40.jpg)
Introduction to Interactive Media
Good Contrast
![Page 41: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/41.jpg)
Introduction to Interactive Media
LET’S DO A LITTLE CRAP ANALYSIS
![Page 42: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/42.jpg)
Introduction to Interactive Media
![Page 43: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/43.jpg)
Introduction to Interactive Media
![Page 44: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/44.jpg)
Introduction to Interactive Media
![Page 45: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/45.jpg)
Introduction to Interactive Media
CRAP Recap
• the four principles you should consider to improve your design are:– proximity– alignment– repetition– contrast
![Page 46: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/46.jpg)
Introduction to Interactive Media
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
![Page 47: 09: Good Design is CRAP](https://reader035.vdocument.in/reader035/viewer/2022081503/56814ecd550346895dbc6afd/html5/thumbnails/47.jpg)
Introduction to Interactive Media
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