RSS 
Email 
Twitter
FacebookGood Designs Have Strong Contrast
January 3rd, 2009 | Posted in Web Design 9 Comments »
Since I’ve been reading The Non-Designers Design Book: Design and Typographic Principles for the Novice, I’ve started to see the importance of contrast everywhere. The author, Robin Williams, argues that contrast is one of the four pillars of design, and that most people don’t include enough of it. As a result, rather than contrast, they end up with conflict. Williams writes:
A design is in conflict when you set two or more typefaces on the same page that are similar — not really different and not really the same. I have seen countless students trying to match a typeface with one on the page, looking for a face that “looks similar.” Wrong. When you put two faces together that look too much alike without really being so, most of the time it looks like a mistake. The problem is in the similarities.
Although Williams goes into detail about contrasting typefaces, the general idea is to push contrast more than you might be naturally inclined. If you don’t, you end up with conflict. The next time you eat at a restaurant, look closely at the menu. A good menu has a high degree of contrast between sections. A poorly designed menu usually has the titles in 14 pt Times New Roman font with bold formatting, followed by Times New Roman 12 pt font for the menu items. Boring. Williams writes:
Don’t be a wimp. Most effective type layouts take advantage of more than one of the contrasting possibilities. For instance, if you are combining two serif faces, each with a different structure, emphasize their differences by contrasting their form also: if one element is on roman letters, all caps, set the other in italic, lowercase. Contrast their size, too, and weight; perhaps even their direction. … For a wide variety of examples and ideas, take a look through any good magazine. Notice that every one of the interesting type layouts depends on the contrasts. Subheads or initial caps emphasize the contrast of size with the contrast of weight; often, there is also a contrast of structure (serif vs. sans serif) and also form (caps vs lowercase) as well.
We already understand the principle of contrast in many other aspects of our lives, such as how we dress. In the following image, the orange-red color combination is hideous, but the red-black combination — which has a lot more contrast — is more acceptable.
Left, the colors are too similar — the result is conflict. Right, the colors are substantially different — the result is contrast.
When we dress, we automatically choose clothes that have some contrast, even if we’re not designers. It’s natural, yet we don’t always carry over the same principles into layout and design.
In the next photo, look at the color of the jackets — pink and brown, purple, and black and pink. The jackets on the outside have strong contrast, and the the colors work. The jacket in the middle lacks contrast. But rather than purple and light-purple, or purple and aqua, the designer chose to keep the shades pretty much the same.
More colors — notice the contrast of the jackets on the outside
The solid purple jacket works, but will need contrast from pants, gloves, or a hat. (Of course, my kids look cute no matter how I dress them.)
My point is this: if we take our natural sensibility for contrast that we automatically employ in dress, and then apply it to layout and design, we’ll naturally make documents that have greater appeal. Here’s another example from Williams’ book, this one about table of contents.
Contrast in table of contents
Start looking at contrast and you’ll see it everywhere — store signs, book jackets, billboards, TV titles, logos, magazines, labels, dress, and more. The designs that catch your eye will have a good deal of contrast.
Tags: conflict, contrast, design, graphic design, layout
Tom,
Color contrast is a complex and very powerful tool. You did a good job of briefly explaining the most salient points of that tool.
As you and the author say, keen awareness of and continuous use of color contrast in photos and fonts is critical to helping readers better understand what you are trying to convey.
And…yes…color contrast, despite the quality of the content, is often the difference between a piece that succeeds or fails, .
Look at the contrasting colors of birds in your own backyard for proof of the importance of color contrast in nature.
One minor observation: I have difficulty with the illustrations of the guy running on the treadmill.
In both examples, the large red and black oriental rug in the background is too busy and loud. It draws your attention away from the guy’s contrasting clothes colors. It also overpowers and bleeds into the orange, black and red colors the guy is wearing. This makes it difficult to clearly see the conflict and contrast.
If the wall in the background was blank it would be more neutral and allow the contrast to be clearer.
In contrast, the photo of the three young girls makes the point much better because the background is more neutral.
Bruce, you’re right about the photo of the guy running on the treadmill, which actually is me, by the way. I should have removed the rug in the background before taking the picture. As a result, my point doesn’t come across as strongly.
I didn’t mean to overemphasize color, though. Although color contrast is important, the bulk of the design principles in the book I referenced address form, structure, size, etc. I only made the extensive reference to dress and color because it’s one medium where we all automatically get it. No one puts on army green pants with a pea-green top. We naturally choose contrast. In our document design, we should employ similar principles of contrast. For example, a larger title in a completely different font, and so on. We have to exaggerate the contrast even more than we’re accustomed to.
Nice post. I read Williams’ book in school and loved it. Contrast works on lots of levels. Even changing the alignment of a section of text can call attention to it, because its alignment is in contrast with the rest of the document. Contrast makes the foreground/background argument work too (e.g., the readability of black text on a white background versus light blue text on a dark blue background).
[...] of contrast is that if two things are not the same, then make them very different. The goal with contrast is to make different things distinctive from each other. Naming is great place to apply this [...]
Strong contrast will be much noticeable, me my self I adore colorful designs.
Contrast definitely attracts more visitors but selection of the color is also very important. We can’t just put any color to the website design which will look like contrast. Care has to be taken in this regard.
For what it’s worth, the simple black & white concept (void of ANY color) can also attract the eye….moreover than various colors and how they ought to be displayed. You might consider this in future image layouts for anything from manuals to paited rooms, brown & white, beige & white….etc. Food-for-thought!
I only made the extensive reference to dress and color because it’s one medium where we all automatically get it. No one puts on army green pants with a pea-green top. We naturally choose contrast. In our document design, we should employ similar principles of contrast
[...] of contrast is that if two things are not the same, then make them very different. The goal with contrast is to make different things distinctive from each other. Naming is great place to apply this [...]