good design comes from... c.r.a.p
TRANSCRIPT
![Page 1: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/1.jpg)
?Good design comes from…
![Page 2: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/2.jpg)
Good design comes from…
CRAP
![Page 3: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/3.jpg)
C is for…
contrast
![Page 4: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/4.jpg)
R is for…
repetition
![Page 5: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/5.jpg)
A is for…
alignment
![Page 6: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/6.jpg)
P is for…
proximity
![Page 7: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/7.jpg)
contrast
![Page 8: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/8.jpg)
Don’t be afraid to make different items very different
contrast
![Page 9: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/9.jpg)
This is too close (30pt)
This is too close (28pt)
contrast
![Page 10: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/10.jpg)
This is better! (40pt)
This is better! (24pt)
contrast
![Page 11: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/11.jpg)
Take extra care with backgrounds
contrast
![Page 12: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/12.jpg)
contrast
This is horrible
![Page 13: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/13.jpg)
contrast
This is pretty bad too
![Page 14: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/14.jpg)
contrast
This is much better!
![Page 15: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/15.jpg)
Using different typefaces can enhance contrast
contrast
![Page 16: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/16.jpg)
This is too close (Garamond)
This is too close (Baskerville Old Face)
contrast
![Page 17: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/17.jpg)
This is better! (Gotham Black)
This is better!(Century Gothic)
contrast
![Page 18: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/18.jpg)
repetition
![Page 19: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/19.jpg)
Makes a design easier to navigate and use
repetition
![Page 20: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/20.jpg)
Color, shape, texture, line thickness, size, etc.
repetition
![Page 21: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/21.jpg)
bad!
![Page 22: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/22.jpg)
![Page 23: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/23.jpg)
![Page 24: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/24.jpg)
good!
![Page 25: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/25.jpg)
![Page 26: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/26.jpg)
![Page 27: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/27.jpg)
![Page 28: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/28.jpg)
alignment
![Page 29: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/29.jpg)
Helps create a connection between related items
alignment
![Page 30: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/30.jpg)
Nothing should be placed arbitrarily
alignment
![Page 31: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/31.jpg)
bad!
![Page 32: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/32.jpg)
![Page 33: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/33.jpg)
![Page 34: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/34.jpg)
![Page 35: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/35.jpg)
good!
![Page 36: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/36.jpg)
![Page 37: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/37.jpg)
![Page 38: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/38.jpg)
![Page 39: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/39.jpg)
proximity
![Page 40: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/40.jpg)
Related items should be grouped together
proximity
![Page 41: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/41.jpg)
Separate items require space to communicate their difference
proximity
![Page 42: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/42.jpg)
bad!
![Page 43: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/43.jpg)
![Page 44: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/44.jpg)
![Page 45: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/45.jpg)
![Page 46: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/46.jpg)
good!
![Page 47: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/47.jpg)
![Page 48: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/48.jpg)
![Page 49: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/49.jpg)
![Page 50: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/50.jpg)
Going beyondthe big four
beyond
![Page 51: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/51.jpg)
grid
![Page 52: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/52.jpg)
gridThe invisible glue that holds a design together
![Page 53: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/53.jpg)
gridThey help establish rhythm throughout
![Page 54: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/54.jpg)
gridThey help define proportion
![Page 55: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/55.jpg)
no grid
![Page 56: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/56.jpg)
![Page 57: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/57.jpg)
using grid
![Page 58: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/58.jpg)
![Page 59: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/59.jpg)
![Page 60: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/60.jpg)
typography
![Page 61: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/61.jpg)
typographyThe biggest concern when it comes to web design
![Page 62: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/62.jpg)
typography
Keep it simple
![Page 63: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/63.jpg)
typography
Don’t use more than three different fonts
![Page 64: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/64.jpg)
typography
Keep line length between 45-75characters
![Page 65: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/65.jpg)
typography
Use adequate line height
![Page 66: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/66.jpg)
too many
fonts
![Page 67: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/67.jpg)
![Page 68: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/68.jpg)
1
![Page 69: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/69.jpg)
2
![Page 70: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/70.jpg)
3
![Page 71: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/71.jpg)
4
![Page 72: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/72.jpg)
5
![Page 73: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/73.jpg)
6
![Page 74: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/74.jpg)
line length
too long
![Page 75: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/75.jpg)
![Page 76: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/76.jpg)
line height
too tight
![Page 77: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/77.jpg)
![Page 78: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/78.jpg)
beautiful
type
![Page 79: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/79.jpg)
![Page 80: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/80.jpg)
![Page 81: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/81.jpg)
![Page 82: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/82.jpg)
color
![Page 83: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/83.jpg)
colorDon’t use too many unless you know what you’re doing
![Page 84: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/84.jpg)
colorCareful, colors have different meanings in different cultures
![Page 85: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/85.jpg)
colorBe wary of contrast
![Page 86: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/86.jpg)
colorDon’t use as the only method to convey meaning
![Page 87: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/87.jpg)
color
Keep it simple
![Page 88: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/88.jpg)
bad!
![Page 89: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/89.jpg)
![Page 90: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/90.jpg)
![Page 91: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/91.jpg)
![Page 92: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/92.jpg)
![Page 93: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/93.jpg)
good!
![Page 94: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/94.jpg)
![Page 95: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/95.jpg)
![Page 96: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/96.jpg)
![Page 97: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/97.jpg)
craigslist
![Page 98: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/98.jpg)
![Page 99: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/99.jpg)
![Page 100: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/100.jpg)
![Page 101: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/101.jpg)
![Page 102: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/102.jpg)
resources
![Page 103: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/103.jpg)
http://styleguides.io/examples.html
![Page 104: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/104.jpg)
http://www.awwwards.com/
![Page 105: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/105.jpg)
http://line25.com/
![Page 106: Good Design Comes From... C.R.A.P](https://reader038.vdocuments.us/reader038/viewer/2022110108/58eef8ba1a28ab31748b4617/html5/thumbnails/106.jpg)