Design 101: Contrast Makes The Difference

By Jan v. White

What makes pages interesting? Why do people pay attention? Because they sense something there that they are curious about – the subject-matter. But just presenting the subject in a take-it-or-leave-it way is not good enough. There's too much information competing for attention out there; you cannot risk letting your material just lie there and be passed over. You have to display your message vividly.

Everything you put on the page is part of a package. You are familiar with its contents, so you know what is important and what is less so, but readers who see it for the first time don't. They'll only understand it after they've studied it. But first they have to be motivated to do that studying.

You can guide your lookers, and turn them into readers, by the way you use "design" to make the value of the message noticeable. You may even make it so dramatic that it pops off the page irresistibly. This requires some deliberate manipulation based on strategic, rather than aesthetic, thinking.

Avoid the trap of seeing the things you have to accommodate as though they were separate elements. You may be working with them that way, but nothing exists by itself. viewers glance at the page and see everything as a component of everything else: the page itself...the logos, the type, the images, the empty spaces...their interrelationships...as well as the pages that went before and the pages that are to follow. They have to sort through a mess of stuff – fast.

Therefore, you want to make the important elements stand out, while putting the less important, supporting material in the background. The technique is contrast. The obvious ploy is to make the headline big. It is conspicuous because it is bigger than the surrounding type. But that's primitive. When you think about it and begin to notice it, the list of methods of contrast is limitless. A few examples are shown here with magazine spreads because that format makes the ideas easy to illustrate. However, don't think these techniques are limited to two-page spreads – they are applicable to other formats at any scale.

Emptiness / fullness

The huge, luxurious white spaces in the middle of which the short message floats is set off against the full-to-the-brim texture of the page at right. Will anybody bother to read the right-hand page? Probably not. But the left-hand page will receive 100% attention, which may well be the deliberate and successful tradeoff.

Alignment / randomness

The tops of the text columns align precisely, in contrast to the generous white space above. The columns hang like clothes from a clothesline, variegated in length. Again, the white space is crucial to the drama.

Horizontally / verticality

Juxtaposing the direction of the elements on the page creates drama, especially if the pictures mirror the subject: pictures of giraffes want to be vertical; snakes horizontal (unless the cobra is rearing up for the strike or the giraffe just died, in which case the unexpected direction adds to the effect).

Looseness / tightness

Careful rectangularity, equal spacing, walled-in-edges, and tightly controlled corners are fine, but dull, when dictated by rigidity. Contrasting looseness is called for. It does not have to be as large as it is here. Think how the feather-edge of a ragged-right picture-caption brings visual relief to a page of text set justified.

Flatness / angularity

The expected geometry of the page is vertical/horizontal, because we are used to seeing it that way. (When printed pages were hand-assembled in metal, it was difficult to insert things at angles.) Elements run at an angle are still somewhat startling. The contrast between horizontals and angles creates tension.

Pictures / text

Images are fast shots to the brain and the emotions. Words require time to read, to absorb, and to understand. Pictures and text speak two separate languages, which can complement each other to tell a consistent story powerfully. You can take advantage of their difference to increase a story's drama, as well as the impact of the piece you've created. For more ideas of how to take advantage of integrating photos into your designs, see our guide on design photos.

Darkness / lightness

In your mind's eye, turn the pages of a monotonous manual. Page after page continues with the same repetitive type on white paper. Now imagine suddenly coming to a page that reverses the expected pattern, with white type on black. Pow! That page has impact. (But avoid too much white type on black: it's difficult to read).

Colorfulness / black and whiteness

Imagine flipping the pages of this magazine. There is cheerful color everywhere...till you come to these plain old black-and white pages. Do they really appear conservative? Dull? Boring? Of course we could have gussied them up, but the color wouldn't have added anything to the ideas themselves. It's the absence of color here that demonstrates the effectiveness of contrast.