CRAP Design: Part 5 - Contrast

Submitted by Vyoma on Sun, 02/18/2007 - 19:00

This is the fifth part of the series 'CRAP Design Series'. In this part we will be looking at the Contrast principle of the CRAP set of design principles. The principle states that if the two objects within an element are different, then make them really different. And also, two different elements should be having different design making them contrasting.
Hen and Chicks - In a group of chickenks, there is a contrasting difference between the hen and cicks

There are three approaches that Robin discusses in her book 'Design Book for Non-Designer'.

  • Concordant
  • Conflicting
  • Contrasting

Concordant

The approach is used whenever you want to make the contrast between two objects to be in harmony with each other.

Contrast Example - Concordant
As you can see in the above example, with in the body text I wanted to emphasize on a particular set of words. I just italicized the typeface. If the same principle were used for say, a subheading, then I would either use the font of the heading but a little smaller size, or the same font as the body text, with greater size and also might make it bolder.

The use of concordant approach does not give any impedance to the flow of the eyes over the text - it remains harmonious.

Conflicting

This is an approach one should not take. For example look at the following case:

Contrast Example - Conflicting

The subheading above the body text is different indeed. But the difference is not very obvious. The body text has the font Garamond where as the heading has the font Times New Roman. Both of them are serif fonts and are quite similar to each other. Also the size difference between the body text and subheading is barely noticeable. The subheading seems to be just a wee-bit bolder than the body text. There is no obvious contrast, and there is no obvious similarity. There is a conflict.

So, why is this stated as an approach? It is done so that we can identify when such cases and eliminate them. When you design a document or web page and you identify that you are using a conflicting approach to contrast between two elements, stop at your tracks. Either use the concordant approach described above or use the stark contrasting approach as described below.

Contrasting

Contrasting approach to contrast principle (yes, it sounds a bit self-referential) is about showing or conveying stark contrast between two elements. Examine the following case.

Contrast Example - Contrasting 1

I just took the previous case and made a bold contrasting style for the subheading. I used a contrastingly different font for the subheading than the body text; I used a sans-serif font - Franklin Gothic Medium. Few glances between this and the previous case shows that this approach has more appeal.

Do not go by the examples and assume that the contrasting principle can be used only for fantasy fiction or similar text. The following case would show that it can be used quite effectively in technical document.

Contrast Example - Contrasting 2

As you can see, I have used Verdana for the body text and Courier for the particular word that I want to contrast against. It easily conveys that 'width' is a keyword.

When you are designing any document and web page, you will find that you will be using the Contrasting principle of the CRAP Design principles the most. It can give quite dramatic effect to the document and make it look professionally designed. Be bold when you use contrast and stay clear of using the conflicting approach.

In the next and final part of the series, we will just tie up some loose ends and brief on how we can use all these four principles to make good design.

Update: This blog post is a part of series.

  1. CRAP Design: Part 1 - Make documents and pages look good
  2. CRAP Design: Part 2 - Proximity
  3. CRAP Design: Part 3 - Alignment
  4. CRAP Design: Part 4 - Repetition
  5. CRAP Design: Part 5 - Contrast
  6. CRAP Design: Part 6 - Finale
Design

Comments

Submitted by Vyoma on Sun, 02/18/2007 - 23:15

Exactly, Rico. It almost stops you from using 'the lists' to attract the majority who are skimmers, because if your design is right, you would be able to write a blog without the use of lists.

How? Well, just use contrasting enough sub-headings, and there you have it - a list. :)

Submitted by Rico (not verified) on Sun, 02/18/2007 - 22:55

This is a useful piece of advice. Sometimes clearly defining the elements of a design helps get your message across. Especially when it helps your audience easily make sense of what they're looking at. Like in your block of text example, it's like you're saying "This is the headline" and "this is the body."

Add new comment