tips September 19, 2019

Negative space in design: terminology, usage and applications

Every designer has a different answer to what is that makes a piece of design great. In my opinion, negative space plays a big role. 
A balanced composition will provide ease to the eye, and contribute to a more pleasant experience.
There are numerous ways to create such composition, one is using the Golden Ratio and another one – which we’re exploring today – is negative space.

What’s the difference between negative and white space?

Both terms mean the same. Negative or white space is the unused space in a design, commonly perceived as the background of an element. It’s space around and inside objects.
The reason why there are two terms to refer to it is that they came from different areas. 

Negative space is a photography term. It’s the opposite of positive (the space occupied by the main element on the photograph).
On the other hand, white space is used by printing professionals. Due to the default paper color, negative space was always white space.

Ultimately, regardless of calling it negative or white space, it’s importance is undeniable in design. The right amount will let the design breathe, ensuring better comprehension and communication.
Also, negative space doesn’t need to be in a particular color such as white. It can be a pattern, a solid color, a gradient or even an image.

Negative space to create optical illusions

The human brain perceives objects in relation to each other. 
If we take a single black dot and put it in the middle of a white background, our attention will be drawn to that dot because the background highlights the element.
This connection between element and background, allows designers to play with the combination of positive (figure) and negative (ground).
Sometimes we perceive the figure first, and others, the background.

These two images demonstrate how negative space can be used to create optical illusions in image composition.
Images from Pinterest.

Negative space in web design

When it comes to web design, negative space can be divided into macro and micro space. The first one is the space around the elements, while the micro space refers to the inside and between elements.

Web and UX/UI designers have to use the space between elements wisely and cautiously, to make sure the page isn’t too crowded, and distracting.
If done right, negative space ensures, and highlights visual hierarchy, reduces user’s distraction, and guarantees enough scannability on the page. 

This image demonstrates how negative space can be effective in web design.
Image from Pinterest.

In typography

Just like mentioned before, if a page is too full, the user will have a hard time understanding the content and determining what’s important.
Proper use of negative space in typography ensures that the text is easier to read, especially in big chunks of text.

According to the Web Content Accessibility Guides, there are some recommendations for text spacing:

  • Line spacing should be at least 1.5 times the font size;
  • The space after paragraphs should be at least 2 times the font size;
  • Tracking should be at least 0.12 times the font size;
  • Word spacing should be at least 0.16 times the font size.

However, it’s good to keep in mind that with different fonts, some of these rules can have the opposite effect and make the text harder to read.

 These images demonstrate how negative space can be used for enhancing Typography compositions.
Images from Pinterest.

In logo design

This is my favorite usage of negative space since it plays with the duality of seeing both the figure and the background.
It’s great for enhancing elements, for introducing new ones, and for adding more than one interpretation to the logo.
I love using it whenever I can, but it’s harder than it looks when we see the result.

This is a brilliant example of a logo that uses negative space to reinforce and had more meaning to the word human.
Image from Pinterest.

Summing-up

 While too little of negative space can make the design feel cluttered and distracting, too much of it can also feel that something is missing. 
So the best result will come from the proper use of space to guarantee a balanced design and a good experience.

About Melted

Melted was born in 2017. 
Back then, I was facing some hard time regarding my profession (or lack of), but I wanted to push forward and inspire others to do the same.
So I put my fears aside, and several huge cups of coffee later, this project was online.

Read the full story

1 Comment
  • Anonymous
    Anonymous
    May 31, 2020

    Appreciating the time and effort you put into your blog and detailed information you present.

    It’s great to come across a blog every once in a while that isn’t the
    same out of date rehashed material. Wonderful read!
    I’ve bookmarked your site and I’m including your RSS feeds
    to my Google account.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *