Design Delight 3 - Empty Space
Much less is much more…
What is the biggest tool you can leverage to draw your consumers’ attention to the things you want them to see, feel and think about? Nothingness. In other words, empty space. Also referred to as negative space, empty space is any space on the page where there are no visual elements at all, except for a solid background colour. It can be any colour, so long as there are no additional visual elements.
The power of empty space is yet another example of how contrast helps us design effective visual experiences for people.
Apart from fostering better clarity and understanding, empty space can also be used to draw your viewers’ attention and lead it towards a call-to-action, like a button or contact form.
Attention. Think about it:
The more empty space a page has, the less space is taken up by visual elements. The less visual elements there are on the page, the less our attention is spread out amongst them. This means more attention on the remaining elements.
Again, such a simple concept to grasp, but so rarely maximized.
Let’s look at an example: our homepage.
The entire page is practically white (empty space). The first thing you see is our logo (a brain/light bulb). It’s the first thing you see for two reasons: First, the text and button on the page are designed to fade into the page 2 seconds after the page loads, meaning that there are no other visual elements competing for our attention. Your brain has nowhere else to go. You literally have no choice but to see the graphics first. Second, the logo is MUCH darker than the page’s white backdrop, and significantly darker than the surrounding graphics.
So what happens?
The page loads, and we immediately see this dark little brainbulb on the left of the page. Then we notice a bunch of lighter brains surrounding it. Now, because the brain likes to group objects which are close to each other, our eyes follow the path of lighter brains towards the tagline & button which have appeared while we were focusing on the graphics. (This sequence of events happens so quickly that we may not even notice it’s happening until someone explains it to us!)
Let’s look at one more very obvious but crucial thing to really drive home the importance of empty space and contrast:
Why were we able to notice and follow the path of brains so easily, despite the brains being so light compared to the dark logo?
Because they are still noticeably darker than the white space surrounding them. Our brain picks up on them because of the high level of contrast made possible by all the white space. They are noticeably darker and more visible than the white space.
Now that you see just how crucial contrast is to your customers’ experiences, let’s look at another visual design concept that our homepage uses in order to create a captivating and intuitive visual experience: grouping.