Menu

Whitespace: the most important design tool

Written by on Leave the first reply.

Whitespace: why do we use it? What is it good for? Some clients thinks its a waste of space and rather fill it with content. In this article I’ll explain why whitespace is such a fundamental part of design. And why designers and users love it.

What is whitespace?

Whitespace, also referred as negative space, is the space between elements. It is a fundamental part of good design and can provide many benefits: some purely aesthetic, some others do actually improve user experience. Proper use of whitespace creates a visual calmness and helps the user processing the given information.

Do you sometimes notice that a design feels ‘right’? That is whitespace! It is well used whitespace creating a balanced and harmonious layout.

Active and passive whitespace

There are two types of whitespace. First, there’s whitespace that is used to lead the user from one component to the other. We call this active whitespace.

Second, there’s whitespace that improves legibility (legibility is the ease with which a reader can recognise individual characters in text). We call this passive whitespace.

As an example of passive whitespace, see the image below. On the left: the text is hard to read and the lines are close against each other. On the right: whitespace is added in the form of margins and paddings, also called macro whitespace, resulting in much better legibility.

Text before and after whitespace is applied.

Why whitespace is essential

  • Visual hierarchy
    A design with a proper amount of whitespace is easier to scan. It creates visual blocks in a way that people can find their way on your website faster. Visual hierarchy also ensures that user understands the content better.
  • Improved legibility
    The right amount of whitespace in typography can make an enormous difference to legibility.
  • Higher comprehension
    Whitespace between paragraphs or around chunks of text will result in higher comprehension. Research has shown that whitespace increases comprehension by almost 20%.
  • Creates a feeling of luxury or elegance
    If you apply fair amounts of whitespace the resulting design will probably be perceived a more elegant, open and fresh.
  • Increased attention
    Whitespace can be a powerful tool to drawing the users attention to a particular screen or element. To make elements stand out, whitespace is more powerful then just making things bigger.

How to apply whitespace?

There are not too many rules when it comes to applying whitespace. As a start, there are some great tips to keep in mind:

  • Limit your design to 15 points of interest
    With a limited number of points it’s easier to determine what’s essential and what’s not, so there’s always room for whitespace. Each item you add will cost a point, for example the logo is 1 point, the main menu is 2 points and primary heading is 4 points. If you wish to make an element stand out, then add extra points to this element.
  • Compare your idea with similar designs or companies
    Check websites like Dribbble or awwwards to see how other designers have applied whitespace. Use examples as a starting point on which you can elaborate.
  • Make good use of the gestalt principle
    When objects are positioned closer together the human eye will see them as one object. For example: a well designed navigation bar has a relatively small space between the different items. This way the user will see it as one elements and understands it as such.
  • Limit your design to four whitespace variations 
    Some elements require more whitespace than others, but try to keep consistency by using a maximum of four sizes of spacing. Use your design instincts.
  • Sketch whitespace beforehand
    Start by making an inventory of all the elements that you intend to use in your interface. Sketch or prototype those elements to get a good idea how much space is needed for optimal readability and user experience. Readability is your top priority.
  • Use contrasting colors
    Get out of your comfort zone and use contrasting colors. Contrast makes whitespace appear twice as big. Contrast is a great way to get the user’s attention and get more interaction.
  • When in doubt always use more whitespace
    When in doubt it is better to use more whitespace. As long as you maintain the same proportions in your design. Better too much than too little!

Not just empty space

Remember: whitespace serves both content and design. Use whitespace to stand out, to center attention, to lead and to make things beautiful. Use it wise, use it consistently.

Whitespace may cause some friction with your client. If so, it is your job to explain that whitespace isn’t just empty space. Explain them why it is important and what it will do for them and the usability of their design.

Check how we work — Liked this post? See how we put it to practice.

Leave your reply

  • We won't publish your e-mail address, we only use it for verification purposes.

Related blogs

  • Who dares? Workspace for rent at a wolf pack

    by Aljan Scholtens studio-wolf
  • Refresh: the meetup for designers and front end developers

    by Aljan Scholtens studio-wolf
  • How social media got our wolf back

    by Tim Sluis studio-wolf
  • Story telling culture

    by Tim Sluis studio-wolf
  • The future of mobile

    by Aldert Greydanus design

Dive into history! — Show all 54 posts in 7 years.