CRAP Principles in Web Design

The following demonstration shows the CRAP principles applied to a simple case of information formatting.

~Jonathan Bass

Stage One: Raw Data (Alignment)

Introducing the Rolex Laureates
Teresa Manera
Preserve prehistoric animal tracks at a unique site on the Atlantic coast.
Argentina
Lonnie Dupre
Undertake the first summer crossing of the Arctic Ocean.
Arctic Ocean
Claudia Feh
Establishing a learning center to support the reintroduction of Przewalski horses.
Mongolia

We start with the basic, minimally formatted information. For each laureate we have a name, a one-sentence summary of his or her project, and the locality of the project. There is no strong differentiation of information other than line breaks.

Introducing the Rolex Laureates
Teresa Manera
Preserve prehistoric animal tracks at a unique site on the Atlantic coast.
Argentina
Lonnie Dupre
Undertake the first summer crossing of the Arctic Ocean.
Arctic Ocean
Claudia Feh
Establishing a learning center to support the reintroduction of Przewalski horses.
Mongolia

In this case, all the information as initially presented is aligned by default. The alignment principle states that each element on a page should align with at least one other element on the page and that alignment should be used to should a relation between the aligned elements.

Stage Two: Minimal Sepration (Proximity)

Introducing the Rolex Laureates

Teresa Manera
Preserve prehistoric animal tracks at a unique site on the Atlantic coast.
Argentina

Lonnie Dupre
Undertake the first summer crossing of the Arctic Ocean.
Arctic Ocean

Claudia Feh
Establishing a learning center to support the reintroduction of Przewalski horses.
Mongolia

Stage Three: Minimal Markup (applies Contrast)

Introducing the Rolex Laureates

Teresa Manera

Preserve prehistoric animal tracks at a unique site on the Atlantic coast.

Argentina

Lonnie Dupre

Undertake the first summer crossing of the Arctic Ocean.

Arctic Ocean

Claudia Feh

Establishing a learning center to support the reintroduction of Przewalski horses.

Mongolia

Stage Four: Refining the Markup

Introducing the Rolex Laureates

Here we structure the list of winners as an HTML unordered list (ul).

Stage Five: Adding Photographs (More Contrast)

Introducing the Rolex Laureates

Adding images supplies visual information about each winner and improves the contrast between the list items.

Stage Six: Floating Photographs (Balance)

Introducing the Rolex Laureates

Stage Seven: Adding Class Names and Text CSS (Repetition, Contrast, Alignment)

Introducing the Rolex Laureates

The three pieces of textual information (laureate name, project summary, and project locality) each gains a distinct appearance: bold type for the name, italics for the summary, and a larger uppercase type on a green background for the locality.

I've also added a 12px left margin to the laureate name and project summary elements in order to maintain alignment between the three elements of textual information. (The placement of the image will be handled in the next stage.)

Stage Eight: Adding a Background Image (More Contrast)

Introducing the Rolex Laureates

Stage Nine: Adding a Counterbalancing heading element

In the Footsteps
of Prehistory.

Introducing the Rolex Laureates

Stage Ten: Changing the Background Image to Improve Contrast

In the Footsteps
of Prehistory.

Introducing the Rolex Laureates

Return to Web Authoring Syllabus