Good Design Comes From... C.R.A.P.
-
Upload
brian-treese -
Category
Design
-
view
140 -
download
0
Transcript of Good Design Comes From... C.R.A.P.
?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/