Home | Experience Design

The wonderous (and sometimes forgotten) world of white space

Alex Christie

1 March 2010

For this post the examples are focussed on web design however the points remain true with many other forms of design.

For those unfamiliar with the term white space, here is what Wikipedia have to say about it:

“White space or whitespace refers to the blank (white) area between written characters or graphic regions.” – Wikipedia

This is a fundamental aspect of design and yet one that can sadly be all-too-often overlooked. Below are some examples, click the image to go to the site in question.

Common misconceptions:

White space is wasted space – absolutely not. While content should be the focus of the design, the amount of content and the effect of the content needs to be carefully balanced. Some of the most important content can be given a greater impact by letting it sit in a minimal design. The layout and design should be appropriate for the content.

-

Marko Masnjak

-

The Rules of a Gentleman

a

White space has to be white – not really, white space is a general term given to the area between more prominent design elements which, really, can be on any background so long as it does not intrude on the layout. The importance is the space between elements. Imagery can become part of the deisgn.

A great example of a bold design and still respecting white space (or in this case greyspace)

-

ECTOMACHINE

-

White space means minimal – ou contraire. While minimal design does use a lot of white space, you can in fact show a lot of content if the design uses white space effectively in an easily understandable way.

Below is an example of a layout with a lot of content but due to the spacing it seems entirely manageable. Below are all my unread RSS feeds (over 1000 as Google keeps reminding me) and my Twitter stream combined into an easily digestible layout. This is called Feedly and is available as a plugin for Firefox and Chrome. It illustrates the point beautifully that a lot of content can also look good if spaced correctly.

-

Feedly Cover

-

Other good examples of large amounts of content in a good layout are design blogs. They are updated several times daily, have a myriad of sections as well as advertising so need to be able to accommodate large quantities of content and still be manageable by the reader. Smashing Magazine and Fubiz are two great examples.

-

Smashing-Magazine

-

Fubiz

-

Some basic do’s and don’ts of white space:

Do – use even spacing and alignment for effective placement of elements

Don’t – necessarily use even spacing, use appropriate spacing. For example when pairing headings to content, the content should be biased towards the heading with a noticeable, if subtle, grouping.

For example, comments. In the following example you either have to scroll to the top or bottom to see whether the poster’s name is aligned to the top or bottom of a comment.

-

Comments - Bad

-

If the alignment was made more obvious with uneven spacing, it becomes a lot clearer.

-

Comments - Good

-

Do – use imagery to aid the design and add a focal point.

Don’t – use an image just to fill a space

Do – show the appropriate amount of content

Don’t – add all the content, just because there is space too. If there is more content that you need to add then consider rewriting parts to more concisely and succinctly convey your message.

The bottom line is that design aids content – be it a one word message or a thousand page document,

“design without content is decoration” – Zeldman

An understanding of white space and spacing in general means an understanding of the positional aesthetic, even clutter can look good.

If there’s one thing to remember about white space is that it is not simply the absence of content. It is the subtle (and all-too-often overlooked) spacing that aids good design.

LEAVE A COMMENT

HOME | WHAT WE DO | CULTURE | THINKING | BLOG | REQUEST A CASEBOOK

IGNITING DIGITAL BRANDS | SEO | SOCIAL MEDIA | JOBS | TALK TO US

CELEBRATING 19 YEARS IN DIGTAL
© TAMAR 2014