White Space In Design Videos

Read Time: 10 mins Languages:

Space is a fundamental parameter in web design, but also one of the most underrated. If we grasp control of white space, we can control a subtle, but defining element of a webpage and make good use of it.

In a nutshell, white space is the spacing between different elements, whether it be between the actual sections of the page, or right down to the space between letters. In most cases, we use white space (also referred to as negative space) to space out content for easier, and ultimately faster, scanning of a page without the need to put in specific separating elements.

Today, we'll cover how you can use negative space in your designs and work out how exactly it helps give your design a clean, uncluttered feel.

What is White Space?

As I've just explained, white space (or negative space) is the spacing between different elements which contains nothing. For comparison purposes, we call the space that is filled positive. The negative space actually helps to mould and define what the positive space is. This can be demonstrated by looking at the optical illusion below.

What do you see? The vase, or the two faces? If you see the faces, that's because, in this particular design, the white space is acting as the negative space, whereas the black is the positive. We can inverse the roles and get a completely different view because both of them are working together to mold the image.

What this example is trying to get at is that your negative space is pretty important as it can help define the content that resides in the positive space. Don't think of white space as the leftover bit that you didn't create content for, but rather a major structural player in your site's layout.

There are two levels of white space too. These are macro and micro white space, relating to the space between core elements and the space in between the smaller elements, respectively.

Google

Google, as you can see, is a big advocate of white space in their designs. The search engine is widely regarded to have a clean design since the focus is on the main aim of the page, without massive dedication to other areas (unlike others).

Webdesigntuts+

I admire the design work that the Envato team did with this very site. There's a nice, balanced use of white space in between the titles, credit lines and paragraphs.

Starbucks

