contrast, repetition, alignment, proximity

CRAP

The Four Basic Principles of Design

The following is a brief overview of the principles of design. Although they are discussed separately, they are really interconnected. Rarely will you use only one principle at a time.

Contrast

Repetition

Alignment

Proximity

Design Considers These Elements

letter case

highlighting

color

graphics, images, icons, symbols

tables, charts, diagrams

columns

headings

headers and footers

page numbers

margins

blank space

paragraph spacing

paragraph length

line spacing

line length

justification

type size and typefaces (fonts)

type features (bold, italics, etc.)

The idea behind contrast is to avoid elements that are merely similar. If the elements (type, color, size, line thickness, space, shape) are not the same, then make them very different. Contrast is often the most important visual attraction on the page.

Contrast

makes different things different

brings out dominant elements & mutes lesser elements

creates dynamism

aids in the organization of information and creates organizational hierarchy

can add clarity

if two items are different, make them really different; avoid doing wimpy contrast

Contrast

Contrast

Contrast

Contrast Summary

Contrast on a page draws our eyes to it; our eyes like contrast.

How to get it:

Add contrast through your typeface choices, line thicknesses, colors, shapes, sizes, space, etc. It is easy to find ways to add contrast, and it's probably the most fun and satisfying way to add visual interest. The important thing is to be strong.

Contrast SummaryWhat to avoid:

Don't be a wimp. If you're going to contrast, do it with strength. Avoid contrasting a sort-of-heavy line with a sort-of-heavier line. Avoid contrasting brown text with black headlines. Avoid using two or more typefaces that are similar. If the items are not exactly the same, make them different!

 

RepetitionRepeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thickness, size, and type. This helps develop the organization and strengthens unity visually.

Repetitionrepeat design throughout the piece of work

consistency

creates unity

adds visual interest

develops organization and creates consistency

repeat some aspect of a design (horizontal rule, a certain type of bullet, a type of font) throughout an piece of work

avoid repeating an element so much that it becomes annoying or overwhelming

Repetition

Repetition

Repetition

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

Alignment creates a visual flowvisually connects elementsunifies and organizes the pagenothing should be placed on a page arbitrarilyavoid using more than two text alignments on a pagecenter alignment and full alignment are more difficult to read than right

Alignment The web site’s page is arranged along a curved alignment.

Alignment The main pages of the Art Institute’s site are contained in frames with a centered alignment.

Alignment

Alignment

Alignment SummaryNothing should be placed on the page

arbitrarily. Every element should have some visual connection with another element on the page. Unity is an important concept in design. To make all the elements on the page appear to be unified and connected their needs to be some visual tie between the separate elements. Take a look at designs you like. No matter how wild and chaotic a well-designed piece may initially appear, you can always find the alignments within.

Alignment SummaryHow to get it:

Be conscious of where you place elements. Always find something else on the page to align with, even if the two objects are physically far away from each other.

Alignment SummaryWhat to avoid:

Avoid using more than one text alignment on the page (that is, don't center some text and right-align other text). And please try very hard to break away from a centered alignment unless you are consciously trying to create a more formal, sedate presentation. Choose a centered alignment consciously, not by default.

 

ProximityItems 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 the information and reduces visual clutter.

Proximitygroups related elements

separates unrelated ones

helps to organize elements, imply relationships

helps with use of blank space

reduces clutter-creates visual relationships with elements that belong together

don’t stick things in the corners and in the middle of the page

Proximity

Proximity

Proximity

Proximity

Proximity SummaryWhen several items are in close proximity to

each other, they become one visual unit rather than several separate units. Items relating to each other should be grouped together. The basic purpose of proximity is to organize.

Proximity SummaryHow to get it:

Squint your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops.If there are more than three to five items on the page (of course it depends on the piece), see which of the separate elements can be grouped together into closer proximity to become one visual unit.