Visual Literacy IV: Give Space

Don’t you hate it when someone gets really close to your face when he talks to you? Personal space differs according to person and culture, but if you can feel his saliva splattering on your nose, he IS TOO close, bro.

Well in design, you need to give elements their breathing space too.

Consider the pinnacle of Depression-era art – Norman Rockwell’s art pieces.

A118

All Rockwell pics from www.normanrockwell.com

Space here is created not just to provide breathing space, but to provide potential space for the kids to swing into. Space sets the context, space gives the picture the ability to depict motion. Just imagine what this picture would have been like if the background was cluttered with other visuals – it just wouldn’t have the same impact.

Now look at this one:

A211

Space is used to draw your attention first to the paper note, then lead your eyes back to the blue eyes of the kid.

These days, too much design is done without giving space, well, its due space. But there are ways to bend the rules.

For one newspapers can often swing from one extreme to another.

WSJ page 

The lack of breathing space in the WSJ is deliberate. For practical reasons, squeezing text together reduces pagination and saves trees. For design reasons, the suffocating alignment is meant to drive an impression of intellectual superiority and information overload. It may not be a pretty design, but it’s an effective design.

Back in 2005, me and Simon Ang worked on the massive Canon photography series in The New Paper.

canon series 1

Click to see slightly bigger version! 

In this case, we had to give it sufficient breathing space because the full spread was over two tabloid pages, and allow a gutter running through the centre. It was really annoying that we didn’t have the centrespread to work with, but Simon did what he could to ensure the space drew attention to the text, and not just the pictures.

The following year (2006), the Canon series was designed by Cel Gulapa, and thankfully, we had the centrespread so we could go for a more integrated and tighter design.

canon series 2

My shameless use of wedding images of Edwin and my sis.

 

With hindsight, we could have really used less text in the body to give more breathing space, but you know, it was really tough balancing educating the public and getting the design right. So in 2007, when I developed The Young Photographer Of The Year series, me and the TNP artists (I believe Hup did the initial groundwork), simply went for visuals over text:

 

Young Photog 2007 Part 1

 

young photographer series snapshot

 

Doing the Canon photography series over three years really taught me how to take space seriously. As you can see, the series kept evolving in shape and form, and it’s a pity I won’t be doing any more such photography series from this year on. I was learning more design stuff with each instalment!

I could go on and on about optimal use of space, but my suggestion is to take a good look at how movie posters do it.

The Iron Man movie poster follows the classical style set by the Star Wars series:

new-iron-man-poster

 

In earlier instalments, I wrote about proportion and colours, and you can see how space is now added to the Iron Man poster for a real POW effect. Most of the poster is given a dark tone, and key characters are carefully brought out with the use of contrasting colours, spatial alignment and minimal gradients. I don’t agree with the use of the explosion visual next to Jim Rhodes though, it kind of spoils the entire image.

Now I was mentioning Star Wars, and the following is just about perfect in use of major elements:

starwars-poster-77

The original 1977 poster!

The SW poster is brilliant because not only does it expertly balance light and dark visuals (yes, my Padawans…) the artist somehow managed to also introduce a radial element – see how the guns, X-wings, lightsaber etc manage to form a radial circle around Luke Skywalker. Frankly, they don’t make movie posters like they used to. Again, let me point your eyes to the careful use of space to create desired visual and emotional effects.

To sum up, here’s what’s important about space in visual design:

  • Proper use of space is required if you want to create the right context for your images.
  • There is no hard and fast rule to providing space in a design. It’s a matter of gut feel, and allowing elements to have "breathing space" or be isolated enough to appear important.
  • Space can provide visual depth, or even remove depth (depending on how you use it)
  • Less is more, but not always. It’s always good to have clean, simple designs with generous space allowances, but expert users will know how to fill up the space effectively (see WSJ eg.)
  • Proper use of space, especially in interior design, creates ideal environments to work and live in. That’s why, as common sense tells you, you shouldn’t clutter your house with stuff! And neither should visuals be cluttered with too many elements.

2 Replies to “Visual Literacy IV: Give Space”

Leave a Reply