Too Much of A Good Thing Can Ruin A Great Design

Around the U.S. holiday of Thanksgiving (the last Thursday in November) I begin to get a craving for eggnog. This craving usually lasts until about the end of Christmas; and then I’m good for about eleven months without eggnog. This year, however, was a bit different. My craving for eggnog suddenly ended around the middle of December.

Why? You ask. Well, you see, the best way to drink eggnog is to sprinkle a little nutmeg on top. If done correctly, the nutmeg adds the perfect amount of holiday spice to the seasonal drink.

The nutmeg enhances the drink because it provides a peppery, spicy flavor to the sugar, egg and milk of the eggnog. Yet it’s not overbearing. It’s a balance of contrasting flavors whose sum, to be a bit cliché, is greater than its parts. However, if you put too much nutmeg in the eggnog it quickly tips the flavor balance and the whole drink is ruined.

This is what happened to me. I wanted more of the nutmeg because it enhanced the eggnog so much; but my nutmeg greed ruined the drink because it ended up tasting like liquid pepper. Thereby effectively ending my yearly craving for eggnog about two weeks early. The principle learned: More of a good thing will not always be better.

Enough with the Eggnog

The above principle can be related to a fundamental principle of design: Contrast. In general, the absence of contrast is bland, too much is bad, and just enough produces great design.

Case Study

Let’s take a look at a “real world” example. A website I just recently designed has a navigation bar that spreads horizontally across the header image, adjacent to the site identifier/logo.

The navigation elements are gray boxes—with the titles in white—that have a transparency value allowing the header image to slightly appear underneath. (See Figure 1)

Figure 1: The navigation for http://crossinglouisville.com/.

When you hover over the links, the gray box changes to a solid red. The red box is bright, sharp and draws attention to itself without standing out too much. In short, it looks good. (See Figure 2)

Figure 2: The red in context with the gray.

So, a single red box looks great, what if we made all of the boxes red instead of gray? (See Figure 3)

Figure 3: The navigation bar blends together to form a unintelligible horizontal bar

Something unexpected happens though when all of the navigation boxes are changed to red: They lose their “cool” factor. Making all six boxes red didn’t make it six-times better, it became worse actually. It lost its graphical tension and became a bland swath of red.

Context, Contrast and Graphical Tension

You see, in order for the red to look good it needed the gray around it. The gray boxes provided the context for the contrast of the red; and the two together produced a graphical tension that was overall very pleasing.

Further Reading

For further reading on this subject, I’ve linked two articles below by Andy Rutledge about using proper contrast in design, I highly recommend them.

• Contrast in Context at Design View
• Contrast and Meaning at A List Apart