So what is white space?
White space (or negative space) is simply unmarked space in the website design. It is the space between the layouts, lines of paragraphs, between paragraphs, between different elements and so on.
White space does not literally mean an empty space with a white background. It can be of any colour, texture, patterns or even a background image.
In this era where they say content is king, we are often tempted to put down every bit of information we have researched or know about a particular topic.
However, have we ever tried talking to any of the end users who consume the content? Perhaps we should measure how much of our content is actually consumed and consumed easily without much of cognitive load.
When used correctly, white space brings visual clarity and balance to a layout.
“White Space in design composition is same as use of Silence in a musical composition. Without proportionate use of Silence, music is unstructured; some may call it noise. Similarly, without White Space, design is unstructured and difficult to consume”
To the untrained eye, it is easy to look at white space and suggest adding something. Clients do it all the time. Why shouldn’t they add something to the ad, the billboard, or the brochure they paid for? Shouldn’t they maximise the use of any available real estate?
Well, If they want to be effective, the answer is a firm no.
Let’s create the scenario… we come up with a design we are super proud of – a great mix of type, images and white space. And then the dreaded request comes… “can we just add an extra three paragraphs? It should be easy, there is so much space!“
But whilst a client may see white or negative space as something to be filled, the trained designer understands the crucial role it plays in pretty and effective communications.
Why white space matters
Designers use white space as an integral part of their design for good reasons.
When used well, it can transform not only the design but also the business for which the design is made. While aesthetics are one of the benefits, others revolve around tangible impacts on the effectiveness of the page.
In other words, white space significantly boosts not only UI (User Interface) but also UX (User Experience) of the page.
Lets take a look at the factors other than look and feel of the page.
Balance and readability
Using white space evenly makes the content in design easily scannable and significantly improves legibility.
A study conducted indicates that proper use of white space between lines of paragraphs and its left and right margins can increase comprehension up to 20%. Such small spaces between lines, paragraphs or between menu items are also called as Micro White Spaces.
Focus and emphasis with white space
Large spaces between layouts and layout elements, also called as Macro White Spaces help greatly in guiding the users through the page and prioritising the focus area for the user. The screen grabs from Apple.com clearly indicate what the page wants to convey to the user.
As per studies, the average attention span of an internet user is 6 seconds, which is even less than what a gold fish has (7–8 seconds).
Effective use of white space helps the design to get the message through the user quickly and increase the probability of interaction by highlighting the CTAs (Call to actions).
“As designers, it is our duty to create communication lines between the design and users and white space can help a great deal in it.”
Branding and tone
Use of micro and macro white spaces in different proportions help in defining the character of web page. News websites are good examples of websites which use micro white spaces more than macro white spaces.
Heavy use of macro white spaces brings in a sense of sophistication and luxury to the web pages. Do not agree? Have a look at websites of Apple or Microsoft.
If asked to keep marketing websites aside, have a look at Google’s Mail, Drive or Docs. Content driven website like Medium itself displays beautiful use of white spaces.
Creates a breathing space for users
Have a look at the below images. There is a simple message to be given and it is about saving power for future. In the image to the left, our eye keeps on jumping from one element to another — Brand name, Title, text, button, bulb.
There is very less area where there is no element; high motor load.
In contrary, as soon as we look at the image on the right, the content is the same — brand name, title, text, button, bulb. What makes it soothing to the eyes is the white space around the content. It helps our eyes take rest, helps us breathe and not get overwhelmed with information.
Large areas of white space do NOT need to be filled with content.
Users will scroll and scroll some more. We promise you. There is this myth that users will not always scroll to see all the content on a page. Thus, some of our stakeholders request that the majority of a page’s content lives above the fold.
Users have evolved and become more comfortable with scrolling. There are definitely certain elements that are best suited above the fold, but it’s important not to limit the use of white space to accommodate for the fold.
White space isn’t literally an empty space, it’s a powerful design tool. The application of white space is both art and science. Maintaining an optimum level of white space in the design composition and creating a balance will only come by experience and practice.
Think you’re using too much white space? There’s a good chance you’re not. If anything, you’re probably not using enough. When in doubt, add more white space…
Thanks for reading. Let us know if you enjoyed reading this article. Also do comment below with your views on white space and its uses.