C.R.A.P.

C.R.A.P. is an acronym for contrast, repetition, alignment, and proximity; these are the four foundational principles of design. Any layout. Any type of media. Anyone working on layouts will greatly benefit from these visual guides. In my opinion, C.R.A.P. also makes for great collaboration in a team setting. If we’re all speaking the same visual language, the best outcome should be expected. Feeback is meaningful and precise. No more direction based on subjective opinions. Let’s explore this C.R.A.P. a bit more below by examing a recent print ad layout I made for TanDeck.

Contrast

The purpose of contrast is to make certain elements stand out and create emphasis. What are the most important elements that you want your target audience to notice first? In our example here, it’s the logo and headline combo. The white space around these two elements make them the most important items…especially because they are at the top & left. Contrast can be utilized in a variety of ways, such as size, color, font, shape, and emphasis. Here are some examples of the ways contrast can be achieved:

Size: Large text for headings and small text for body—just make sure there is significant difference in size.

Color: Differing elements of a document can be different colors, but be sure to use color consistently throughout the design.

Font: Play with typography! Typically, a document should only have 2 different fonts: one serif (i.e. Times New Roman) and one sans serif (i.e. Arial). Make sure the font fits the tone of your piece.

Shape: Contrast with varying shapes. For example, you can make a certain section stand out by featuring it in a box or a circle.

Spacing: Experiment with white space around a logo or element you want emphasized. A designer will often hear, “make the logo bigger”. But that’s not always the best way to make it stand out. Often times, space around the logo will give it way more contrast.

Repetition

Repetition can be used to create a sense of identity and unity in a document. “Identity markers” are often used repetitiously, such as logos, headings, borders, colors, and spacing. The repetition of certain elements in a document can help “brand” the information. People by nature, like and prefer repetition.

Looking at the five value propositions of the print ad, we notice the list of five is very uniform. Icon and text repeat. The spacing inbetween all items are identical. Sub-head and paragraph text also follow the rule.

Alignment

Alignment creates the structure and balance of a layout. A clear sense of alignment also establishes the order and organization of a layout’s various elements, so it’s important to align everything intentionally. If alignment is lacking, it will cause the piece to appear messy, which will cause confusion for the end user.

One examle of alignment in this ad, is the five value props being left aligned to themselves and the overview paragraph. Some might be tempted to make the paragraph right aligned since it’s on the right rail. That would only fight the rules of alignment.

Proximity

Proximity is a way to organize content. Ideas and images that are associated should be placed together. If they are not in close proximity, the end user can become confused. Let’s avoid that!

In this layout, we have two sets of color swatches. They are related to each other, so we should keep them near each other. Also, the swatch names are over the top of the chips. They could also be on the bottom, as long as it’s clear which goes together.

And that’s a wrap on all of this C.R.A.P.