Using white space to your advantage (with pictures!)

Posted on Design, Educational, Improve
Author:

Using white space isn’t about creating a neat, well-structured design (although designs should always be well-structured). It’s about drawing attention to what is valuable in the image. A problem that many designers face is that clients often struggle to understand why their product isn’t bigger, why there isn’t more information copy filling up the space and why there seems to be wasted space. It is important, as a designer, to know how white space can be valuable to a client so that you can express it to them using easily accessible language. 

 

What is white space?

 

White space, sometimes called negative space, is not just a spot left bare because there’s nothing to put there, nor does it have to be white! It’s a powerful design tool that represents the open spaces around and between your UI elements, paragraphs or even individual words. And not only does it not have to be white, it can also be represented by a coloured, patterned or graphic background. As long as it’s performing one of the below key functions, it’s white space that is being used effectively. 

 

What is white space used for?

 

If a client ever asks you why there is so much open space that could otherwise just be packed with more of their products, explain one or more of these advantages to them to help them understand how this method of composition is helpful rather than hindering. It is also important for new or junior designers to grasp these marketing concepts. 


1. Comprehension is easier

 

 

Micro white spaces are the gaps between paragraphs, lines, words and even menu items on a website. Any spacing that has anything to do with copy is micro white spacing. And it’s important. So important, in fact, that getting it just right can increase comprehension and legibility by 20%. This basically means that your audience isn’t brushing over the important stuff in the copy. Copy that is too closely packed looks and feels overwhelming, and when the micro white spaces are too big it looks clunky. Either of these scenarios will easily encourage people to scroll right past your content without taking any of it in. 

 

2. Attention is drawn directly to the product

 

 

When you have a product to feature, macro white space is what becomes important. These are large spaces between and around design elements. In order for your product to stand out, you need just enough macro white space around it to ensure it is the centre of your attention and focus, but not so much that it looks small and lost in the layout. 

 

3. Customers will be more interactive

 

 

The average human attention span is around 6 seconds, and quick-scroll culture on social media can decrease that. The purpose of effective social media and web design is not actually to hold an audience member’s attention for longer than this. The purpose is to be able to get your message across within that time frame, so that they are still engaging and taking in the information even if they’re just scrolling by. Using micro and macro white space cleverly together will ensure that your product and call to action (CTA) are front and centre, quick and easy to read, and drawing in the eye immediately.  

 

4. It encourages logical grouping

 

 

In psychology, logical grouping is defined by the laws of proximity. This law states that humans who see things close to each other presume that they are related to each other. The internet is a place of chaos and you can use white space as a tool to bring some order from all the information they’re constantly being bombarded with. Maybe you just have one product and a call to action you’d like to highlight. Placing them near to each other with lots of open space around the both of them will set them apart in a news feed, for example. If you have multiple products and pieces of information on the go, we don’t want potential customers to work hard to make sense of what’s going on. Place similar items together with any information close at hand. Finish off with macro white space between the groups (this will also draw customers’ attention to other similar products they will be likely to buy). 

 

5. It creates breathing space

 

 

If you have a lot of open space, the eyes won’t have to jump from one part of the image all the way to the other in order to fully understand what is going on or what service/offer/product is being promoted. This means that the eyes can rest for a couple of seconds amongst the chaos of online life and customers do not feel overwhelmed by assuming that loads of elements spread out everywhere means loads of complicated information to take in. 

If you want to know more about your space online can work for you, contact us here.