good design comes from... c.r.a.p

106
? Good design comes from…

Upload: brian-treese

Post on 13-Apr-2017

140 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Good Design Comes From... C.R.A.P

?Good design comes from…

Page 2: Good Design Comes From... C.R.A.P

Good design comes from…

CRAP

Page 3: Good Design Comes From... C.R.A.P

C is for…

contrast

Page 4: Good Design Comes From... C.R.A.P

R is for…

repetition

Page 5: Good Design Comes From... C.R.A.P

A is for…

alignment

Page 6: Good Design Comes From... C.R.A.P

P is for…

proximity

Page 7: Good Design Comes From... C.R.A.P

contrast

Page 8: Good Design Comes From... C.R.A.P

Don’t be afraid to make different items very different

contrast

Page 9: Good Design Comes From... C.R.A.P

This is too close (30pt)

This is too close (28pt)

contrast

Page 10: Good Design Comes From... C.R.A.P

This is better! (40pt)

This is better! (24pt)

contrast

Page 11: Good Design Comes From... C.R.A.P

Take extra care with backgrounds

contrast

Page 12: Good Design Comes From... C.R.A.P

contrast

This is horrible

Page 13: Good Design Comes From... C.R.A.P

contrast

This is pretty bad too

Page 14: Good Design Comes From... C.R.A.P

contrast

This is much better!

Page 15: Good Design Comes From... C.R.A.P

Using different typefaces can enhance contrast

contrast

Page 16: Good Design Comes From... C.R.A.P

This is too close (Garamond)

This is too close (Baskerville Old Face)

contrast

Page 17: Good Design Comes From... C.R.A.P

This is better! (Gotham Black)

This is better!(Century Gothic)

contrast

Page 18: Good Design Comes From... C.R.A.P

repetition

Page 19: Good Design Comes From... C.R.A.P

Makes a design easier to navigate and use

repetition

Page 20: Good Design Comes From... C.R.A.P

Color, shape, texture, line thickness, size, etc.

repetition

Page 21: Good Design Comes From... C.R.A.P

bad!

Page 22: Good Design Comes From... C.R.A.P
Page 23: Good Design Comes From... C.R.A.P
Page 24: Good Design Comes From... C.R.A.P

good!

Page 25: Good Design Comes From... C.R.A.P
Page 26: Good Design Comes From... C.R.A.P
Page 27: Good Design Comes From... C.R.A.P
Page 28: Good Design Comes From... C.R.A.P

alignment

Page 29: Good Design Comes From... C.R.A.P

Helps create a connection between related items

alignment

Page 30: Good Design Comes From... C.R.A.P

Nothing should be placed arbitrarily

alignment

Page 31: Good Design Comes From... C.R.A.P

bad!

Page 32: Good Design Comes From... C.R.A.P
Page 33: Good Design Comes From... C.R.A.P
Page 34: Good Design Comes From... C.R.A.P
Page 35: Good Design Comes From... C.R.A.P

good!

Page 36: Good Design Comes From... C.R.A.P
Page 37: Good Design Comes From... C.R.A.P
Page 38: Good Design Comes From... C.R.A.P
Page 39: Good Design Comes From... C.R.A.P

proximity

Page 40: Good Design Comes From... C.R.A.P

Related items should be grouped together

proximity

Page 41: Good Design Comes From... C.R.A.P

Separate items require space to communicate their difference

proximity

Page 42: Good Design Comes From... C.R.A.P

bad!

Page 43: Good Design Comes From... C.R.A.P
Page 44: Good Design Comes From... C.R.A.P
Page 45: Good Design Comes From... C.R.A.P
Page 46: Good Design Comes From... C.R.A.P

good!

Page 47: Good Design Comes From... C.R.A.P
Page 48: Good Design Comes From... C.R.A.P
Page 49: Good Design Comes From... C.R.A.P
Page 50: Good Design Comes From... C.R.A.P

