In websites and in life, we strive for the balance of simplicity and that over-used phrase “less is more”. Without whitespace, your website would be confusing, cheap, and cluttered. When your website is too crowded and every available space is being used, it creates confusion for your users and none of your messages stand out.
After all, when you picture your favorite retailer, the one that encourages you to linger in the aisles, I’m guessing it is not the one that stacks the aisles to the ceiling. Also, have you noticed that some of the most eloquent people are often quiet observers until they have something profound but simple to say? Whitespace is often described as “simple” or “clean” design, but simplicity is usually about clarity and refinement.
What is Whitespace?
Whitespace, also known as negative space, is the space between elements. On a website there are two levels: macro and micro. The macro whitespace is the space around large elements such as backgrounds and the micro is usually the space within elements such as line height, margins and padding.
These are both important for different reasons. Macro whitespace is critical to your branding; you should have a good healthy space around your logo, and a strong spacious background to your page that also supports your brand (with color or some other design element). Micro whitespace is important for legibility and emphasis. When your lines of text are too close together it is difficult to read, and when the text is not separated with headers it is hard to scan through. By providing breathing room for your content and design elements your visitors are able to absorb the content more easily. The content on your page should also be prioritized and you should have a call to action on each page that is differentiated.
Whitespace is Luxurious
Using whitespace also adds a level of elegance and luxury to your design. Consider the difference between a direct mail postcard and an ad in a luxury magazine. Typically a direct mail piece will use starbursts with “act now” and volumes of text. Compare this to a luxury ad, which is often a single large image with a logo and tagline. The message is simple and understated and communicates the idea of extravagance by not filling all the precious ad space with a sales pitch.
How to use Whitespace
Start by adding a good amount of space between your lines of text. You might be surprised at how much easier this makes your text to read. Then take a look at your margins and padding between the sections of your page, the images on your page, and on your page overall. Also use headings to break up the text and help your visitors scan to the right section.
The important thing with whitespace is to be aware of it and recognize that simplicity isn’t that simple. Sometimes deciding what to take away is the hardest part of the battle, but when you crowd too much information on a page nothing gets communicated clearly. Maintaining space around your information and design elements lets readers find what they are looking for and helps you to control their attention.