A big part of an art director’s job is not only to identify whether a concept or design communicates optimally, but to also know why, and if not, how to get it there. When I’m reviewing a design that’s not quite right yet, a common magic ingredient is contrast. This technique isn’t just black and white (excuse the irresistible pun) — in addition to demonstrating some ideal uses of color contrast below, I’ll also introduce how differences in size and spacing can be a useful communication tool, as well as how unexpected pairings can emphasize a message. Keep reading to learn about color contrast, size & spatial contrast, and contextual contrast.
1. Color Contrast
This is likely what most people think of when they hear the word “contrast.” Color contrast exists when two objects reflect a different amount of light, due to a significant difference in hue, value, and/or saturation.
In the Nivea ad below, the strong difference in color is integral to the conceptual meaning of the image — the moon shape needs to “pop” more than anything else on the page. It needs to take precedence in the visual hierarchy.
In the Coca-Cola ad, the contrast between foreground and background is necessary to effectively communicate the implication of an object between the fork and knife.
2. Size & Spatial Contrast
The use of size & spatial contrast comes into play when executing a layout. You’ve got a blank canvas in front of you, and you’re deciding how you’ll arrange all the pieces of your message. If you’re not sure where to begin, I recommend creating a significant size contrast between objects, as well as ensuring the negative space / “white space” creates an interesting and intentional composition. Guide the eye with both the foreground (each piece having a clearly different size or weight than the next) and the background, the negative space pushing the viewer’s attention through the design like air in a series of ducts.
Here, the clever implication of the Lego structures and their shadows would be lost if it were surrounded by anything but negative space; furthermore, the difference in real-estate taken up by the focal point vs. the logo ensures the main message doesn’t need to compete with anything else.
3. Contextual Contrast
Contextual contrast is created by the juxtaposition of two visual symbols with opposing meanings. In order to achieve contextual contrast, it’s important that the design includes at least one “constant” so that spotlight shines easily on the “variables” — the contrasting pieces.
In the following examples, a strong message is conveyed with the comparison of two images which mean drastically different things, but share at least one commonality.
1) The half & half composition stays constant among each motif; within each motif, the main constant is that the halved objects align with each other to create something whole. Another technical constant is the background; while you can see the division due to a slight color change, the centralized gradient glow pulls each half together. Each of these elements creates a cohesive system that allows the compositions to act as a series, with the contrast of the left vs. right of each taking the main focus.
2) The constant here is in the almost identical shape of the two objects. This similarity allows the spotlight to be on the stark difference in meaning — peace vs. violence; gentle vs. harsh. This example uses an additional tool, color contrast, to further emphasize that stark juxtaposition. Sometimes a combination of techniques helps accentuate the point that’s being made; this design demonstrates that multiple variables don’t necessarily dilute the message, and in fact may strengthen it in some instances, so long as at least one constant is present.
3) Like our first example, the alignment of the two halves is the constant here; unlike the first example though, is that the background and surrounding areas of the image are far from consistent. Still, this composition communicates a strong message about the impact of organ donation through the simple juxtaposition of two different lives being led. (One thing to note is the copy does play more of a part in this design; without it, it may be hard to decipher whether the top and bottom are different people or just different hobbies of the same person.)
4) This is a unique and very successful demonstration of the contextual technique in that it uses all elements of the environment, including the broken mirror. The most important constants in this design are the child and his pose, which make an incredible impact with the addition of the simple variable, his belongings in the reflection of the mirror.
It’s easy to look at the strong designs above and notice that they’re clever and meaningful, but what makes us better at our own creative practices is to take a moment to dissect successful designs, to analyze what makes them “tick.” It’s those insights that help us to make our own work better moving forward. Contrast may not always be the answer. Sometimes, on the other hand, extreme subtlety is key (although an oxymoron). And surely, each method above may or may not be appropriate to use all at once. But if you feel your design is falling flat, or are curious to see how much further it could be pushed, this can be a trick to keep in your back pocket that may make all the difference.
