How important is white space in a design layout? How important is space in a living room? How important are pauses in music?
Without space, these things would be pointless and unusable. Measuring your design with space is a good way to make sure that your message is conveyed. White space is the most important thing when creating hierarchy/emphasis, legibility and grouping of elements.
The Gestalt Principles
Some of the most useful rules when considering space are the Gestalt Principles. Developed by some clever Germans from the Berlin School, it focuses on our perception of the figure/field relationship.
Take the image above, for example, the hand and piece of metal are the figures on the page. The figure is usually the most prominent element or the thing you notice first. As a default everything else is the ground or “field.” Within the negative space (or field) our mind has sectioned off a piece to create a light bulb. This uses the Gestalt Principle of Closure.
Yuor mnid can unrderstnad thnigs as a whole wihtuot htem bieng comptele.
At the center of the Gestalt Principles is a single concept. The brain sees things as either separate or together, the same or different. Anything caught between, like the light bulb above, creates visual tension.
The Effect of White Space on Figure / Field
All Graphic Design work has three things in common:
- A Canvas — The dimensions that define the bounds of the piece.
- Content — Everything that you place on top of this canvas.
- Space — ALL of the areas that your content does not take up.
By using the Gestalt Principles we know that when we place content close together the viewer will see them as “together” this is called Proximity.
Objects can be made to stand out as well by making them different. You could change the shape, colour, line integrity etc. This is called Similarity.
There are a lot more principles but you get the idea. This is one of the most effective ways to create hierarchy in a layout, and to control where the eye of the viewer goes (keeping in mind the default viewing order for western cultures is top to bottom/left to right).
Micro and Macro Space
White space does not have to be white, it simply describes an area of rest for the eye. You can break down white space into two different types: micro space (the space within elements) and macro space (the space around the elements).
Micro space plays its largest role in legibility because you most often find it in typography. It also includes margins between smaller elements on the page contributing to balance, and breathing room for your elements.
Macro space is the space around your grouped elements (the space on either side of this column for example). It contributes to the readability of the page as a whole.
Active and Passive Space
Negative space can become a feature of the design (such as the light bulb image above). Trapping negative space intentionally can create some dramatic results (look an M. C. Escher’s early tessellations).
More commonly though white space is used to create balance. Mathematically speaking the website below is off-balance because the area of the figure on the right-hand side is much larger than the sum of the text on the left. However because the designer has given the text so much white space, it gives it the same visual weight.
Giving something more space will generally draw people’s attention to it. This can be used to subvert the standard top-down viewing order.
You’ll also notice that the colour/font/weight and negative space of the text emulate the styling of the device on the right. Squint your eyes and see for yourself. Although the layout is asymmetric, it is balanced because of the white space.
Too Much White Space?
Ultra minimalist websites will use un-copious amounts of white space in their design. But this is intentional and reminiscent of the oversized text trend. To argue if you can have too much white space is pointless because in reality the client will ALWAYS be pushing for more content therefore the designer will push for more space. The result is usually a “happy” medium.
Commonalities
Looking at a design’s white space is one of the quickest ways to determine if it was professionally created. Designers understand that their job is to communicate effectively. This means giving the viewer the right amount of information, at the right time, in order of importance, in the places and ways they have come to expect.
This post only covers the very basics of space, it doesn’t touch on rhythm, visual hierarchy, repetition etc. But if nothing else, white space is used to create a resting point for the eye. Making something simpler to understand is the best way to get your message across.
