Using White Space: How Emptiness Can Give So Much to Design

Before we start, take a look at this video:

What did you notice? Most likely, Rowan Atkinson's incredible wit, but did you notice the way he makes use of silence to make people laugh? That's called comic timing and it's one of the most important skills for a successful comedian to possess.

Try to imagine Rowan's performance without those pauses in-between. It's not so funny now because the silence is key to what makes each joke work. This is silence with an important purpose.

The same situation exists in music – though it might be in the form of a lull before a loud crescendo rather than complete silence.

( https://www.youtube.com/watch?v=FXfUt1GEiWw )

In the example above, notice how the beat 'drops' at 0.45 seconds and again at 1.29? The quietness builds the drama for what is coming up next.

So, in both examples above we can see that being quietness is a critical factor when you want to focus someone's attention – and that is precisely what 'white space' is all about.

In terms of web design, white space usually refers to the areas with no text or imagery. We can think of it as 'visual silence'. In order for our design to function properly, we need to use white space in good rhythm with our used space.

Though Google hasn't always been known for their pure design skill, they've certainly always been a great advocate for white space, as their famous homepage attests. Lanched at a time when competitors like Yahoo! were tightly packing their pages, Google's low-clutter interface let their users focus on the main task at hand – searching the web – without drawing their attention to places they're not interested in.

It's hard to fully appreciate how radical that design decision was nearly 20 years later.

There are actually two types of white space:

Active White Space: This is the space in between elements in the design which is often added for emphasis and structure. This type is asymmetrical and makes the design look more dynamic and active.

Passive White Space: It's the space between words on a line or the space surrounding a logo or some other graphical element.

Take a look at 500px's homepage to see how active and passive white space is used.

When dealing with White Space, we're mostly concerned with the Active White Space, but we still need to pay close attention to the Passive White Spaces and how it works with our general design.

There are two sizes of white space:

Micro White Space: is the term that is given to the smaller area of white space, between letters and words and between graphical elements adjacent to one another. Adjusting the micro white space in a design generally adjusts the overall tone of a design without changing its soul – similar to dialing down the BPM in a dance song. It's the same song but sleepier.

As outlined in the image above, you can clearly see the space between the "Log In" and "Sign up" buttons, and the Micro White Space between the heading and the paragraph.

Macro White Space: is the term given to the larger volumes of white space, such as the space between columns or paragraphs. Optimizing your 'macro white space' often changes your design drastically, with the potential to improve your user's flow and rhythm throughout the web page.

The sides and the empty footer clearly represents the 'macro white space' in the Tumblr design.

Continue reading %Using White Space: How Emptiness Can Give So Much to Design%

by Saad Al-Sabbagh via SitePoint