Negative Space in Web Design

What is Negative Space?

Negative space is areas within your design that are not being used. Some may refer to it as “white space” but that is misleading because it doesn’t necessarily have to be white. Negative space is open, unused territory that allows your design to breathe.

Why have Negative Space?

In web design (and most other forms of design) negative space is crucial because it is a chance for the eye to rest. If your site is jam-packed with information- useful or not- it will be overwhelming and you will lose a lot of what you have read or seen. By giving portions of your design some breathing room you tend to draw attention to it, even if it is much more sparse than the rest of your design. Extra clutter just muddles what you are seeing and keeps you from focusing on the important things.

How to Use Negative Space in Text

Since negative space increases readability, take a look at two sections of text and notice how the use of negative space affects your perception of each.

Even though both sections of text have the exact same content, the one on the left is much more pleasing to the eye and makes me more inclined to read it. Cramming the text together may give you more real estate on your site but what good is more real estate if no one wants to read your content?

Utilizing Margins and Spacing in Your Design

Negative space also comes into play when you start deciding on the overall layout of your website. One very important thing to remember about negative space is that even though nothing is there it acts like an object. So when allocation space for margins and breaks think of your negative space as shapes you are placing in to break up the components. If you were actually putting in shapes, would you have a bunch of slightly different sized shapes throughout your site? No way. Negative space needs to be consistent throughout your design or else the page will look lopsided and messy to the user. The tricky thing about negative space is that you may not even realize what is wrong with your design, it just looks off. If this is the case go back and take a look at all of the spacing, chances are that is your problem. Here is an example of how Apple uses clean, uniform negative space to make their site stand out.