<img src="//bat.bing.com/action/0?ti=5036286&amp;Ver=2" height="0" width="0" style="display:none; visibility: hidden;">
May 04

Design 101: Putting Contrast in Context


In: Tutorials

Contrast, at its most basic level, is our awareness of adjacent opposites. It is something that our human senses were built to recognize. It is always that unique sight, sound, smell, taste, or touch that causes us to take notice. The stimuli we notice first are those which set themselves apart from the “noise” in our perception.

Imagine the distress you may feel as the smell of burning plastic interrupts an otherwise relaxing evening at home, instantly demanding your attention. Imagine the sound of an ambulance siren, and how it so easily pierces through the drone of urban ambiance. Imagine the ancient bowhunter who catches a sudden, jarring glimpse of bright red drops spilled along the green forest ferns, leading him to his wounded prey. Regardless of whether these contrasts are manmade or natural, our response to them is a very potent mechanism of insight, and it has since become a very useful tool for those of us in the business of advertising and design.

Because of this understanding, we, as designers, can adapt contrast to best serve our clients and achieve our project goals. We can use the contrasting values of certain visual properties (such as color, spacing, size, shape, etc.) to organize information into a desired hierarchy, classified (ideally) from the most important element to the least important. That is, items which we want to call attention to are made visually prominent, while less essential content is subdued.

So what makes a design element prominent?

It is often a challenge when composing a layout that many different important portions compete for attention. There may be many elements in a layout that are deemed important, and therefore need to be made more pronounced. It is a misconception, however, that this act always involves literally making these items bigger, bolder, or brighter.

Think of the run-of-the-mill classifieds in the back of a newspaper or magazine. There, you’ll most likely find dozens of small, tightly-spaced boxes, all filled to the brim with content, and all desperately competing for your attention. Almost all of the ads employ techniques such as large type, loud shapes, or loud colors with the belief that these tactics will make them more obvious to the viewer than their neighboring competitors.

But what happens?

In the context of the classifieds page, all of these parallel strategies to gain attention are lost. The big bold words, the loud colors, all fade into the “noise” because the exact same strategies are being used in every adjacent ad. It is here that we can easily see that an item is not made prominent by its own visual form outright, but more so by the relationship it keeps with its surroundings; its context.

For example, when all call-to-action statements, buttons, product photos, and headlines are chosen to be made bigger and bolder on a website, then none of them are really any bigger or bolder, at least in an attention-gaining sense. They all simply risk becoming noise for each other, and that is the downfall of a design: when elements compete, causing the viewer to become visually confused, disinterested, and they move on to find a clearer message. In this example, decisions should instead be made as to how these legitimately important elements can best get the attention they need, while also respecting and even complementing each other in the context of the layout. We humans like to brag about being brilliant multitaskers, but when it comes to holding attention (especially in advertising), we can really only focus on a single statement at a time. Any more, and we disengage, as the information blends into every other website, button, headline, photo, billboard, commercial, or classified ad in our proximity.

What if your clothes, your upholstery, and your home always smelled like burning plastic? How quickly would you have picked up on a similar concerning scent? What if the pizza deliverers, FedEx trucks, and all vehicles utilized shrill sirens as they drove along? Emergency vehicles would need a new strategy to cause people to pay heed. What if all the leaves in the ancient bowhunter’s forest were red? The hunter would need to seek out other clues to track his quarry. Contrasts cease to exist when these once distinctive elements share the same traits as their surroundings. This is obvious, but we can use this knowledge to improve our design. We can learn to indicate an element of importance, not always by directly intensifying it, visually, but rather by paying attention to and adjusting the aesthetic balance that is created between elements. We must design so that elements harmonize, not compete, in both beauty and purpose.


UNION is a full-service digital agency. We create experiences that help brands thrive. We believe to be relevant in today’s marketplace, brands must lead with a digital-first philosophy. We craft engaging digital experiences and integrated campaigns that are built on strategy and driven by data. At the heart of what we do is help brands create meaningful and enduring relationships with highly connected consumers.

Get in Touch

Subscribe to our Blog & Newsletter

Also found in Tutorials