This is a guest post by Ilyse of viastudio.com. Feel free to follow them on Twitter and Facebook too.

As web and graphic designers, we’re often focused on the design elements of our subjects.  We think about what colors will work, what will make the page pop, and what will make it unique.  Use of negative space is a factor that is often overlooked but just as, if not more, important than the physical aspects of a website.

Negative Space is defined as the empty area without or between subjects.  It is extremely important for design because it decides where your eyes will be drawn to on the page.  Mastering the art of negative space can be more difficult than other design aspects because at times it feels like more is more when in reality, less is more.

Google, for instance, is the most popular search engine.  When you visit other search engines such as Yahoo! or Bing, you are bombarded with a lot of information in many different ways.  Yahoo! has news stories listed all over the page as well as a scrolling Yahoo! ticker.  I like Google because it is simple.  I go to the page and know I’ll be tripping my search directly in to the box that will be located in the center of the page.  The design is simple, using mostly negative space and my eye is drawn directly to the Google logo and the search box directly beneath it, nice and simple.
The Positives of Negative Space

Negative space also helps to determine where each object should be placed in relation to each other.  The more negative space surrounds an object, the more the eye will be drawn.  The key to the concept is lack of clutter.  This makes the site easy to navigate and urges the viewer to explore it in the way you, the designer, intended.  Nothing is more confusing then visiting a website that is cluttered and over-run with information.

The best way to make use of negative space is by practicing simplicity on the sites main page and keeping objects even with each other.  Using links to get to the informative section of a website helps make the most of a site’s negative space.

The most classic example of making use of negative space is the picture below.  At first glance, the picture looks only like a goblet but on second glance you can see two faces looking at each other.  The negative space holding the faces is what makes the goblet pop.

The Positives of Negative Space

Though it seems like the easiest part of web design, making proper use of negative space can actually be one of the most difficult things to do.  A good way to get a grasp on proper use of negative space is to observe how other websites use it and what you do or do not like about certain sites.  A good idea is to take notice about what you notice about a website in your first 5 seconds of looking at it.  This way you can see how what the negative space makes pop.

Examples:

  1. Rolling Stone uses negative space to draw the eye to the center of the page where their news features are.

The Positives of Negative Space

  1. Facebook uses negative space to draw the eye to the central newsfeed.

The Positives of Negative Space

  1. Etsy uses negative space to highlight their merchants.

The Positives of Negative Space