CARP stands for Contrast, Alignment, Repetition and Proximity. Using these four principles will help you design content that stands out and is effective.

 

Contrast

Things that look different are different.

• Items on the page look different from one another
• Helps the reader differentiate more important information from less important information

 

 

In the “Good Contrast” example above, it’s easy to see the contrast. “Good” is orange and in a-serif font (a font with no little feet on the letters), and “Contrast” is grey and in a sans serif font. Both words look distinctly different.

 

 

In the “Bad Contrast” example above, the contrast is harder to see. The only difference between “Bad” and “Contrast” is that “Bad” is in black and “Contrast” is in grey. Since the colors are so similar, neither word stands out from the other.

 

 

Contrast can be created in many different ways, but it’s important that the contrast is distinct and obvious.

 

 

Alignment

Things should line up.

• Items on the page line up with each other
• Creates consistency
• Unifies and organizes the content

 

 

In the “Good Alignment” example, the text creates the illusion of a hard left line even though there isn’t an actual line, and the indented text is clearly part of its own category.

 

 

In the “Bad Alignment” example, everything looks like it was haphazardly thrown onto the page.

 

Repetition

Things that are alike should look alike.

• Design elements are repeated
• Creates consistency
• Helps the reader recognize similar items

 

 

In the “Good Repetition” example, both of the major headings look the same, both of the minor headings look the same, and the body text is the same throughout.

 

 

In the “Bad Repetition” example, each heading looks completely different and the body text switches between a serif and a sans-serif font.

 

Proximity

Items that are near each other go together.

• Items on the page are close together
• Helps the reader associate related items with each other

 

 

In the “Good Proximity” example, the heading is close to the body text it goes with, and the image is near the section that refers to it.

 

 

 

In the “Bad Proximity” example, the image is far from the text that refers to it, and the heading is closer to the text of the previous section than the section it goes with.

 

Remember, if you don’t use CARP, your design will be crap.