Design Theory

Adding Space to Your Designs


Let’s get the basic stuff out of the way first. Whitespace isn’t simply a block of space in your design that has to be white. Instead, think of it more like structural “empty” space, where no extra elements, embellishments or other parts to your design are placed.

A great example of whitespace - but still with embellishments - on Layervault's website.
A great example of whitespace - but still with embellishments - on Layervault's website.

Essentially, whitespace is “unused” space, though I think that can be a bad term for it. Although whitespace may look unused, it does actually serve a very useful purpose in your designs and, in fact, works very hard. Whitespace is valuable to any design, allowing your design to breathe and offering greater balance to your designs.

After all, what defines the presence of a block, if not the whitespace around it?!

Micro & Macro Whitespace

If you want to drill down even further, we can define other types of whitespace: micro and macro.

Micro Whitespace

Micro whitespace is what you’d expect - all of the tiny, little parts of your design that are devoid of any elements. This can be the little bits of space between each letter in a word, or between each line of words.

Macro Whitespace

Macro whitespace refers to the larger bits of space you’ll find in your design - between main blocks of content, elements or modules. For example, you might find blocks of macro whitespace between a header and your next block of content, or between one chunk of text to another.

Why Should We Care About Whitespace?

Imagine you’re browsing a website and, everywhere you look, you’re unsure if you’ve found what it was you were looking for. That, and it’s also hard to read; the text is cramped, it’s too close to the next block of text and there’s no sensible divider (or even just enough space) to differentiate between the blocks. It’s annoying, isn’t it?

Mailchimp use whitespace cleverly on their homepage, to highlight their brand message more clearly.
Mailchimp use whitespace cleverly on their homepage, to highlight their brand message more clearly.

In all likelihood, the users of the websites you design will feel the same way. If anything, they’ll be less patient than you are; we understand that it takes time, talent and a lot of knowledge to create a good website, but most users don’t care and will often just expect a good website, a good experience, and be frustrated when they don’t receive that.

When you’re looking at any composition trick or layout option, whitespace is one of those things that should always be at the forefront of your mind. Allowing all of the main elements in our site chance to breathe gives a better balance to a website, also allowing us to place more trust in our hierarchy to direct our users where we want them to go, leading them on their journey through using the website.

Advantages of Whitespace

We should know by now that having more whitespace in our designs gives every different item on the page more breathing room. This creates balance, as it means we can lend more weight to the elements that we want to focus on.

On Dan Edward's site, he uses whitespace to offset the typography and introduction to his portfolio website.
On his personal website, Dan Edwards uses whitespace to offset the typography and introduction to his portfolio.

In-keeping with our hierarchy, whitespace can also help guide our users around the website properly and as we intend them to. With more space around our elements, we can also hope to speed up interactions between our user and the website. This means that our users should be able to find what they are looking for as quickly as possible, only helping to improve their experience on your website.

How to Use Whitespace in Your Designs

Understanding that whitespace is good for your designs is one thing, but you need to know how to put it into practice.

KISS (Keep It Simple, Stupid)

I always wish I could call that bit “KIS”, as I hate calling people stupid! However, it’s true; keep everything simple. Often, there’s no need to complicate your design by stuffing bits of information in every nook and cranny. What you want to do instead is use all of your other compositional techniques (whitespace, colour, size, typography, etc) to draw attention to the areas in your design that need that extra bit of focus.

Keeping your design simple doesn't only help to make your life as a designer and a developer easier, but it makes things easier for your users too. Keep things simple by stripping out absolutely anything that isn’t necessary or important, or that the user doesn’t need to know.

This doesn’t mean that you end up with a silly amount of completely empty space, where no parts of your design seem to have any relationship with each other. Instead, use the space that you have cleverly, and improve the usability of your design through spacing that is consistent and ensures that your design is clear and easy to understand and follow.

Squarespace use space, texture, colour and typography to set a clear brand tone - even with many different stories to tell.
Squarespace use space, texture, colour and typography to set a clear brand tone - even with many different stories to tell.

Up Next...

Having introduced the fundamentals of composition, and talked a little about whitespace, our next section will take things further by looking into building consistency and relationships into our designs.

Related Posts
  • Web Design
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • Web Design
    Design Theory
    Building Content Hierarchy Through DesignDsfd hierarchy content retina
    Way back at the beginning of this series, we talked a lot about content and the importance content has in any design work. It’s something that should obviously be looked at and sorted through before you start any project, but you only get to see the real results of this work once you begin designing.Read More…
  • Web Design
    Design Theory
    Reducing the BloatDsfd reducing bloat retina
    Complexity in our designs is often unavoidable. Sometimes, it’s also necessary. When working for any client there is always going to be a level of complexity that we will try to reduce, whether this is through the amount of navigation items they want, the amount of content that they have, or anything else that seems overly convoluted or difficult to follow.Read More…
  • Web Design
    Design Theory
    Building Consistency and Relationships into Your DesignsDsfd relationships retina
    One key part of composition is understanding how to build consistency into your designs and how to display the relationships between each of the elements on the page.Read More…
  • Web Design
    Design Theory
    An Introduction to CompositionDsfd composition retina
    Composition is about laying out all your ideas and design elements into a whole; composing your design. We're going to combine all of the previous lessons that we’ve covered, and because of that it makes composition one of those really difficult aspects of designing anything.Read More…
  • Web Design
    Design Theory
    Typography Basics for DevelopersDsfd typography retina
    Typography is a fundamental element in any design that you work on. The main reason we have websites in the first place is to display information, and for that information to be consumed by users who come across it. While there may be many other elements to a website, at the core is content. That content needs to be easily read, digested, understood and having a solid typographic base will only help with that.Read More…