Working with empty space: why emptiness affects design so much
in web design, empty spaces include areas without text and images. It can be said that this is “visual silence”. For our design to function, it is necessary to correctly combine the empty space with the one used.
What did you notice? Of course, Rowan’s incredible wit. But have you noticed how he uses silence to make people laugh? This technique is called comic timing, one of the most important skills that a successful comedian should possess.
Imagine Rowan Atkinson’s performance without these pauses. Not very funny, because it is silence that makes a joke funny. This silence has a very important task.
Find out more
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.
Notice how in the example above the bit “drops” by 0.45 and 1.29? Silence gives drama to future events. I took the dance track, but could easily take Beethoven’s fifth symphony.
In both examples, silence is a critical factor in attracting attention. The same way empty space works. In web design, empty spaces include areas without text and images. It can be said that this is “visual silence”. For our design to function, it is necessary to correctly combine the empty space with the one used.
Although Google was not always famous for their design skills, they were always supporters of empty space, which is noticeable on their home page. Google launched their redesign when the pages of their competitors such as Yahoo! were tightly packed with weather forecasts, news and mail. The no-frills interface allowed users to focus on the main task – searching the Internet, without being distracted by what they do not need.
It’s hard to really appreciate how radical design decisions have been over the past 20 years, but we know who to look at in this regard.
Two types of empty space
Active blank space: the space between design elements, often used for staging visual emphasis 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.
Take a look at the 500px homepage for how it uses active and passive white space.
When working with space, we mainly look at active empty space, however, passive space also needs to be paid a lot of attention to how it works with design.
Two sizes of empty space
Empty micro-space: this term refers to small areas of empty space between letters and words, as well as between multiple graphic elements. Correct tuning of empty micro-space sets the general tone for the entire design without changing its main component. Something like a rhythm in dance songs. The song is the same, but somehow sleepy.
The screenshot above shows the empty micro-space between the Log In and Sign up buttons, as well as between the heading and paragraph.
Empty Macro Space: This term describes large volumes of empty space. For example, the space between columns or paragraphs. Optimizing your macro space can often dramatically change your design, potentially improving the flow of attention and rhythm on a web page.
In the Tumblr design, empty macro space is clearly visible in the empty footer and sides.
The term empty space means the absence of color or tone, which can be confusing. The empty space, in fact, can be any color that is responsible for the void in your design – yellow, blue, green or even texture (as in the Todoist example below).
Your choice of color does not make any difference, but do not forget that colors and textures are much nicer to look at than stern white. The principle is maintained even if you select a different color or texture.
Where and how to use empty space
Blank 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 the button on the page, then you need to click on it. Conversely, if the page is clogged with elements, the user will not even notice this button due to clutter.
Find out more
As you can see in the image above, the second CTA element is much more attractive than the first, since it is not cluttered with other elements.
Using empty space for an emotional response
There are many ways to evoke emotions in design, including fonts, color, and images. All of these methods help add drama, but empty space is the most powerful component and less costly. Some call it a good investment.