It’s tempting to fill in whitespace with images, photos, solid colors, something – anything – to make it less plain. That temptation isn’t usually a good idea. Utilizing whitespace involves more than spacing out pieces of content with paragraphs and line breaks. Whitespace serves a purpose in design, and provides the following benefits to website visitors:
1. Whitespace limits distractions
You’ve seen the popular news sites with moving sliders at the top, fifty article previews arranged in a grid, and an even more chaotic sidebar. How does anyone determine which article to read? It seems like visitors are on their own to click on whatever catches their attention. Then, they’ll click around randomly until they get bored. That’s probably not an issue if your entire website is designed to publish a multitude of news articles and you don’t care what people read. It’s not a good strategy when you have specific content you want visitors to read.
Whitespace limits distractions and allows you to get visitors to focus on the elements you want them to focus on. For example, using bright colors to highlight a particular area of the page will only draw attention to that area when the rest of the page isn’t chaotic.
Buzzfeed.com is an example of a popular site that is completely distracting. Instead of whitespace at the top, they’ve got a slider full of distracting thumbnail images. All of their photos are equally distracting, and many are created for shock value. Every element on the page commands a user’s attention. If you’re running a business or want visitors to pay attention to specific content, don’t use a similar layout.
2. Whitespace improves text legibility
Designers have full control over how close together letters, words, and lines appear. The goal of every designer should be to create a typography set that spaces these elements far enough apart to make the text easy to read.
It’s also important to use whitespace according to the screen a visitor is using to access the content. Content on a lawyer’s website, for example, must be immediately readable to visitors on desktop and mobile devices. Using extended padding and margins contributes to readability on small and large screens.
Consider your audience first. Are they coming to your site with a clear mind, or does your content target emotionally distraught people? If the latter, your visitors will derive benefit from extending line height and letter spacing, and adding extra space between headers and the subsequent paragraph.
3. Whitespace supports efforts to emphasize content
Like a properly framed and matted picture, whitespace supports designers in an effort to emphasize certain elements on a webpage. For instance, Apple.com does a wonderful job using whitespace on all of their pages. The Macbook Air page, for example, draws the visitor’s eyes directly to the product. There’s nothing else to look at.
4. Whitespace makes page content look more professional
The proliferation of WordPress themes with cluttered layouts has caused most websites to look cluttered. Blogs have taken on the appearance of busy news websites with too many options on the home page. Professional businesses use these templates because they don’t know what else is available.
Some businesses make better choices. For example, Rock My Wedding uses a standard blog layout but it’s used with plenty of whitespace all around. Only three categories are shown to the visitor on the main page, and the list of articles is a scrolling carousel but only three are displayed at one time.
Content can easily become clutter if you’re not careful.
5. Whitespace makes navigating a website easier
A website can be navigated from a top menu, sidebar menu, and links in the main content. If the content is cluttered and elements are squished together, users won’t navigate the site as it was intended. Your horizontal main menu might be perfectly legible, but that’s not the only place your links live.
Whitespace makes it easy for people to navigate portions of a website that aren’t considered strictly navigation menus. For example, a page full of content describing the origin of soda pop might have six links. If the content is cluttered and distracting, people won’t click as often as they would if the content had ample whitespace. When a visitor is struggling to read the content of a page, they’re not likely to click links. Whitespace helps visitors read content easily, and as a result, links you offer are more likely to get clicked.
Whitespace isn’t always white, but it always delivers
We call it “whitespace” but whitespace doesn’t need to be white. It can be any color, as long as it creates space, keeps the user focused on a central target, and emphasizes the important elements of the page. Depending on the client, your color scheme may vary.
