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.
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.