Adobe Creative Cloud

April 21, 2016 /

The Importance of Whitespace in Web Design

Here’s a powerful design tool for you:

 

 

 

 

See?

No?

That’s whitespace!

Okay, unfunny. I admit. Sorry about that.

But even though my attempt at demonstrating the power of whitespace isn’t perfect, the fact still stands… And it’s that whitespace is one of the most important tools in web design, yet it somehow remains overlooked at the same time.

And okay … I know … it’s much more fun to work on some other elements of a website design, things like color scheme, or typography, or general layout, and so on. Especially when creating the project for a client. (On a personal note, I don’t think there’s a client in the world that gets excited thinking about “how great whitespace is going to be on their new site!”)

But nevertheless, whitespace can be exceptionally beneficial when used right. Here’s why:

Why whitespace is important in web design

First off, whitespace is not a new concept in design. For centuries, it’s been used as the no.1 tool when things that mattered needed some additional focus.

Today? It works just the same. For example, if you have a nice painting and you want to give it a proper attention on your wall, then the best way to do it is to: (a) put a frame around it, and (b) make sure that there’s nothing else on that wall (see below).

painting

Similarly, the best way to make something more visible on a website is to put *nothing* around it, and the more of the *nothing* the better.

But let me give you an example instead of just talking about it.

Here’s a website you might be familiar with:

google

Google’s been using this look for years now. At this point, we seem to take it for granted and we don’t analyze it all that much anymore.

But just stop and think how easy it would be for Google to put loads of things on that page. They could include Google News there … after all, people like to read that. They could include a Gmail block … so everybody can see their inbox right there. They could include a Google Calendar block, or some Google Shopping goodies. And on and on and on.

The possibilities are endless.

Yet, they decided to do none of that.

They decided to have only the search field (plus the logo, plus some stuff in the top right if you’re logged in).

So … why? Why only the search field?

The answer is simple, and I’m sure you already know what it is – by having just the search field on its own, they’re making it clear what the purpose of that page is. Immediately upon arriving on it, the visitor knows what it’s about and how to use it. There’s no guess work.

And all that is very much in tune with Google’s main goal. They want you to use their search engine, and whitespace is one of the things that Google uses to encourage you to do so.

Just to recap, good whitespace use can:

  • strengthen your call to action,
  • improve focus,
  • make the purpose of the website clearer,
  • put emphasis on the important stuff,
  • make the less important stuff less visible,
  • help the visitor scan the page and decide what’s important right away.

So with all that in mind, here’s how to use whitespace effectively:

How to use whitespace effectively in web design

Let’s talk about whitespace both in terms of the methodology of working with it, and some basic technical how-to (but not in a too hands-on-tools kind of way).

1. Use whitespace to reinforce your main goal

So, every website and every webpage on that website has its own goal. It can be one goal for all pages, or individual goals for each of them. Whatever it might be, though, you can use whitespace to make those goals more obvious and more in-your-face, so to speak.

For example, take a look at this new homepage of Bigcommerce:

bigcommerce

It’s clear that the main goal is to convince you – the visitor – to sign up for a free trial with Bigcommerce. There really is nothing on the page apart from that large headline block that does the convincing, and a lot of whitespace around it.

Well, okay, there is that image presenting an example e-commerce installation, but it opens to the main copy area of the layout, thus increasing the emphasis on the headline even more.

Although I don’t have much experience with Bigcommerce, I’m sure they could have shown a lot more stuff on that first homepage panel. Yet, they’ve decided not to do that. Why? To reinforce the main goal of the page.

2. Use whitespace for calls to action

Here’s one of many rules of good web design:

Always assume that the visitor doesn’t know what to do next.

… because why would they know? They’re not the person who built the page. They just stumbled upon it … maybe even accidentally.

Use whitespace to help them figure things out.

The idea is simple. If there’s nearly nothing on a page then you can only interact with the few things that are left.

Here’s an example by Crazy Egg:

crazyegg

Again, we could say that there’s nothing on the page. The design is very Google-like in nature. But it also makes it clear what a user can do.

Even if you’re not familiar with Crazy Egg, you can figure things out right away. There’s an input field with a tip (“Your website URL”) and a button saying, “Show Me My Heatmap.”

That’s a very clear call to action on its own, and the massive whitespace on that page makes it even more clear.

3. Whitespace doesn’t need to be white

This is probably a good moment to tackle one misconception. Whitespace doesn’t need to necessarily be white.

In simple terms, whitespace stands for an absence of other design vehicles, and not so much for the presence of space that’s white.

In that manner, you can use various elements as your whitespace. First of all, use whatever colors you like. Example by Marshall:

marshallamps

Then, you can also use highly blurred background images or images that have been distorted in some other way. Example by Zapier:

zapier