Going beyondthe big four

beyond

Page 51: Good Design Comes From... C.R.A.P

grid

Page 52: Good Design Comes From... C.R.A.P

gridThe invisible glue that holds a design together

Page 53: Good Design Comes From... C.R.A.P

gridThey help establish rhythm throughout

Page 54: Good Design Comes From... C.R.A.P

gridThey help define proportion

Page 55: Good Design Comes From... C.R.A.P

no grid

Page 56: Good Design Comes From... C.R.A.P
Page 57: Good Design Comes From... C.R.A.P

using grid

Page 58: Good Design Comes From... C.R.A.P
Page 59: Good Design Comes From... C.R.A.P
Page 60: Good Design Comes From... C.R.A.P

typography

Page 61: Good Design Comes From... C.R.A.P

typographyThe biggest concern when it comes to web design

Page 62: Good Design Comes From... C.R.A.P

typography

Keep it simple

Page 63: Good Design Comes From... C.R.A.P

typography

Don’t use more than three different fonts

Page 64: Good Design Comes From... C.R.A.P

typography

Keep line length between 45-75characters

Page 65: Good Design Comes From... C.R.A.P

typography

Use adequate line height

Page 66: Good Design Comes From... C.R.A.P

too many

fonts

Page 67: Good Design Comes From... C.R.A.P
Page 68: Good Design Comes From... C.R.A.P

1

Page 69: Good Design Comes From... C.R.A.P

2

Page 70: Good Design Comes From... C.R.A.P

3

Page 71: Good Design Comes From... C.R.A.P

4

Page 72: Good Design Comes From... C.R.A.P

5

Page 73: Good Design Comes From... C.R.A.P

6

Page 74: Good Design Comes From... C.R.A.P

line length

too long

Page 75: Good Design Comes From... C.R.A.P
Page 76: Good Design Comes From... C.R.A.P

line height

too tight

Page 77: Good Design Comes From... C.R.A.P
Page 78: Good Design Comes From... C.R.A.P

beautiful

type

Page 79: Good Design Comes From... C.R.A.P
Page 80: Good Design Comes From... C.R.A.P
Page 81: Good Design Comes From... C.R.A.P
Page 82: Good Design Comes From... C.R.A.P

color

Page 83: Good Design Comes From... C.R.A.P

colorDon’t use too many unless you know what you’re doing

Page 84: Good Design Comes From... C.R.A.P

colorCareful, colors have different meanings in different cultures

Page 85: Good Design Comes From... C.R.A.P

colorBe wary of contrast

Page 86: Good Design Comes From... C.R.A.P

colorDon’t use as the only method to convey meaning

Page 87: Good Design Comes From... C.R.A.P

color

Keep it simple

Page 88: Good Design Comes From... C.R.A.P

bad!

Page 89: Good Design Comes From... C.R.A.P
Page 90: Good Design Comes From... C.R.A.P
Page 91: Good Design Comes From... C.R.A.P
Page 92: Good Design Comes From... C.R.A.P
Page 93: Good Design Comes From... C.R.A.P

good!

Page 94: Good Design Comes From... C.R.A.P
Page 95: Good Design Comes From... C.R.A.P
Page 96: Good Design Comes From... C.R.A.P
Page 97: Good Design Comes From... C.R.A.P

craigslist

Page 98: Good Design Comes From... C.R.A.P
Page 99: Good Design Comes From... C.R.A.P
Page 100: Good Design Comes From... C.R.A.P
Page 101: Good Design Comes From... C.R.A.P
Page 102: Good Design Comes From... C.R.A.P

resources

Page 103: Good Design Comes From... C.R.A.P

http://styleguides.io/examples.html

Page 104: Good Design Comes From... C.R.A.P

http://www.awwwards.com/

Page 105: Good Design Comes From... C.R.A.P

http://line25.com/

Page 106: Good Design Comes From... C.R.A.P