Scale and White Space—The Power of Contrast II

In a previous blog I talked about the power of contrast in color and light, plus a few thoughts about scale. Today we’ll talk a little more about scale, and explore one of the most powerful — and most commonly misunderstood — forms of contrast: white space. We’ll also discuss how to overcome one of the most frustrating challenges in marketing — explaining the value of white space to stakeholders.

Size matters

To recap quickly, when we talk about “scale” we’re talking about the sizes of the elements in a composition, whether in relation to each other or to the areas they occupy. Combining elements of distinctly different sizes is an easy way to create contrast, from showing a tiny human figure standing at the edge of a canyon to mixing type sizes in a title or logo.

For example, take a look at this layout:

 

As you scan this magazine spread, your eye is probably drawn to one area in particular — not the text in the upper left corner, which is presumably the “beginning”, but to the chart at the bottom, center-right.

Why does it draw your focus? It’s not necessarily the biggest chart on the page (in fact, the map above is larger), but it is the biggest concentration of color, and the shapes that make it up are larger than the shapes that make up the other charts. These choices were made intentionally, suggesting that the information in that chart is what the designer thought was the most important.

Here’s another example from one of my own designs, an album cover for Bill Tonnis, a local singer/songwriter of contemporary Christian music. Here contrast is created in multiple ways. The large scale of the word “Give” is considerably larger than the rest of the type. The cool blue of Bill’s name contrasts with the warm yellow/orange of the sky. The smooth sky contrasts with the ripples in the water, and the brightness of the sun draws attention to the album title.

Both of these examples show how scale can be used to attract attention and direct the reader by creating contrast between different elements in the design. But contrast and scale aren’t just about the size of objects relative to each other. Contrast can also be found in the relationship between an object and the space it occupies.

And that’s where we dive headlong into the tricky world of so-called “white space.”

“We’re paying for this space, why not use it?”

White space — or the “clear” space around design elements — can be a point of contention between designers and their clients. You have so much you want to say, and look, there’s all that space! In fact, when you consider how expensive that space can be, it can even seem wasteful not to cram in as much as you can.

Why then, do designers insist on giving certain elements room to breathe?

To answer this question, let’s follow the classic stakeholder argument to its logical conclusion. We’ll take the approach that to get the most “bang for the buck”, we need to use as much of the available space as we can. The result often looks something like this:

Yikes!

We’ve all seen designs like this — and ignored them. There’s obviously no attempt being made here to use design to guide the viewer’s eye, or to achieve anything else. Yes, all that valuable space they paid for got used, but the money was still wasted. Not only does the result not attract the viewer’s attention, but it also actively turns them away. By trying to say too much, this piece effectively says nothing. This sort of result is all too common when amateurs fail to recognize the true value of white space, which is to guide the viewer through the piece in the most engaging way.

Even professional designers sometimes try to achieve artistic effects by making the choice not to use white space. While the result may be a work of art in its own right, it’s likely that it won’t be appropriate for a marketing message. Here’s an example:

This magazine spread was created by a professional designer who knew exactly what they were doing. It’s a conscious attempt to mimic the style of the artist Man Ray, who is the subject of the article. This may seem clever to readers familiar with the artist’s work, but consider the challenges created by the decision not to use white space.

Even if you’re passionately interested in Man Ray’s work and want to read the article, this design is not inviting. The large type traps the body text. The columns of type are very wide, with minimal space between the lines, and no space between paragraphs. Think how hard it would be as you finish reading a line to find the start of the next line without jumping too far down or re-reading the same line.

While this layout may be considered successful as a work of art, you wouldn’t want a marketing piece for your business to look like this. Even a clever design like this will fail if it discourages the viewer from engaging with your message.

Now let’s take a look at how to use that precious space to its full potential.

Zen and the art of white space

Consider this classic Volkswagon ad:

The image of the car is small, not in relation to any other objects on the page, but to the page itself. The white space on this page directs your eye right to the car, then to the next heaviest thing on the page, “Think Small.”

The position of the car is part of what makes the ad work this way. It’s facing into the page and is just to the left of the headline.

Additionally, the lines of copy are very ragged. Intentionally so, and in contrast — yes contrast — to what you would have seen in other car ads of the time. It makes the area of copy more airy and less heavy. The balance is also a little unstable, but this too is intentional. The designer is trying to make you think in a different way about what you want in a car.

Now take a look at what’s happening in this spread:

First we have a single color photo, while the rest of the spread is in black & white. The color photo is also the largest thing on the page. It naturally leads you to the next largest thing on the page, the article title and subtitle.

These two primary elements are easy to notice because there is such a generous amount of white space around them. As a result, it’s very clear how the designer wants you to engage with this article. Even if your attention wanders to the black & white photos or the caption, it takes just a moment to soften your focus, reorient, and get back on track.

White space doesn’t have to be white — it can just be a break from too much visual activity. Here we have one big photo with two tiny cars in it, and then a small block with a tiny bit of copy and a logo. Again we have color contrast, a sharp contour edge, and the dark/light contrast of the text and the logo.

This dramatic page from the New York Times sports section gives a huge amount of empty space to a tiny image. That alone conveys a sense of gravity to the topic — the issue of brain injuries in sports — while presenting a clear contrast to a typical sports page.

How to “sell” that empty space

Far from being wasted, white space can work very hard indeed. Its value comes not from what’s in the space, but from what that space does. Whether you’re directing attention, setting a context for new ideas, conveying seriousness, or just being kind to your reader, white space is a powerful tool for stimulating engagement.

So, resist the urge to pack in everything that seems to fit. You don’t need to dump everything you’ve got onto your viewers. Design is more powerful, and creates more interest, when you give them just enough to persuade them to take the next step.

And if that’s not justification enough for you (or your boss), at least try not to chase your viewers away by choking off all the “breathing space” in your design.