How ​​to deal with ‘Negative Space’ in UI Design?

Negative space, or White Space, is a place purposely left in a certain area.

Written by:

Kadu Macedo
2 min

Negative space, or White Space, is a place purposely left in a certain area. Not only in the external, such as borders, headers or footers, for example, but also buttons, spacing between photos, text sizes, eg.

Using negative space on your website/mobile apps would give the content a greater breather. In addition, it impacts the visual performance of information, helping with content legibility, visual hierarchy and even branding, and how important it is for high usability and navigation of an interface.

A very common example for us to see it is in illustrations, to always bring a central protagonist to the work.

We understand in UI Design that the space between the elements’ layout is called macro space and the space between them and what’s inside that layout (photos, texts, actions) is also called micro space.


So what is the importance of Negative Space in the life of the UI Designer?

Imagine that you go to a restaurant with your friends. When you enter the restaurant, you notice how poorly structured it was: chairs and tables are too close to each other, waiters having trouble moving around, many pictures, too much furniture, many menus and panels with descriptions of the products.

Would you be able to concentrate in this environment? Why so much going on at once? I’m sure you would prefer a more open and organized restaurant. 

Well, this is a clear example of how users feel while opening websites or mobile apps.

It’s important to understand that many designers believe that the more the better. But that’s a mistake.

After all, bringing too many elements together leads to a lot of inattention: an overload of information the user doesn’t need.