Lastly, you can even risk using a fully sharp background images, as long as they’re in high contrast to what’s in the foreground. This is risky though. Example by Grammarly, that somehow pulls it off:

grammarly

4. Use whitespace in hero sections

(We talked about hero images and hero sections in a more in-depth way a couple of weeks ago, by the way.)

The header or the hero section of a website design seems like the natural habitat for whitespace. And rightly so. You’re going to find that using whitespace in those areas is the easiest, and it also gives you the most bang for your buck, so to speak.

What I mean is that the top section of a website design is the area that every visitor sees… Only a portion of them decide to scroll down, but everyone sees that top area. So capitalize on this by making sure that your whitespace game is on point, exactly in that first section.

For example, take a look at this page by Teespring:

teespring

There’s a lot of stuff going on below the hero section, and there’s much less whitespace. But that top area still does a great job of reinforcing the goal and making everything clear for the visitor.

5. Use whitespace for emotional response

There are a lot of tools at your disposal if it’s emotions that you’re after.

You can use color, you can use good imagery, but you can also use whitespace.

All of those elements do a great job when it comes to establishing the emotion itself, but it’s whitespace that can add additional drama to the situation. Just like it can emphasize the goal of the page, it can emphasize emotion as well.

Take a look at this example by Todoist:

todoist

Todoist is a to-do list tool. But through good whitespace use around the main headline, they let the background image shine and convey some positive emotion. Instead of showing the tool itself, they went for an image of a happy guy who’s just enjoying his day, after what seems like loads of tasks crossed off his to-do list.

6. Fight the designer’s urge to fill in the blanks

Hey, we’re just humans. We like to fill in the blanks.

When we see a blank space, we naturally want to put something there.

“Oh look, there’s some room on this shelf! How about I buy some more books!” – we’re thinking minutes before departing to Barnes & Noble.

But this, very human, mindset can be a problem for a designer. Unlike with bookshelves, website design isn’t a scenario in which you should aim to fill in all the blanks.

So, start like this instead:

  • Pick a goal for the page and single out one sole element that makes that goal possible – usually something like a “headline + call to action” combo.
  • Place that element in the middle of the design.
  • Create a safe space around it.
  • Start adding other elements outside of that safe space’s boundaries.

7.  Think what you can remove, not what you can add

This is connected to the previous point, but it goes somewhat the other way around.

So once you do have a design that’s fairly ready, but you feel that there’s maybe a bit too much stuff here and there, start thinking what you can remove from the page that won’t have a negative impact on the main goal.

And the more you can ditch, the better.

As the old saying goes, and I’m probably butchering it a bit, you can consider your design complete if there’s nothing more you can remove from it, not if there’s nothing more to add.

8. The bigger the typography, the more whitespace around it you need

Big headlines are very much in fashion these days. Especially in the age of minimal (flat) designs, and the prevalent conversion-centered mindset.

But big typography needs room to breathe. If there’s not enough space around your huge headlines, the whole thing loses all of its power and starts being difficult to read … not to mention not effective.

So the rule of thumb would be this: Use huge typography as long as you can afford to use whitespace in a similarly huge volumes.

Check out this example by Dior:

dior

Notice the huge headline and the amount of space that’s around it.

Whitespace on mobile?

Be careful here. Even though the general principles still stand, and whitespace can be just as beneficial for mobile-bound designs, there’s a very fine line between what is considered “good whitespace use” on mobile vs. “having too many blank spaces.”

This is often a matter of a handful of pixels in one direction or another, and it’s way too easy to go from a great user experience to an interface that’s difficult to navigate due to all the breaks and blank spaces.

A good goal to aim for, although I know that it can be difficult, is to try to force every individual block of crucial content (such as a headline + call to action) to take up the entire screen of the device.

For instance, check out this design by Evernote when viewed via mobile:

evernote

That main block takes up the whole screen. From there, the user can scroll down to see what else is on the page.

The difficulty here is that you’ll have to deal with a lot of different devices, and while you can create specific conditions for the most popular ones, making sure that the design looks correct on everything is basically impossible. Add to this that it also usually needs to render great on desktop, and we have a whole different level of difficulty.

So the main message here is to just be careful. Stick to general principles of utilizing whitespace without anything too drastic, and you should be just okay.

Your take?

Are you a fan of whitespace (if that makes sense)? Also, how do you deal with clients who tend to say something along the lines of, “I need all the things on that page, Mr. Designer!”?

Join the discussion

  • By Kyle Davis - 12:24 PM on May 4, 2016  

    This was a really good article and helpful in making some points towards better design. I work for a b2b company with product heavy pages and I want to implement more white space on the site. It is a constant battle to do this. What do you suggest on pages like that? (like at the end of your article you say, “Mr. Designer, we want all of this…”)

  • By Edgar Oliveira - 6:52 PM on May 9, 2016  

    Many thanks for your post!