The Four Basic Principles C ontrast R epetition A lignment P roximity

Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter.

Proximity Items that are not related to each other should not be in close proximity. The closeness or lack of closeness indicates the relationship. Elements that are intellectually connected should be visually connected.

Proximity Example

What’s wrong with these cards?

Center Aligned, Proximal Info

Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated look.

Right Aligned

Repeated items should become headings

Like so (and note alignment of numbers)

Alignment

Contrast Avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual element on the page.

AVOID ALL CAPS ALL CAPS ARE HARD FOR PEOPLE TO READ B/C THERE’S NO SHAPE TO THEM Mixed-case sentences have redundant shape coding that make them easier to read.

AVOID ALL CAPS ALL CAPS HAVE NO SHAPE CODING Mixed-case sentences have redundant shape coding Ascenders Descenders

AVOID ALL CAPS ALL CAPS TAKES UP MORE SPACE, FORCING YOU TO USE A SMALLER FONT TO PUT THE SAME AMOUNT OF INFORMATION (If you don’t believe me, this sentence has just the same number of letters as the previous one.)

Better Contrast, Larger Title b/c mixed case, not all caps.

Repetition Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity.

Repetition

Typical Resume

Improved Resume

Chamber City Before

Chamber City After

Ancient City Before

Ancient City After

Construction Network Before

Construction Network After

Galeria Before

Galeria After

Typical Report

Proximity

Alignment

Repetition

Contrast