The Importance of Negative Space in Web Design

What is negative space?

Well there are two types of space in design, positive and negative space. Positive space contains all of the elements of your website, i.e. content, navigation, images, etc.

Negative space (often referred to as whitespace) is all of the empty space in between, i.e. the space around the content that separates the elements and helps to structure and define the way the user interacts with the content in the positive space.

Having said that, there are also two types of negative space: micro and macro. Micro negative space is the space between the smaller elements of the design. Things like the space between paragraphs, individual lines of type, all the way down to the space between letters and words. Macro negative space is the space between the larger, core elements of the design, such as your header and footer.

Micro negative space

Maintaining a good amount of negative space within our blocks of text can go a long way toward making a website more readable and easier to scan. It also helps people comprehend what they’re reading better.

We need to take care to ensure that all of the negative space in our text blocks is tight. Not in a crowded way, but tight in an aesthetically balanced and open way. This means tackling the space between headers and paragraphs. Giving special care to the line heights within the paragraphs. Making sure that the space between line items in lists is not over or under done. Even the space between words and letters.

This is not always an easy task. Deciding on the margins and padding for this type of micro negative space adjustment is a delicate art. One that must be crafted with each individual website we build. Each website will have its own balance to find. While you don’t want too little  negative space, having too much will impact readability just as negatively.

Macro negative space

Even though this is the one we tend to give more attention, we still don’t often give it more open space to breathe in.

People like to clutter their headers with everything they can possibly fit, since it’s the first thing visitors see. Instead, try to keep this area to a few key elements, so users both know exactly where they are and aren’t suffocated, as soon as they enter the website.

Like the header, it is quite an easy trap to fall into viewing the footers and sidebars of a design as something as a content catch-all. A place to shove and dispose of as much information as possible.

Unlike the header, it is true that one can get away with more content in these areas, but care should still be taken to make sure we leave ample negative space both around and within these elements, as well.

The more we leave adequate room and spacing, the more purposeful our inclusions seem. It is when we clutter that we often give the impression that we did not give enough attention to our planning stages. So we want to be sure that the space is plentiful around each block element, around the entire section. Giving special care to ensure that there will be plenty of space around all calls-to-action. Let the CTA’s stand out.

Why negative space matters

The use of negative space plays a huge role in usability. Users not only need to be able to comfortably read all of the content on the website, but they also need to be able to easily find what they are looking for. Clutter keeps that from being an easy task.

Many people tend to want to stuff every available inch of screen with information then wonder why the website looks so cluttered and unappealing. And, moreover, why users seem to have trouble navigating their website.

SOURCE: Webdesigner Depot