White space is also known as “negative space” and it refers to the blank areas or empty space surrounding elements on a page. It doesn’t necessarily need to be white, any type of blank area is applicable.
Some people think of it as a waste of space – why leave it blank when you can fill it in with more content and graphics? It is also common to think of it as “weird gaps”. White space plays an important role in design and here are some key reasons why:
You may have experienced the following scenario when reading a dense page of text. It is tiring and you lose focus easily. Sometimes you find yourself skipping lines because it is so easy to lose track of what you are reading.
When we read, we scan the overall shape of letters that make up each word. If words are crammed on a page close together, it is difficult to distinguish where each word ends or begins.
By increasing the amount of space between each line of text (line height, or leading), as well as the space between blocks of text (margins), we make it easier for our brains to process the words at a comfortable pace. This makes content more readable and easy to digest, and therefore, more appealing to your audience.
Many people often think that they have to use loud colours, images, or large font sizes to get users’ attention. While that is true to a certain extent, it is equally important to consider the items surrounding your key elements or visuals.
A dirty stain on a colourful patterned shirt might be easily overlooked but even a small smudge on a white shirt becomes an eyesore because of the context. When the shirt is completely white, your eye is not distracted by and therefore it will naturally focus on anything that doesn’t look the same: the smudge.
If you clutter up your website with lots of bright, flashy elements placed closely together all over the place, it is hard to locate anything at all. On the contrary, if you eliminate all unnecessary visual clutter and leave lots of white space around your important sections, you can be sure to that the user’s eye will be drawn to those naturally. You may not even need to use loud colours or large font sizes.
As humans, we associate items placed closely together as being related in a group, and items placed far apart as being distinct and separate. By carefully manipulating the space between elements, you can make your website more user-friendly.
For example, buttons that are related should be placed closer together so that they are interpreted as being part of a group, and the user will interpret them as having a similar function.
If you place a line of text very close to a photo, they will be perceived as a set and the text will be assumed to be the caption, even without an explicit label.
Like yin and yang or light and shadow, white space is important in design as a tool to create visual balance, harmony and pleasing aesthetics. White space allows a design to “breathe”. By increasing or decreasing the amount of white space, the designer can achieve different outcomes and effects.
Think of a brand like Apple, or luxury fashion brands. These brands shy away from loud advertisements and gaudy, cluttered visuals. In the case of Apple their website, packaging and products are famous for being extremely minimalist. You probably have seen luxury advertisements which are very stark, containing only a photo and the logo.
White space is a type of element which can be just as important as your brand logo. If a brand uses a lot of white space in their marketing materials, it can communicate elegance, simplicity, cleanliness, modernism, and so much more. It also suggests bold confidence – “We don’t need to shout about how good we are or clutter our website with superfluous frills, our product speaks for itself”.
White space isn’t just empty wasted space which should be filled up. Ultimately, it plays an important role in your website’s design. Instead of only focusing on the content on the page, it is good consider the overall visual picture, and to work with your web designer to find the optimum balance of white space for your design.