Day 28: The art and science of white space
White space is quite an abstract concept isn’t it? You kind of know what it means but, really, you don’t.
Most people view white space as a passive element in design. Something that happens to be there as a consequence of all the other stuff you put into your design. Today we want you to start thinking about white space differently.
White space is an active component of design. Just like the buttons, or the text on your website, white space has a very specific function. Actually a couple of functions.
For starters let’s make it clear that white space doesn’t necessarily have to be white. In fact another term designers use for it is negative space. This could be a more useful term to talk about it, since negative/white space is simply the empty space between and around elements of a page. Elements like words, lines of text, images, letters, buttons, everything!
Let’s look at a bad example first:
If your first reaction to this was “I can’t be bothered to read that”, then we’re with you. This is a simple example of a lack of white space. The words don’t have enough room to breathe and get read, your eyes are attacked on multiple fronts from a headline, a subheadline and a CTA all competing for the same spot. It’s hard to understand what you should pay attention to first.
What would a good example look like?
Different isn’t it? You instantly get a feeling for what has higher or lower priority and it gives you time to absorb the message.
You might be starting to get a sense for why space is important, but there are a couple of reasons that are not this apparent. Nonetheless, you should keep these in mind to be able to effectively use white space where appropriate.
1. White space creates balance and harmony in your design
As we’ve mentioned before spacing is a great way to create visual hierarchy. Visual hierarchy is the organization of your content on the page which gives priority and clarity to your message.
Thanks to the use of negative space, you can choose to create symmetry or asymmetry in your designs.
- Symmetry, or when elements are arranged in the same way on 2 sides, creates harmony and helps the user memorize a specific pattern. It’s often used to convey a sense of classic and orderly.
In this example both sides are equally important and visually placed on the same level. Notice how the white space helps you focus on the calls to action and images.
- Asymmetry on the other hand, can be used to draw attention or to spark interest:
Here you can see how by reserving more space for the picture on the left, you tend to focus on the main headline and CTA. Then as your eyes move from left to right, you start looking at the product image (surrounded by what? Yes, white space).
2. White space makes your copy easier to read and skim
While we don’t really pay attention to it when done right, good typography isn’t just about the typeface you’re using. Spacing between letters and lines or paragraphs is also necessary to make text both legible (how well you recognize letters and words) and readable (how well you scan the content).
3. White space helps you understand the relationship between pieces of content
The law of proximity or law of Gestalt states that “objects that are near, or proximate to each other, tend to be grouped together”. This means that the space in between elements provides users with a visual cue on how these elements are grouped together and on how they should interpret them. This makes it easier and quicker for people to consume your content.
4. White space attracts attention.
This is mostly because clutter is unattractive and overwhelming. Hence why visual hierarchy is so important and it needs the right amount of space, too.
You should have a good idea of why white space is important by now. How can you use it effectively?
There are no rules set in stone for this. Using white space is both an art and a science, but you’’ have to adapt it to your own needs and brand.
A few guidelines however are always helpful.
White space is never enough
That’s not to say you need your homepage to be blank. No, but it’s a good “mantra” you can say to yourself whenever you’re thinking about a design. If you’re not a professional designer, chances are that your tendency will be to use very little or not enough white space most of the time.
So remember the mantra and double it. There’s always time to take it down a notch if needed.
Group elements in a logical way
If your paragraph is the introduction to a form, place the paragraph right above or close to the form. Place your form labels close to their related input field. And if you can, related form fields together using white space or lines to separate groups.
All of this is to say that whatever you physically group together will reflect the logic behind it. So be mindful of it.
Keep white space consistent
If you have 30 pixels of white space to the left of a paragraph, make sure it’s the same for all similar text. If your images are 20 pixels above a paragraph, make sure it’s the same for all paragraph/image groups on the page etc.
Consistency is one of the basic principles of good design and it applies to white space as well. Remember it’s an active component of design.
Today you’ll be applying some of the art and science we bestowed upon you, to your page’s design. Take a look at it and spot any areas that feel cluttered and see if you can give them more breathing room. Look at: margins around buttons or paragraphs, space around graphics and images, line-spacing and letter-spacing (here’s a great checklist) and space between columns.
Remember to refer back to our previous lesson on visual hierarchy (“Let the squeaky wheel get the grease”) to make sure the white space you’re adding still fits in with your page structure.