CARP Four Principles of Design

CARP is… A design approach to the use of text and graphics described by Robin Williams and John Tollet. Typically, if you do not adhere to the CARP principles, you’ll end up with CRAP!

CARP, an acronym: C = contrast A = alignment R = repetition P = proximity

What is Contrast? Contrast occurs when two elements are different. The greater the difference is the greater the contrast. The key to working with contrast is to make sure the differences are obvious. Contrast adds interest to content and provides a means of emphasizing what is important in directing the reader's eye. On a page without contrast, the reader doesn't know where to look first or what is important. Contrast aids in readability by making headlines and subheadings stand out. It shows what is important by making smaller or lighter elements recede on the page to allow other elements to take center stage.

Contrast can be created with

How does Contrast draw your eyes in this example?

Example of bad contrast

Which of these exhibits better use of Contrast? How?

When is Contrast bad? There are times when you don't want contrast: a novel, a professional journal The reading process should not be interrupted by dramatically changing the look of text or other elements all the time.

Tips for Contrasting Fonts Contrast heavier weights with lighter weights within the same font SENTENCES WRITTEN IN ALL CAPS HAVE LITTLE CONTRAST AND ARE HARDER TO READ Contrast can also be achieved with italics or bold.

Contrast via Color This is a Bad Example of Contrast This Hurts My Eyes This is a Better Example of Contrast

What is Alignment? Alignment is the positioning of elements according to a line or pattern. Most commonly, this would be left, centered, or right alignment. Alignment helps unify and organize content. When content is well organized and appears clean, your message is better communicated.

Basic Text Alignments Left Alignment Center Alignment Right Alignment

Justified Alignment This paragraph has a justified alignment. Justified Text is stretched and provides both a strong left and right edge. Justified text must be used carefully, as it often leaves distracting spaces and “rivers” of whitespace in text. It’s probably best to avoid it except in thin columns, like newspaper layouts.

Tips for better alignment: Use the same alignment throughout content. Do not place anything on the page arbitrarily. Do not center align everything. Center aligning should be done consciously, not because you cannot think of anything else to do.

Bad Alignment

Better Alignment

What is Repetition? Repeating visual elements such as font type, background colors, shapes and texture helps to develop a good organization and a strong unity.

Lack of Repetition

Better Repetition

What is Proximity? Proximity refers to the relationship of items when they are close together. Two items that are close, appear to belong to each other. Group related items together When items are physically far from each other, they become visually disconnected

(Tragically) Bad Proximity

Better Proximity

How about an example pulling it all together in sequence?

Lack of CARP principles in use

Contrast applied

Alignment applied

Repetition applied

Proximity applied