Design Context: Contrast in Context

Context governs all of the whys, hows and whats to visual communication. Just as design is a response to a set of needs or problems, context shapes the design response. Without context there cannot be any real design; only art or decoration (neither of which amounts to design.)

Since all design must be accomplished within some sort of context, defining or understanding the context should likely be the first step in the design effort.

Contrast is a fundamental tool of design and artistry. With contrast we can bring emphasis and attract the eye by making something conspicuous. But like every other principle and tool of design and artistry, contrast needs context in order to be most effective. The following is a simple exercise to illustrate how context can impact contrast in design.

Let’s say you want to use contrast to emphasize a particular word or idea in a headline. Here’s the headline you plan to use:

Maybe you want to emphasize “Design” or maybe you want to emphasize “The Game.” So, you do this:

Which of the two ideas have you emphasized? Well, since you started with the whole headline in black and have changed one word’s color to red, it might follow that the word “Design” is emphasized. And this notion would seem to be supported in the following graphic:

But do you know why? The word “Design” is emphasized, but not because it’s in red type. It is actually emphasized because everything else on the page is in black. The context of the black theme allows the red type to receive emphasis.

This idea becomes a bit clearer when we change the context, as in this image:

Here, the title maintains the same contrast, but the new red theme for the page makes “The Game” receive the emphasis. We can further expand and cement the red context by bringing more red structure to the page, like this:

Notice how “The Game” is even more conspicuous now?

We can reverse things and make the word “Design” quite conspicuous by heavily reinforcing the black context, like this:

Wordplay with Contrast

It’s not uncommon to see contrast used with text as a mechanism for communicating things other than the simple sum of the text. There are all sorts of clever ways to exploit this mechanism. Let’s use a (not so clever) example to show how context can communicate more than one message with this headline:

Let’s start by introducing some contrast, like this:

There’s contrast, but still no clear double message because the context has not yet been defined. Let’s add meaning by adding context, like this:

Do you see it? With the addition of the overall color context and the seemingly misplaced question mark, a new message is conveyed – a question.

Closing Thoughts

These were only rudimentary examples, but I hope that they helped to illustrate how context determines what is communicated or how better to communicate in certain situations. Here’s the deal – as a designer you have to be able to extrapolate other lessons from simple examples. You have to steal ideas and lessons from the world around you. I hope that this article helped to show the basis for other lessons.

Can you think of other examples of how context defines the message? Can you think of more involved or complex ways to use contrast in a specific context to communicate? Use these principles in your next or current client project. Or, just create an exercise for your own benefit. If you do, shoot me a note and a link and let me share it with others.