Table of Contents
Space is one of the fundamental elements of design. Without it, layouts would be just a pile of content without any hierarchy, balance and direction. It would be hard to read and work with. Whitespace, also known as negative space, needs to be approached with the same attention as any other design element, maybe even more. In this post, you will find out what is one of the greatest myths in design. Next, you will learn the benefits of using appropriate amount of whitespace in your layout.
Whitespace is (not) wasted space
One of the greatest myths in design is that whitespace is simply a waste of space. Many designers in the beginning strive to use as much of the space available as possible. However, they are not the ones to blame. In most cases, the reason is hidden in lack of experience (or skills) or just in guidelines provided by their clients. Many clients relate the amount of space used in design directly to the price for the work. When designer presents them with a layout that is half “blank”, they are often met with resistance and rejection.
As consequence to this nonsense, the following steps include populating almost every pixel of layout with piece of content or a decoration. All of this done just for the sake of reducing the negative space, while the opposite should be the goal.
Another factor, empowering this illusion of waste and standing in the way of thoughtful designer is human nature. We (often) incline to filling the available space around us with objects without any rational reason. Just take a look at your table, closet or library. We are surrounded by paperweights – things we keep, but haven’t used for years. Why should we be surprised if we follow the same principles (or routines) in design?
Let me encourage you to break this myth once for all. Whitespace is not wasted space. Below, I will share with you five benefits and reason why you should embrace whitespace, or negative space, in layout. Use these benefits as arguments to defend your decisions to your client. Fight untill the end, don’t give in so fast.
Less is more.
— Ludwig Mies van der Rohe
Benefits of whitespace
It allows for easier readability and scannability
Some sources came up with conclusion that the basic role of white space is to „reduce the amount of text visitors see all at once and makes reading much easier.” In other words, a cluttered page is unattractive to users and can discourage them from reading the content. This is more probable especially when there is no visual hierarchy established within the text. Wichita State University done a lab research showing that white space improves reading comprehension, even though it may decrease reading speed.
It establishes hierarchy between elements
In his great article Developing the Invisible Luke Wroblewski says that “for designers, white space is often as important as the content itself,”. In other words, these invisible elements (whitespace) of the interface help communicate, as he continues „what’s most important, what’s related, and what needs attention.” Using whitespace or negative space properly can help the user distinguish various parts of design from each other and understand their importance. This, as a result, will turn in more effective communication.
It guides users on a page
Another benefit of using white space is its ability to bring the elements of the content into focus. It can literally guide your eye from one point to another as Carla Rose states in her article about layout composition. Since most of a web is text based content, our main goal as designers is to help the user to navigate through it as easy as possible. In this article about whitespace well known designer Jason Santa Maria concludes that the role of white space is to “lead the viewer around the page by the designer’s intent”.
It evokes the feeling of elegance and sophistication
When you take a look at the worlds most prestigious brands in the world, you will often find generous amount of whitespace in use. An article about white space done by List Apart claims that “designers use whitespace create a feeling of sophistication and elegance for upscale brands.” The best examples of this approach can be found in fashion, luxury and also cosmetic products. All of them often use extensive white space in their presentation to address the high quality of their products.
It is essential for a balanced, harmonious layout
Whitespace is not only nice-to-have element, but essential building block in layout. Let me paraphrase Jason Santa Maria again here. “The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout.” It is often seen that the most beautiful and appealing designs compose of impressive amount of whitespace. This is not a coincidence. Whitespace will naturally bring harmony and balance to the layout.
How to use whitespace
You shattered the myth of wasted space and also understand the benefits of whitespace. What are the next steps? The first is to resist the temptation to fill every piece of the page. Remember that margins and paddings are your friends, not enemies. Use margin when you add space between two elements, while padding when you want to add space inside an element. Also, use box-sizing property with value of border-box to tell the browser the width and height includes content, padding and border, excluding the margin.
If you are that kind of weird mix of artist and scientist such as me, you are immediately hit by a question of how much space should you use? I asked couple designers from various fields – product, UX, graphic and web design. Product design lead Sam Thibault like to approach whitespace in terms of 3rds. If your main content is taking up 2/3rds of the space, then the remaining 1/3rd should be used for whitespace on top and bottom. It is always good to add more whitespace then less.
Another great advice provided by Nick Pettit, designer and teacher at Treehouse, is to start off with 1em all around (if you use a 16px as a base) and if that feels odd, then adjust as necessary. In general, the more important something is, the more whitespace you should try to give it.
Good thing to keep in mind is a principle of proximity. This principle tells us to use space to show similarity between elements and helps us understand what relates to what. We tend to see elements close to each other as having an inner relationship, being in the same group. For example, using bigger top margin of heading and smaller bottom will create bigger gap above it than below. This will indicate more relevant association with the content following the heading than foregoing. The same principle applies to any other piece of content in the layout.
Summary
Whitespace is a crucial element in every design and it is also one the most difficult to master. Finding the right amount of whitespace to use in design is sometime result of intuition rather than scientific equation, sometime even both of them. Now, I hope, you understand that whitespace or negative space is not something you should avoid, but embrace. It has immense power to help you establish visual hierarchy without the need to add more unnecessary elements to the layout.
However, as with everything in work and life, whitespace too must be used wisely. Otherwise, it will tear down the harmony and flow and break the whole layout. Fortunately, the more experience you will get and the more designs you will explore (and dissect), the better your intuition for whitespace will be. So, don’t wait for anything. Browse your favorite designs and artworks done by great masters and study its composition in layout (or canvas).
What are your thoughts on whitespace?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
