I’ve got a problem with whitespace.
I’m primarily pissed off because it’s all I see every time I try to sit down and scrape together a new article. On the bright side, however, I find it deliciously ironic that I get to spell it without an actual space between the words.
But that’s neither here nor there.
Chances are you’re probably less interested in my odd linguistic interpretations than you are in the use and utility of whitespace within the wide world of web design. And I can’t blame you. That’s a far more compelling subject.
Whitespace is a well-known and highly touted design technique that has become increasingly trendy over the past few years. All of the most attractive website layouts these days have a uniquely minimalist aesthetic, and whitespace is always a major factor in anything minimalist.
To define it bluntly, it’s the blank space on a page, which isn’t necessarily as pasty-hued as the name would imply. Whitespace can be any color, so it’s probably more accurate to refer to it as negative space, but that doesn’t roll off the tongue quite as nicely. Not to mention it lacks the aforementioned tasty irony.
Either way, it’s used to emphasize content and draw attention to a webpage’s most important messages. Whitespace helps you develop an on-page visual hierarchy. In other words, along with all your other design elements like color, typography, and imagery; whitespace helps define the priorities of your page’s content. It also enhances readability: improves legibility, decreases clutter, and minimizes overwhelm. It even can even create an impression of grace, style, and class.
Simply put, whitespace is vital to a sense of balance within your overall design.
Of course, knowing all of this hardly helps if you don’t also understand know how to put the emptiness surrounding your content to good use. So let’s delve into the void and discover the proper techniques to use whitespace and learn why these methods are so effective.
Enhancing Usability
Besides giving your website that enviable and elegant minimalist mystique, whitespace serves a more practical purpose. It enhances usability. Through intelligent spacing between paragraphs and in the margins, you can increase reader comprehension by more than 20% as noted by Smashing Magazine back in 2009. There are, of course, many more interesting aspects to whitespace’s effects on usability, but first and foremost are its ameliorating consequences in regards to legibility.
Legibility
When text and/or content is smashed together, tightly spaced, or otherwise overly cluttered the results can be, well, kind off putting.
The problem with the lack of empty space is it results in an overwhelming display of, for lack of a better term: unintelligible, invisible, Norwegian nonsense.
Now compare this monstrous maelstrom of image and text to a more subdued interface that still displays a ton of items you might be interested in purchasing in the upcoming holiday season:
Ah. That’s better. The contrast between these two sites is such a relief you can almost forgive Wally-world for trying to kill Tracy Morgan. One battle at a time I suppose.
Dramatically overgeneralized and intentionally incendiary statements aside, note how each item on the webpage has its own space to breathe. Everything is clearly visible and easily legible. The images are spaced properly and the text has the elbow room required for comprehension.
They don’t make bazillions of dollars per year by coincidence folks.
One reason why this design is so effective is all the elements on the page are intuitively clickable. Whitespace has a role to play in this respect as well.
Prioritizing content
The entire point of owning your own bit of web real estate is having a space that’s dedicated to distributing your content. The question becomes how do you effectively display the most important points that your online presence is supposed to make? The answer is by allowing it to stand out.
You can actually inhibit your user flow by crowding your content. As we saw with in the picture above: a webpage devoid of whitespace becomes uniformly unreadable. You can’t pick out important content when everything looks the same. Much less detect which bit of content is more important than another. If you want your most important content to stand out you have to isolate it, like an island in an empty sea.
Doing so will increase legibility as we’ve already discussed. Additionally, it will help your visitors find the content they want more quickly. Moreover, it can help you direct user attention from one section of your site to the next. Using whitespace as a tool to manipulate user flows is known as active whitespace. It’s inverse, passive whitespace, consists of all the margins and spacing within the typography itself.
Effective use of both passive and active whitespace will proved your designs with an elegant feel that will impress and engage your audience.
A Sense of Sophistication
Credibility and quality go hand in hand, and when your site is effectively implementing whitespace within its overall design, your users feel assured of both in regards to your brand. The minimalist aesthetic leaves the imagination free to infer the value of your content. Not only that, but providing the space for your content to breathe gives the impression of elegance, sophistication and even notoriety.
Need an example? Let’s go with something a little classier than Walmart this time.
Are you not enticed—nay… compelled, to examine the fine jewelry that lay beyond yonder clickable image? If the answer to that question was anything but an emphatic yes, then you must be made of stone. Or perhaps just not into ladies jewelry.
Well, try this other bit of consumer porn on for size:
Haha! Bet you want to retile your walls now. Well, unless you’re in Italy, or like really loaded, this is probably unavailable to you. Look upon these works and envy.
The point here is that all this negative space just scream style, grace, and unflappable poise. What’s more these layouts actually manage to look nice across different viewports. Which brings us to our next point.
Whitespace and RWD
One constant concern at the forefront of any designer’s mind is how to effectively implement a trend or technique responsively. Whitespace can also have a big impact on a mobile device, though it’s often maligned due to the space constraints on a smartphone with a smaller screen.
There are many examples of ways to effectively implement RWD, but it can sometimes be difficult to justify dedicating valuable space to the absence of content to your clients. It then becomes important to explain the perhaps counterintuitive notion that successful integration of whitespace in a mobile viewport is often more important than it would be normally.
This is because a mobile viewport is already crowded, so passive and active whitespace can make a huge difference in the look and feel of a mobile UI. Passive whitespace plays an important role in legibility as we’ve already covered, and on a viewport small enough to make some people squint, this becomes doubly important. Similarly, if you’re going to have your users finger-scrolling through all your content, you’d best make damn sure they can figure out which elements are the most important by isolating the clickable buttons and so on.
If you think the crowded and overwhelming text and images we referenced above looks bad on a desktop, just imagine it on something you hold in your hands.
Web design is a complex topic. There are a million things you can implement and a thousand different methods for putting them on the page. In a world so filled with complexity, it’s nice to know that one of the main principles designers use in their work is one dedicated to simplicity. What are some of your favorite examples of whitespace in web design? Let us know in the comments.