Contrast, repetition, alignment, and proximity (C.R.A.P.) are foundational principles of design that help organize information and prevent confusion. Contrast ensures different elements look distinct. Repetition unifies elements through consistent use of colors, logos, etc. Alignment positions elements purposefully on a page using measurements. Proximity groups similar elements and separates different ones using whitespace. These principles make designs more memorable and visually clear.

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

2. 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:
Contrast
Repetition
Alignment
Proximity

3. 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.

4. 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.

5. 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.

6. 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.

8. 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.

9. 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.

10. 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.