The Importance of Whitespace Part 2 (How to create whitespace with groups)
In Part 1, we covered what whitespace is, below in part 2 we will learn how to use it.
How to use whitespace
Whitespace is a fundamental design element that contributes to other principles of design like proximity and visual hierarchy. In the example below, you can see how whitespace between the circles automatically creates "groups" in our mind (directly below). This is proximity.
In the proximity principle, shown above, you can see how the whitespace between the circles creates two groups.
Why do we want to group things?
- Hierarchy
- Easier to comprehend
- Easier to skim
- Focusing attention
- Calling out important information
By using whitespace to create proximity, you can group content together. If an image, heading and text all go together, it makes sense for them to be grouped together. Grouping allows us to skim the page better too.
And skimming can be a good thing for your website users. They are able to scan to find what is important or interesting to them. If you had a giant wall of text, no one would find something they cared about, especially in the middle of it. If you broke it up into photos, captions, headings, buttons with lots of whitespace around the groupings, it's easy to find what you want.
Take Apple's iPad landing page for example, shown in the diagram below:
On Apple's actual design, on the left side of the diagram, they dedicate a full-width section to each product they want to showcase. There is plenty of padding (whitespace) on the top and bottom of each section. Within each section there is more whitespace between the elements, such as the photo and the text. Then there is even more within the text in regards to the price, buy button, and learn more link.
Everything has its place. The content has room to breathe. Easy to follow. Easy to digest. Clear visual hierarchy on the page.
Now what if we took away that whitespace? (See examples on the right side of the diagram.)
Designers are asked to "fill in the whitespace" all the time. People either want it removed or to add more and more in its place. Above, Apple's products start getting crammed for space—and do you know which item is most important anymore? What are they even promoting? If "everything is important," then nothing is important.
Despite just looking more professional, their actual design on the left is easy to skim & digest. It's easy to skip directly to each section and find the important details. Once you find the one that suits your interest, then you can read more information.
Whitespace makes you want to keep reading
There are other ways to use whitespace to keep your customers interested too. Some of them are more subtle. Let's look at this article (the one you're reading now) and the text in it.
With a combination of headings, illustrations, bulleted lists and small paragraphs, it makes it easy to skim and makes it feel like a lighter read.
Bulleted lists also have a "built-in" white space that happens automatically:
- Text is indented
- The text is short
- Lots of "built-in" whitespace to the right
- Easy to digest
When writing your own content, blog articles, emails, or even just copy on your homepage, make sure to include whitespace via headings, bullets, shorter paragraphs, etc. to help make the content more inviting for your customers.
So far I could have written everything above as one long paragraph. No paragraph breaks, no illustrations, just sentence after sentence.
All of the same text would be there. One would make you turn away fast, the other makes you want to read it (or at least give it a chance because it looks easy enough).
More whitespace isn't always better
When is too much, um, too much?
There are a lot of times when more whitespace does make sense, but make sure you know why you are doing it.
LinkedIn messed up whitespace with bulleted lists:
Originally, I had this article posted on LinkedIn. At the time of writing, at least, within the formatting of their articles they actually have too much whitespace between bulleted list items. This causes the opposite effect of what a bulleted list actually is. It is a grouping. Therefore, visually it should be viewed as a "group" more easily. See the illustration below:
Squint your eyes, and you'll really see the difference it makes. As you can see on the left, in the current setup, the spacing between list items is the same as the spacing between paragraphs. On the right, a proposed better solution would be removing some of the space between the bullets. One looks like a group of bullets, the other looks like individual & separate paragraphs.
So don't be afraid of whitespace.Embrace it going forward to help direct your customers where to go and to what is important.
P.S. Remember to use more whitespace around something to draw focus to it. Use less of it between items when you want to "group" them (like the bullets example above).