The Four Principles of Design

Mr. Gallagan

Whad does fishing have to do with design?

CARP Principles Acronym

The acronym C.A.R.P stands for: C = contrast A = alignment R = repetition P = proximity

CARP Principles

One method to display text and graphics utilizes the CARP method described by Robin Williams and John Tollet.

Typically, if you do not adhere to the CARP principles, one usually ends up with CRAP.

Our Purpose

After this lesson, you will be able to score an 80% or better on a written review activity reviewing the CARP design principles.

What Does Contrast Do?

Contrast is what pulls you in, it draws your eyes to the page. It allows you to move around the page and find things

Contrast must be strong. "If two elements, such as type, rules, graphics, color, texture, etc. are not the same, make them very different”

Contrast creates a focal point, a dominating force, the place your eyes go to when first looking the page (web or print)

Allow you to skim more easily to pick out needed information

Contrast Pertains to: 

Text Graphics Colors Texture Rules

When Does Contrast NOT Matter?

There are times when you don't want contrast: a novel, a professional journal

The reading process should not be interrupted by changing the look of text or links

Contrasting Font:

Contrast heavier weights with lighter weights

Do not use ALL CAPS. Contrast can be done by using italics or

bold.

This is a Bad Example of Contrast

This Hurts My Eyes

This is a Good Example of Contrast

What is alignment:

The basic purpose of alignment is to unify and organize the page

When the page is well organized and appears clean, your message is better communicated.

In simplicity, alignment is how things are lined up on a page with each other.

It is always best to pick one alignment and to stay with it.

What Do We Align:

Text Graphics (pictures, data charts, clip art,

etc...) Spreadsheets Form

Alignment of Text

Right align, left align, justify or center (physical example)

Left Align

This page has a left alignment.

Center Align

This page has a center alignment.

Right Align

This page has a right alignment.

Justify

This page has a justified alignment.

Justified Text is stretched and

provides both a strong left and right

edge.

Hints for better alignment:

Use the same alignment throughout the entire document

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 Example of Alignment

Good Example of Alignment

Bad Example

Good Example

Bad Example

Good Example

Repetition – What it does?

Repetition unites, joins, fuses the entire page together (print or web based).

Helps organize information - bulletsIf there are multiple pages, each page

should have a similar look and feel. (important for web-based)

Repetition should be thought of as "Consistency“

Help guide the reader through the pages

Hints for Being Repetitive:

Plan your document Check your work for consistency and

repetitiveness If web based, storyboard your material

Bad Example of Repetition

Good Example of 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 togetherWhen items are physically far from each

other, they become visually disconnected

What Proximity Does:

It groups related items together Makes page look smaller Organizes information Defines a beginning and ending

Bad Example of Proximity

CD ROMClassicalJazzCountry WesternCountryHip HopRappRock Acid RockTypes of learnersEarly Learnerlate LearnerHumanitiesMath & Science

Good Example of Proximity

CD ROM Classical Jazz Country Western Country Hip Hop Rapp Rock Acid Rock

Educational Topics Early Learner Late Learner Humanities Math & Science

Web References

http://www.colorado.edu/AmStudies/lewis/Design/graprin.htm

http://davidstanfield.com/