How to make whitespace work on the Web

July 23, 2014

thumbnail The term white space is sometimes used interchangeably with negative space, and the concept is the same. Though the term refers to “white” space in particular, the area in question does not have to be white at all. It’s just the empty space around the elements of a webpage layout.

Space like this can come in many different forms, such as the space in between images and graphics, gutters, margins, columns and even lines of type. While it seems to be made of “nothing”—only in that no other design element occupies the space—white space should not be treated in that manner. Treating it as “nothing” can lead to missed opportunities in designing something truly aesthetic and appealing.

White space, done right, can actually provide a good amount of benefit to web design. Instead of reducing white space in web design, go against the grain and make sure to increase white space on a webpage. Some well-known and popular brands are already moving in this direction, and it’s time that more designers followed their lead.

More white space equals a more luxurious brand and website

Clients typically want designers to use up as much space as possible on a website since it can be costly to pay for site real estate, and there are screen limits to where messaging can be included. However, doing the opposite—increasing white space—prompts the designer to craft a smarter brand message in a more restrictive space.

In addition, perception will be that a website with more white space is one whose content is more vital than its screen space. As a result, a brand seems more luxurious because it appears able to sacrifice more screen space to focus on its content messaging instead.

Luxury brands haven’t failed to understand this phenomenon and regularly use more white space to achieve this precise effect. Pottery Barn is a well-known retailer of more upscale home furnishings, and its website’s smart use of white space reflects this to a tee. White space dominates on the homepage, with a lot of it existing on the sides of the page to better direct site visitors’ attention to its deals and promotions in the middle of the page. Even the brand name itself features generous white space between the characters at the top of the page.

White space to promote smooth searches

A simple, though ideal, demonstration of the effective simplicity of white space can be seen in two major search engines: Google and Yahoo Search.

Google understands precisely that users looking for a certain search topic don’t want to be distracted with loud backgrounds and ads. Therefore, white space dominates the entire Google search engine page, with the actual search only occupying a thin sliver of space in the middle of the page. Similarly, Yahoo Search embodies this smart use of white space, too. While the webpage does have a pretty long menu bar at the top, the idea’s the same: a lot of white space so that the user can concentrate on the search and nothing but the search.

Readability and legibility get a much-deserved boost

Readability and legibility on any given website are bolstered when white space is smartly used. If the text on a page is squished together excessively, then it will get in the way of a comfortable reading experience, which hampers the overall user experience. More white space improves the reading experience by making text easier to scan, adding also to comprehension.

One individual’s site that has a handle on this principle is Information Highwayman, which is the site of D Bnonn Tennant, a copywriter and marketer. As someone who boasts he knows what great web content can do for any small business, it’s reassuring to see that Tennant practices what he preaches on his own site. The spacing between characters in the headline copy, text and menu bar is conducive to ensuring readability and legibility.

White space can also be used in between different sections of content, not only to improve the reading experience, but to break up various parts of content for easier absorption of information. Andrew Lucas’ site demonstrates this nicely. He’s a web designer from London, and he uses white space effectively on his homepage.

It makes colors more vivid

Perhaps the most direct, though simplest, benefit of white space is that it makes other colors on a website stand out to the point that they’re brighter than ever. This is very helpful for catching the eye of the site visitor, as the colors’ depth, richness and even intensity are emphasized more than ever.

The web designer behind the I Am Dan website gets this so well that he epitomizes this concept on his homepage with his sparse use of color. Much of his website is just white space that’s broken up by the rare splash of red. Because of this tactic, the red colors highlighting links to his portfolio and inviting site visitors to browse his site stand out effectively, thus increasing the chances that visitors will complete the call to action.

Zurb is a web-design company that also demonstrates how white space can make colors stand out. Its homepage is characterized by one solid color at the top of the homepage and colorful icons to different webpages (right by the fold). Aside from this minimal use of color, the whole design of the homepage features white space.

Simple colors like green, orange and red will have the effect of creating a look that’s both pleasant and well-focused. Both of the sites mentioned above take a minimalist approach to color because there is so much white space. As a result, the colors are used very judiciously, which makes users appreciate them all the more.

White space is not wasted space

Web designers have to increasingly move away from the mistaken belief that they have to cram every element and color possible into the screen when designing a site. As illustrated in the examples above, white space can make a powerful impact when it’s used in such a way to highlight a brand’s content, boost readability and legibility and make minimalist colors stand out.

The phrase “less is more” truly applies to the whole concept of white space, no matter how you look at it. In a broader sense, this take on minimalism in web design has also been getting popular lately, and it’s certainly a trend that will continue.