The Importance of Whitespace (Fight The Urge To Fill It In)

"But that example of whitespace above is obvious - of course the one on the left looks better."

Whitespace is essential for your website design (and all design). What is it? How do we use it? Why do we care?

What is it?

Whitespace is the negative space around something else. "Something else" could be text, a photo, lines, drawings, a button, whatever. If the background color of your website is blue, then your whitespace would be blue. The color white has nothing to do with whitespace.

Another example to explain whitespace:

Look at a wall inside your office or house. The wall is the whitespace. Anything else on the wall isn't. Is there a painting hanging there? A window? Those are elements with whitespace (wall) around them.

The example above of text-only is obvious. It seems almost intuitive and "of course" you wouldn't touch the text to edges of a box. And "of course" a few words of text looks better than a big wall of it.

The problem is it becomes trickier to "see" when you introduce more elements.

With only text (or only images, or only circles...) anyone can see the whitespace and its importance more easily. It's harder for most people to understand the whitespace once you add in text, photos, lines, background colors, buttons, and other elements of a website.

In the illustration above, what is most important on the left side? What about the right side? On the left, the blue circle look important, maybe the 3 yellow circles below are important too. On the right, nothing looks important. Everything is fighting for attention. By trying to make everything important, we instead made nothing important. On the left, whitespace guided us to look at the blue circle first, then the 3 yellow circles. It was a natural flow and easy for us to follow.

Often people want to reduce the whitespace between sections, between elements when in reality they need room to breathe.

This post has examples of whitespace in it too.

Imagine if I didn't have any line breaks or paragraphs? Imagine if everything was one giant block of text, sentence after sentence.

Not only would it be mentally exhausting to read, you probably would have skipped it altogether and not read a word.

How do we use it?

In part 2, we'll learn how whitespace can lead your customer to what is important, what to read or pay attention to, guide them throughout the page, and make it easier for them to skim while still learning what is important.

P.S. No one ever thinks to hang a painting at the top of a wall or in the corner, we center it (or space them out evenly if we hang a few). We also never hang 100 frames on a single wall. So why do you think people often try to jam so much into their design then—especially on the homepage their website?

The Importance of Whitespace Part 2 (How to create whitespace with groups)