?Good design comes from…

Good design comes from…

CRAP

C is for…

contrast

R is for…

repetition

A is for…

alignment

P is for…

proximity

contrast

Don’t be afraid to make different items very different

contrast

This is too close (30pt)

This is too close (28pt)

contrast

This is better! (40pt)

This is better! (24pt)

contrast

Take extra care with backgrounds

contrast

contrast

This is horrible

contrast

This is pretty bad too

contrast

This is much better!

Using different typefaces can enhance contrast

contrast

This is too close (Garamond)

This is too close (Baskerville Old Face)

contrast

This is better! (Gotham Black)

This is better!(Century Gothic)

contrast

repetition

Makes a design easier to navigate and use

repetition

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

repetition

bad!

good!

alignment

Helps create a connection between related items

alignment

Nothing should be placed arbitrarily

alignment

bad!

good!

proximity

Related items should be grouped together

proximity

Separate items require space to communicate their difference

proximity

bad!

good!

Going beyondthe big four

beyond

grid

gridThe invisible glue that holds a design together

gridThey help establish rhythm throughout

gridThey help define proportion

no grid

using grid

typography

typographyThe biggest concern when it comes to web design

typography

Keep it simple

typography

Don’t use more than three different fonts

typography

Keep line length between 45-75characters

typography

Use adequate line height

too many

fonts

1

2

3

4

5

6

line length

too long

line height

too tight

beautiful

type

color

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

colorCareful, colors have different meanings in different cultures

colorBe wary of contrast

colorDon’t use as the only method to convey meaning

color

Keep it simple

bad!

good!

craigslist

resources

http://styleguides.io/examples.html

http://www.awwwards.com/

http://line25.com/