White space is so much more than an empty area. It makes everything on the page stand out. It provides room to breathe. It tells the eye where to go. Yet its importance is often overlooked.
What is White Space?
White space doesn’t have to be white. Any area within a design that doesn’t have text or photos is called white space. Some people call it the background or negative space. It can be any color, as long as it is free of embellishment.
It’s tempting to use every bit of space on a web page. You have a great product or service, and there are a lot of reasons it’s the best. You want to let clients know all the ways your business stands out.
Sometimes business owners feel white space is a waste of perfectly good screen. Why would a web designer charge so much to leave a large part of the page empty?
Good web designers know that less is more. Too much information can actually distract the user from what you want them to see. White space is one of the most important features of web design for these reasons:
- White space gives the eyes room to rest. It creates a feeling of space and simplicity.
- Space around text improves legibility. When users see long portions of text cramped together, they feel stress and pressure. When text is brief and surrounded by white space, it feels like easy, comfortable reading. White space-use increases comprehension by 20 percent.
- White space draws attention where you want it. Make call to actions and checkout buttons stand out by surrounding them with white space.
- It creates balance between design elements. Use it to both separate and unify content so users flow from one element to the next.
- White space makes websites feel well-designed. Users come away with an impression of elegant simplicity.
How to Design Using White Space
Try these tips when using white space to direct the eye.
Understand the problem. Think of a time you’ve gone in a store and there’s merchandise everywhere. Long racks of clothes seem to stretch from one wall to the other, and they’re crammed full of merchandise. There are aisles of housewares, each shelf cram-packed with more goods than you can process. The cosmetics department has bins that overflow with product. If you’re a serious bargain shopper with the stamina of an Olympic athlete you might dive in, but most people are overwhelmed.
Contrast that with a store with less merchandise carefully displayed. Which feeling do you want to create? When users know where to look and like what they see, they stay and buy. Users who are overwhelmed leave.
Make readability and legibility top priority. Optimize your text for readability by using wide paragraph margins (the white space around each paragraph) and line spacing (the amount of room left between each line of text). The more space you provide, the better the readability.
UX myths explains common user experience misconceptions to improve web design. Their site is an excellent example of readable text with plenty of white space. Even though there’s a lot of information involved, the user doesn’t feel overwhelmed.
Use fewer than 15 points of user attention. Count the number of screen elements that draw the eye. The title or slogan at the top of the page, the search button, chunks of text, and each individual image all vie for user attention. Make sure there are no more than 15 elements on each page, and fill the rest with white space.
Everything you need to say might not be able to fit on one page, but trying to do too much creates a feeling of clutter and poor design. Limit the factors competing for user attention to get the desired results.
Use white space to signify importance. When there’s plenty of room around important prompts, they have center stage. White space says to stop and consider. If other elements compete for attention, the eye has somewhere else to go. If there’s more to look at past your checkout button, the user might pass it up. Google shows how making almost the whole page white helps focus users on its most important feature, the search bar.
Don’t stuff everything at the top. It’s tempting to try and place everything above the fold. Don’t push everything into the top portion to get it in before the user clicks away. Use white space to welcome the user in. Think of it like stepping into a building or store; if you immediately encounter clutter, you want to walk right back out. If there’s a wide-open space, you have to go all the way in to see what’s inside. Give them plenty of room, and they’ll feel invited to scroll down.
Test your design. Once you’ve completed your design, use analytics to see if your website’s prototype hits the mark. CanvasFlip is one tool that allows you to send prototypes to analyze the conversion funnel and heatmap so you know which part of the flow needs improvement. If your heatmap shows users interacted with the call to action, you know your design is doing what it intended.
White space is like the night sky. You don’t really notice it, but it makes a backdrop for the stars and the moon. The fact that it’s empty makes celestial objects stand out. Use it in your website to make your content shine. Contact an Imagine Monkey web designer to learn how we can utilize white space in your design.
