White space in content design

Looking into an underrated approach to layout

Looking into an underrated approach to layout

What is white space?

Exploring the subtle art of 'nothingness'

Absence forms presence

White space, also referred to as negative space, is simply the empty space between objects in a design. Despite the term, white space does not need to be white, it just needs to be free of focal points like text or detailed imagery. One could describe it as ‘intentional nothingness’.

It’s an important factor of composition in graphic design and can help to improve reader experience by reducing cognitive load and increasing the visual appeal of a layout.

Design is as much an act of spacing as an act of marking

Ellen Lupton | Cooper-Hewitt, National Design Museum, NYC

Game of space

Designers and clients are scarcely in agreement about the topic. Design theory promotes the use of white space for elegance and ensuring a quality reader experience. On the other hand, many customers and managers consider white space to be 'wasted space' and would rather it be populated with extra information or superfluous visual elements. This conflict has always existed in print design and traditional advertising where space comes at a premium. Luckily for modern marketers, digital ‘real-estate’ is free.

Balancing act

Finding the correct balance takes some practice. Using too little white space often results in clutter. Using too much can look sparse or 'unfinished'.

I’d like the white space more, if there was more stuff in it

clientsfromhell.net

Why use it?

Emptiness may be more valuable than you previously thought

Counteracting clutter

White space helps to ease the process of analysing graphics or content. The human eye is more receptive to an organised layout than one full of visual disturbances.

When there's too much going on in a design, readers disengage - an example of this is that visual clutter has been linked to high bounce rates (source).

A designer knows they have achieved perfection not when there is nothing left to add, but when there is nothing left to take away

Antoine de Saint Exupéry

Reasons to use it

Prominence

Strangely enough, the absence of content is what draws the eye towards content. Large spaces between graphic elements, also called macro white spaces, help greatly in guiding readers through a layout and clarifying focal points.

Aesthetics

White space undoubtedly enhances the aesthetic appeal of a layout. Healthy use of white space is one of the easiest ways to achieve a ‘sophisticated’ look, think Apple or Aesop. It’s as great for branding as it is for your audience.

Comprehension

As well as visual aesthetics, the correct use of white space has been proven to enhance readability and legibility (source). This is a particularly important finding for long-form content where the risk of reader disengagement runs high.

B2B content

We are bombarded with messages on a daily basis and have little patience for visual clutter. White space allows a reader to breathe, is non-intrusive and generally makes it easier to absorb information, so it should be considered as an important design element in the context of B2B content marketing.

How to do it

Tips and tricks to master the technique

Getting it right

Ten pointers for successful implementation of white space in your layouts

Massimo Vignelli sketched his book layouts by hand because for him it was faster than using a computer

1. The Grid

White space and grid systems go hand-in-hand. For inspiration check out Massimo Vignelli and Josef Mülller-Brockmann, two of the world’s most influential graphic designers who swore by their grid systems.

2. Create contrast

The play between negative and positive space creates contrast and enhances visual appeal.

3. Restraint

More often than not we are inclined to fill empty space in a layout. Be brave, resist this urge and reserve a portion of the layout to be free of any visual information. When done correctly, the results are stunning.

4. Balance

Find the balance between sparse and crowded - practice makes perfect!

5. Start small

Identify the minimum copy needed for the page and build the layout up from there.

6. Spread it out

Spread the content over more pages instead of cramming it into as few pages as possible.

7. Visual storytelling

A picture tells a thousand words. Pair striking visual elements with the copy to compliment the content and enhance reader engagement.

8. Focal point

Leave a healthy amount of white space around elements that you wish to draw attention to, like a CTA or product offer.

9. Rule of thirds

The rule of thirds principle works wonders in photography, but many forget it works wonders in design. Experiment by keeping 1 column blank.

10. Push boundaries

Layouts that at first seem 'uneasy' often turn out to be the most effective of them all.

White space is to be regarded as an active element, not a passive background

Jan Tschichold

Examples

White space in the wild

White space in Print

The fixed size constraints of paper makes it easier to experiment with white space than in modern digital design environments where layouts shift according to device resolution.

White space on the Web

Here are some great examples of websites that make use of white space. Focal areas like headings and product graphics are surrounded by large empty margins that direct user attention.

Wrapping up

Concluding the case for white space

White space is simply the empty space between objects in a layout.

Correct use of it has been proven to enhance visual aesthetics, legibility and readability. It should be considered as an active design element. It can be achieved by paying attention to the grid and remembering to resist the urge to fill up empty spaces in a layout. With a little practice, you can achieve stunning and engaging layouts.