11
AND NOW SOME C.R.A.P.

C.R.A.P

Embed Size (px)

Citation preview

Page 1: C.R.A.P

AND NOW SOME C.R.A.P.

Page 2: C.R.A.P

As funny as it is…

… making CRAP jokes, it really is a foundational premise of design, and it’s deeply important (and thanks to our sense of humor usually quite memorable). The letters, of course, stand for:

ContrastRepetitionAlignmentProximity

Page 3: C.R.A.P

You read about it

So I’m going to give these to you in my words, along with a few quick examples, so you can get a good sense of how it works.

Page 4: C.R.A.P

Contrast

Basically stated, contrast means that things that are similar look similar but things that are different look clearly different. This keeps your reader from becoming confused and creating relationships that aren’t present.

It comes, of course, from literal contrast, the light-to-dark or black-to-white of an image. In design it often ends up being about color values.

Page 5: C.R.A.P

This image is a great example, and it is also a hyperlink to a

great blog entry on contrast, if you want to learn more.

Page 6: C.R.A.P

Repetition

Maybe the easiest of these four concepts to define, repetition is, just as you’d guess, repeating something– a color, a logo, a typeface, a type style.

It unifies and organizes.

Page 7: C.R.A.P
Page 8: C.R.A.P

Alignment

Alignment is about positioning on a page. Nothing should be put on haphazardly. There should be a reason and a measurement that guides where things are placed in relation to each other.

Page 9: C.R.A.P

The image to the right links to a post that has some cool

reflection on alignment. And there’s all kinds of alignment going on with the new Windows 8 start page.

Page 10: C.R.A.P

Proximity

Proximity is very similar in theory to alignment, but it’s more about grouping and use of white space.

Basically: similar things are grouped together, different things require space.

Page 11: C.R.A.P