Working with empty space: why emptiness has such a strong influence on design
Imagine the performance of Rowan Atkinson without these pauses. Not very funny, because it is silence that makes the joke funny. This silence has a very important task.
The same can be said about music. Although there it can only be a lull before a sharp increase in rhythm, and not complete silence. In both examples, silence is a critical factor in attracting attention. Empty space works the same way. In web design, areas without text and images are referred to as empty space. We can say that this is “visual silence”. In order for our design to function, it is necessary to correctly combine the empty space with the used one.
Although Google was not always famous for its design skills, they were always supporters of empty space, which is noticeable on their home page. Google launched their redesign when their competitors’ pages like Yahoo! were packed tightly with weather, news, and mail. The no-frills interface allowed users to focus on the main task – searching on the Internet, without being distracted by what they did not need.
It’s hard to truly appreciate how radical the design decisions have been in the past 20 years, but we know who to look at in this regard.
Two types of empty space
Active white space: The space between design elements, often used for visual stress and structuring. This is an asymmetric type of space that makes the design more dynamic and active.
Passive empty space: the space between words in a line or the space around a logo and other graphic elements.
When working with space, we mainly look at active empty space, however, passive space also needs to pay a lot of attention to how it works with design.
Empty microspace: This term refers to small areas of empty space between letters and words, as well as between several graphical elements. Correct setting of an empty micro-space sets the general tone for the whole design, without changing its main component. Something like a rhythm in dance songs. The song is the same, but kind of sleepy.
Empty Macro Space: This term describes large amounts of empty space. For example, the space between columns or paragraphs. Optimizing the macro space can often drastically change your design, potentially improving the flow of attention and rhythm on a web page.
Empty white space?
The term empty space means the absence of color or tone, which can be confusing. Empty space can actually be any color that is responsible for the emptiness in your design – yellow, blue, green, or even texture (as in the Todoist example below).
Your choice of color does not matter, but do not forget that the colors and textures are much nicer to watch than the harsh white. The principle is preserved, even if you choose a different color or texture. Where and how to use the empty space
Empty space and call-to-action elements (CTA)
Always imagine that the user does not know where to go next, and correctly design the empty space. The idea is simple – if there is nothing next to a button on a page, it means you need to click on it. Conversely, if the page is crammed with elements, the user will not even notice this button due to confusion.
Using empty space for emotional response
There are many ways to evoke emotions in design, including fonts, color and images. All these methods help add drama, but empty space is the strongest component and less costly. Some call it a good investment.
How to overcome the desire to fill the void
As designers and just people, we have a natural desire to fill the empty space. When we buy a large closet, garage or house, it does not take long to fill this new space with us.
This habit often goes to design. We only need to notice an empty area in our design, we begin to think “What would fill it?”. Such thinking can cause problems for designers.
Do not fill your design with elements, try to place one CTA button in the center and create around it a “safe zone” (empty space). Remember that empty space is not useless space.
Who makes good use of empty space?
Throughout its history, Volkswagen has been a master of using empty space in advertisements in magazines. From the very beginning, their simple but dynamic layouts stood out among static magazine ads.
Macro space is clearly visible above and below the car, which puts the car in the spotlight. The asymmetry of the empty space makes us look through the car, down to the text and back to the top.