Real Time Web Analytics

Negative Space Blog Post

Negative space is a term very familiar to artists however; it may not be as familiar to web designers. The goal of this post is to explain how to use negative space through good and bad examples. By the end of this article you should have a good understanding of how to design your site to be as reader friendly as possible.

From an artistic perspective, negative space is defined as the space around and between the subjects of an image. The most well known example of this is probably Rubin’s Vase shown below. This is an optical illusion in which the edges of the vase form two silhouettes of a face.

In the fields of art and web design negative space is used to give the eye a place to rest. In the example above, the negative space creates a focal point on the vase. Much like the vase example, negative space in web design can be used to draw the visitor’s attention to a certain section of a web page.

In web design it is defined as the space between specific items on the page or the area of the page not covered by content. Negative space can be very useful for web designers because it makes the page easier to read, aesthetically pleasing, it balances the various sections, and it gives the page a contemporary feel.

For example, take a look at the screen shot below. These designers clearly have a really good understanding of how to use negative space to optimize the layout of their page. Every item from top to bottom is aligned well and there is adequate space between each section, which makes it easy to follow and find exactly what you are looking for.

The page is so easy to look at and read because of how symmetrical it is. As you can see by the lines that I have added, the top and bottom sections are roughly the same size and similarly the two middle sections are about the same size. Because of their use of negative space everything is very consistent, meaning that each part draws an equal amount of focus. This is a very good example of how to properly use negative space in web design.

The next example illustrates what not to do with the negative space on your website. As you can see there is no symmetry whatsoever on this site, everything is sized differently and almost nothing is aligned. While it probably functions just fine, it will not be a pleasant experience to find what you are looking for.

As you can see from the two examples, proper use of negative space can be the difference between a very modern and well-designed page and a dated, average looking one. Negative space is important to keep in mind when designing a web page because just like a photograph or a painting you want it to be easy on the eyes. The easier it is for the visitor to read the longer they will stay on your page and they will probably visit again too.

The difference between a good web designer and a great one is that a great one can not only see the negative space on a website but also use it to direct the visitors eyes to the sections they feel are most important.

Want to learn more about negative space or web design in general? Contact us today or check out some of our designs in the Portfolio section of our website!

Join Our Mailing List