Super Heroes and CONTRAST - Another geeky primer

Most people I work with know that what I do is not driven by sorcery or some unseen force. By now they know that I obey certain rules and principles that resonate with every audience. These design principles are:

Balance, Proportion, Rhythm, Contrast (emphasis) and Unity.

These may be difficult to explain but, as is my custom, I like to relate everything to Super Heroes! This is because most people are at least passingly familiar with a hero and what type of "look" they typically have. A common frame of reference with which to talk over CONTRAST.

Design elements love to be noticed. Contrast is no different. A pure definition of contrast would be to "differ strikingly". Consider super hero costume layout. To make those iconic uniforms really "pop" the artists who designed them utilized contrast. 

Epic contrast can be achieved through stark differences in color, texture, value just to name a few. Let's take a look at some examples.

Contrast achieved through Color

Iron Man

A study of "Stark" differences in comics would be incomplete wihtout mention of Iron Man. If we study the suit that Tony Stark designed (well known of late) we notice that it is primarily two colors. The red and yellow employed by original artist Jack Kirby are strikingly different. The yellow is chromatically quite a bit lighter than the rich dark red. This makes our eyes jump to the faceplate of Tony Stark's helmet and to other more submissive (but noticeable) areas like his biceps and the power element in his chest. Good work contrast! 

Notice that the contrast has not always been there though!

The debut of Iron Man (as seen on the left) was simply meh... He may have LIVED, WALKED and CONQUERED but he sure as heck didn't pop. He was uniformly grey. How boring. If it weren't for the artistic rendering of the suit in the issue depicted on the right, Iron Man may not have become the household name he is today. Thanks to good costume design using good contrast, early 1960's teenagers sat up and took notice of one of my favorite avengers.

Consider one of the lesser known heroes (who kinda looks like a villain)... 

Contrast through dramatic lighting

Moon Knight

Where is his contrast? It certainly isn't in color! The artist really pushes the envelope with every frame to make the lighting quite moody and intense. The grey in his uniform and the blackness of the deep recesses in his cowl are "starkly different" - contrast. 

This is to prove that contrast needs no color to push the "notice me" envelope. It can be achieved through other means. 

Speaking of other means, let us consider the use of texture as a means to achieving contrast. Enter Colossus.

Contrast through the use of Texture

Colossus

To where is your eye drawn in the image on the left? I am noticing some areas of high reflection - first on his shoulder and then on other arm bits and forehead... I the artist used some very reflective areas and contrasted them against the smooth background and his vest. It really makes you notice areas that might otherwise be lost in a sea of grey (remember the Iron Man example?) 

But it should be noted that this piece also utilizes contrast in value as well. The darkness of the shadows and the brightness of the highlights are starkly different and go as far as being the brightest white and the blackest black. Even placing these extremes directly against one another lends to the very striking look of this piece. 

In Conclusion and Application

In consideration of everyday design, try to dress up your headers like Super Heroes and your footers like their sidekicks. Remember that if everyone is super, then nobody is. That is to say that even some parts of our layouts need to take up less of the spotlight. Don't make everything similarly contrasty or you will risk losing interest where you need to push it.

Consider a chess board. BO-RING. It's not meant to be a visually interesting composition with dominant and submissive areas... no one is meant to notice any one square over another. Mission accomplished. Just don't allow your brochure to fall to the same fate. Push it in some areas of your composition by using strikingly different elements to draw attention.

Think about ways to inject some striking differences in your typography (display fonts vs. body text), body elements (background vs. type color), color theory (warm colors advance while cool colors receded) and more. Your audience will thank you.