7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 2Length: 8 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Communicating Whitespace to Your Clients

Designers love it, clients want to fill it. Whitespace seems to be one of the most controversial aspects of design. We, as designers, are taught early on that whitespace is a fundamental building block of design, yet we’re notoriously bad at articulating that fact to others. Let’s see how we can work to improve that.

Relevant Links

1.2 Communicating Whitespace to Your Clients

[SOUND] Hello and welcome to this video on the importance of whitespace. My name is Paul Boag and I'm gonna share with you how to go about explaining the role of whitespace to your clients. Because as designers, we know, don't we, that whitespace is a fundamental building block of good design. It's one of the first things that we're taught. However, to many clients it's simply a waste of space that could be used better to promote their messages, services or products. Now although we know that whitespace is a key component of design, I think many of us are pretty bad articulating why. So in this video I want to explain why whitespace matters, and how to keep whitespace in a design without compromising the client's business objectives. However, before we can do that, we first need to have a clear definition of what we mean by whitespace. Because as designers, we talk about whitespace when actually we mean negative space. In other words, space where screen elements don't appear, that's not always white, is it? Whitespace may be a color or a texture, but either way, it's the space within the design that doesn't include screen elements. This negative space is a key component to design, the space between elements is just as important as the elements itself. Whitespace is a fundamental element of design, and for good reason. Used well, it can transform a design and provide many benefits. Now some of those benefits are purely aesthetic, but others have a tangible impact on the effectiveness of the site. Let’s look at ways that negative or whitespace can improve the effectiveness of your site. The most obvious benefit of whitespace is that increases legibility. You only need to compare the various line spaces on the video you're seeing now to see just how important whitespace is to improve legibility. Believe it or not, whitespace between paragraphs and between blocks of text actually helps people understand what they're reading better. According to research in 2004, this kind of whitespace increases comprehension by almost 20%. Whitespace can also be a powerful way of drawing the user's attention to particular screen elements. To a non-designer, the most obvious way of making something stand out is to make it bigger, hence clients always ask2 to make their logo bigger. However, often surrounding an item with whitespace can be just as effective as making it larger. Finally, the use of whitespace can be a powerful way of communicating elegance, openness, and freshness. Obviously, this isn't always the design look and feel that you're trying to communicate. However when it is, you can't do better than having loads of whitespace in the design. Hopefully you can begin to understand how we go about communicating the benefits of whitespace. However, even with the best intention in the world, whitespace can often get pushed out of a design. So in order to prevent that, you need to understand why it happens and how to combat it. I believe there are three primary reasons that whitespace is often pushed out of the design, and if you understand what these reasons are, then you can begin to deal with them. And your design stands a better chance of maintaining the whitespace it so desperately needs. So, let's start by looking at the fold. Whitespace is often pushed down because there's somebody within an organization that believes users don't scroll. The result is they insist that as much content as possible is placed high on the page and that just sucks any whitespace out of the design. However, the belief that users don't scroll was proved false as early as 1997, and modern studies have shown that users routinely scroll to the very bottom of a page. In addition, it's important to remember that we don't know the point at which users start to scroll anyway. It's dependent on the operating system, the browser, the resolution, and the device. In the end, worrying about the fold is a completely false economy. That said, it's still good practice to ensure your primary calls to action and content are near the top of the page. However, this isn't to suggest other content should be ignored, what it is, is to place the most important content high on the page. But be careful you don't reduce the prominence of that key content because it's overwhelmed by the proximity of lesser content. Another good reason for whitespace being removed from a design is because there's a desire to communicate too much information at any one time. Most clients have a lot they want to say but unfortunately users only have limited attention. It is therefore important that you spend that user attention wisely, and don't try and say too much at any one time. The Google and Yahoo home pages are great examples of this problem. Both Google and Yahoo offer similar services. However, they have radically different approaches to their homepages. As you can see from these screenshots, Yahoo tries to get the user to look at everything at once, a mistake that many clients make. Google, on the other hand, recognizes that users have limited attention, and so uses white space to focus people's attention on the primary offering first, that of search. By looking at the two home pages, let alone the relative income of those two companies, it's immediately apparent which one is more effective. Of course, even with the best will in the world sometimes a client is forced to add content to a page because of internal politics. When somebody higher in the organization insists his or her pet project appears on the home page, there's little either you or the client can do about it. This is where the book Laws of Simplicity offers some great advice. If you can't remove a piece of content from a design, then try shrinking it or hiding it. Take, for example, the approach I used when working on the Wilshire farm foods home page. For various reasons, it was decided the home page should include food and health news. Despite the fact that this information distracted from the primary call to action of buying a meal, and that very few users were actually interested in that. My solution to this problem was to hide that content, unless the user specifically chose to view it. A simple piece of JavaScript enabled the user to expand it on request. This hid the content, or shrank it by default unless the user decided to click on it, and that provided more space for whitespace. There is little doubt that whitespace is a valuable design tool and can make any website more effective. What's more, I see no reason why it's such a point of friction between designers and clients. I believe that any design can maintain great whitespace while still pleasing the client, if we take time to explain the role of whitespace properly.

Back to the top