Don’t forget the power of the negative space

I think the best way to describe the negative space (or white space) in design field is to compare it to the pause in a musical song.
A well calculated pause will put the right emphasis on the music that will follow.
It permits to create what is called invisible design; just think to everyday experiences and you’ll notice that backgrounds
tend to be unseen. Going back to the musical metaphor , you don’t listen to the pause, you listen to the music even if the pause is part of the composition.

White space is a fundamental communication tool. I’m not saying just to abuse of it. It has multiple purposes and implications and must be calculated with the same care of the graphic elements. Too much white space can cause communication issues as well as a cramped one.

How to decide the right amount of negative space?

Deciding the right amount of negative space requires a great visual sensitivity and skill.
The choice is mostly dictated by the context as well :

  • the mood you are trying to obtain ( a luxury website will need more space than an informative one )
  • the quantity of information you have to deliver (negative space is expensive)
  • the medium you are designing for (print, web browsers, smart phones…)

Negative space in practice

Let’s see some best practices and their related purposes…

To separate independent groups

In Simon Collison’s blog we can see how negative space is cleverly used to separate different groups(pink coded areas) of information. Less space to separate similar groups in the left column , more space between two different articles (on the right ) and some more between sidebar and the main content to indicate the two macro-sections of the blog.
Actually, you can see some more sub-grouping work inside the pink areas (post title, post date, main text, metadata).

To give a stylish mood

In the Garrard website negative space is used to enhance a luxury mood.

Another stylish example is the header of Nation website

Mark Boulton’s article on ALA gives a closer look at brand positioning trough negative space.

To eliminate visual tense and give some rest to the eyes

Look at the difference between the same page with and without negative space to separate sections.
Notice that I just modified the margins of the sections, the leading is the same in both images.
In the second image it’s harder to understand where a message ends and the next starts.

To catch the attention of the viewer

In this example we can see how powerful is the isolation of the text (combined with contrast) in the pink coded area. Here we have a compelling call to action, a very effective use of negative space.

To improve the reader experience and understanding

This research shows how margins and leading do affect reading performance and text comprehension.


So have you got some good and effective examples of negative space to share?

13

6 Responses

  1. Liz
    April 7, 2010
  2. ElioHoHo
    April 8, 2010
  3. monica aguinaga
    April 26, 2010
  4. Anreal
    September 18, 2010
    • Michela
      September 19, 2010
  5. Dr.Redwanul Huq
    May 21, 2013

Write a response