How to make whitespace work on the Web

Default avatar.
July 23, 2014
How to make whitespace work on the Web.

thumbnailThe 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.

pottery_barn

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.

information_highwayman

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.

andrew_lucas

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.

i_am_dan

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.

zurb

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.

Marc Schenker

Marc‚Äôs a copywriter who covers design news for Web Designer Depot. Find out more about him at marcschenker​copywriter​.com.

Read Next

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…