Negative space doesn't actually have to be a single block of color. In photography, any area that isn't in focus could be classed as negative space. In this example, the lack of focus in the background draws your eyes to the mug that is. (And also, didn't Starbucks change their logo?)

When one designs, his focus is normally on the positive space. It's almost subconscious that the negative space follows and actually helps mould and shape how the positive space is laid out and then read. This property can then be tweaked to tailor the experience for a better time reading and interacting with the positive space.

An Analogy

Let's say you're in a store. It wouldn't be a comfortable or pleasant experience if you had trouble moving around due to the overcrowded aisles, alongside the sales assistant constantly prompting you with their special offers. There's just too much to look at and you have neither the time nor the patience to find what you originally came in looking for. It's not nice.

This is one of the key features of why Apple stores work so well. They're very minimalist and a large amount of the shop floor is given to the products themselves. However, should you venture into another PC store, you're consumed by endless aisles of machines that look and function differently. In my experience, the minimalist shopping experience is a lot more pleasant.

Now, what does that have to do with web design? A lot actually. We don't come online for the task of hunting out a specific string of text underneath a wealth of pointless content you don't care about. Negative space helps with both of these problems by leaving designs uncluttered at the same time as drawing attention to the focal point of the page.

Negative Space Increases Readability

You might ask, why should I bother making sure my negative space is just right?

Text on the web is unlike text on any other platform and we all tailor our designs so the end user has the easiest experience reading our content. Unlike a newspaper, it can be frustrating on the web to try and decipher where the content you're interested in actually is. Cluttered designs that are too heavy to tackle do not provide a clean, easy reading experience since we're forced to scrutinize the web page first, to distinguish elements from each other. White space hacks a buffer in between elements, so it's easier for us to find the content we care about.

We can also direct ourselves to a recent article of mine on typography, where I looked at eight important factors that contribute to good web typography. By cracking the spatial elements (such as leading and letter spacing), we can increase the legibility. Working at this level means we're working with micro-white-space.

In a nutshell (a different one to that mentioned before, though), white space spaces everything out, gives elements their own space to be themselves, to be recognized and to be easily read and interacted with.

Negative Space in Web Design

Negative space is used in many creative fields, especially photography. In photography, negative space is any space that is not used to hold a subject, which isn't too far from it's role in web design. If we take a look at Apple's web design, they, naturally, use both macro and micro white space to pad out elements and give them their own place on the webpage.

Apple's design uses both macro and micro white space, defined by the two different colors overlaid onto the image below. This results in a clean, elegant design that is spaced out graciously. You might not know it, but your attention to the content will have been influenced by the lack of content in the white space areas. Our attention span is proven to be shorter when on the web, so the cluttered, heavy designs of print were not a trend that passed over to the virtual design realms.

Of course, the space doesn't have to actually be white. Any type of blank space that isn't in competition with the focus content can be classed as "white space", as the design below suggests.

Sophistication and Luxury

In print design, you might notice that your client wants every last piece of his real estate used to promote his product. However, it's a different story when designing for virtual lands. White space can add a feeling of sophistication and luxury into a generic webpage by creating the feeling that the product is more important than the real estate it lives in. It can make a product look luxurious by using the "less is more" principle. When you look at Apple's website - a brand that we regard as being in the more premium end of computing - there is very little needed, as the products speak for themselves, albeit alongside some minimalist taglines. This is a phenomenon that is also popular with premium health and well being websites where little content is needed to communicate the general idea of the product or service advertised.

Often, cheaper brands appear to cram as much information into a space as possible; different markets, different end users. The HP and Apple sites for example, highlight this point. Apple are notoriously confident and let their products speak for themselves. If you want the product, have a look around, if not move along. On the other hand, the HP site employs busier up- and cross-selling, promoting offers and pushing cheap pricing into the user's mind as well as trying to showcase an assortment of alternative products you could be interested in.

Improving Negative Space

By now, you should recognize what negative space is and how to identify it in your design. If you're new to this field, you might become confused when someone suggests you improve the white space. I wouldn't be completely surprised if you responded with something along the lines of, "that's just the left over space". Well, in fact, your negative space can be greatly improved by tweaking a few common problems to make its existence much more effective.

Margins and Consistent Spacing

Inconsistent spacing can be one of the biggest problems, but one that can be easily tweaked. Everything just seems more balanced, and overall better-looking when your padding around an element is equal. If we take a look at the example below, the design (that of our sister site, ActiveTuts+), the real one on the right side looks so much better because the padding between elements is much more consistent.

Margins should also not make a design feel disconnected. Margins that are too large could break the relationship between elements, decreasing the feeling of unity in the design. Large margins will also waste your real estate, potentially decreasing the effectiveness of your work.

Micro-level Spacing

As explained before, micro-level spacing is the negative space that exists between the smallest elements on the page, like the letters in a paragraph.

Line spacing can drastically improve the legibility of a body of text, being a critical deal breaker in your case study of well-tailored typography. Line spacing, or leading, is the micro-white-space in between lines of text. Generally, the larger the leading, the better experience the user will have whilst reading, although too much can break the unity and make the design disconnected.

I've used the image below in several different articles here at Tuts+, and I want to point it out again. The example on the right has more leading, and, when used in a wider selection of text, should make it easier to read.

Likewise, letter spacing can contribute to well used negative space. Cramped letters aren't all that fun to read, but neither are ones that you might mistake for individual words. Again, it's just about finding the perfect balance.

Analyze Every Project Differently

When designing and tailoring your web design, do so with a fresh mind that isn't being contaminated with what you did right last time. Every project is different and, since there's no predefined guidelines or consistent math, you need to use your newly-refined eye to analyze each product separately.

Final Thoughts

Negative space, as I've mentioned several times throughout this article, both unclutters design and helps mould and draw focus to the content on the page. Returning to the shopping analogy, no-one wants to have to work in order to achieve their desired outcome. Instead, they want it to be served on an easily identifiable plate that's not disturbed by pointless side dishes they didn't ask for, nor want.

To recap, we can also improve negative space usage by analyzing and refining margins by keeping them consistent in most circumstances, and paying attention to typography and micro-level spacing. Ideally, you should also take each project differently in order to recognize the sweet spot in the design.

Aside from the practical benefits of a clean, uncluttered webpage, negative space can create a sense of sophistication and elegance by allowing the content to "speak for itself" without major intrusions that appear cheap.

Thanks for diving into an interesting journey in an area that isn't. Hopefully you've learned something (I certainly have) about the important of negative space in design, and maybe think twice before you try to push a million nonsensical or unnecessary objects into your page. Before I leave you, one final tip: try the five second test (view a webpage for five seconds and write down what you remember) just to confirm that your design is uncluttered and using its white space well.

Connor Turnbull

Connor Turnbull is a part-time writer covering the technology industry and part-time web designer from the United Kingdom. Connor previously wrote for AppStorm where he covered Android and Google news.