Whitespace in Design

White space in Design

“Whitespace is like air: it is necessary for design to breathe.” –Wojciech Zieliński

Whitespace or empty space is an important entity in our life. Just look around you. Your living room is filled with different items. Within four walls, there would be tables, chairs, cabinets, sofas and other items.

How are they organized in the room? Are all of them placed just side by side, or is there any space between them? If all the furniture of room is placed side by side without any gap, how would you feel sitting in your room?

Definitely you will feel clutter around you, and this will distract you when you perform your daily routine work in the room.

This is an art to organize and décor your room using the available items by putting them at appropriate locations with reasonable space around them.

User interface design behaves in similar way. The empty space between UI elements on a screen is called as whitespace. This provides an overall neat and clean look of design, and it helps user to perform more effectively without overwhelming him with a clutter on UI.

Whitespace is as much important in design as in your living room. It provides a breathing space to the user when he is using your design.

Whitespace in design helps in following ways:

Increased Comprehension

It allows user to quickly scan and read the content, thus improves comprehension. User can quickly scan the page, understand its structure and find important elements at first glance.

Reduced Clutter

It avoids clutter on UI. Everything is placed at its proper location and nothing is overwhelming the user.

Grouping of Related Elements

It provides an implicit way to group related elements logically by placing them at one place with clear empty space around the group.

Separation of Un-related Elements

It helps to separate un-related items on UI without providing explicit separators by making logical separation through reasonable spacing.

Highlighting Important Elements

It highlights important elements on screen. The user’s eye quickly catches the important action items on the screen when they are made prominent using space.

Page Structure

It defines structure of the page. User can come and quickly see what is the page layout, and where should he go to achieve the desired objective. 

Enhanced User Experience

It provides attractive and appealing user experience by creating beautiful and easy to understand format.


It gives a feeling of luxury to user as the breathing space between UI elements behave like fresh air in life.

Usually we neglect the importance of whitespace while designing the UI. Whitespace should be given as much importance as other visual elements on a page. It is an important decision while designing UI that where and how much whitespace needs to add between UI elements.

Thanks for reading. Find more related articles at uxdworld.com.

Get my free 5-day UX design course via email.

If you have any questions, contact me and I will write about it: Twitter Facebook

8 thoughts on “Whitespace in Design

  1. Love the article. However, I think ‘negative space’ serves as a better term. White space gets confusing when the layout uses anything other than white. Empty space works as well, but negative space has been a term used in art and design. This is also helpful when explaining figure ground (positive/negative) relationships.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s