When talking about the word white space your attention might jump to white empty sidebars sandwiching the content in the center. Though, white space, (or negative space) also denotes to the unoccupied area around your imageries or other components on the folio in addition to the spacing amongst letters in your titles and text.
Having some white space is important to the layout of almost every website. Done correctly, it provides your site a more refined and graceful look without surrendering too much exquisite screen real estate.
Not influenced? “I don’t pay to host empty space,” you say? Well, here are four motives why you might need to change your mind.
#1: Attracts Attention
Let’s start with the humblest one. While the top, online attention grabbing strategy is a matter of much debate, we can all agree on what grabs no attention – nothing. This is what makes white space an effective method of driving and funneling attention because you can use it to draw attention to the point of interest faster.
For instance, you can order a page with text and pictures and high point the important page elements. Or you can leave extra space nearby the key images or create the fonts bigger (increasing the white space of letter and line spacing) to make them stand out to the viewer in a much tidier fashion.
And you can do this with all kinds of pages such as your homepage, landing pages, conversion funnels, portfolio pages, etc. Be sure to check out Nataly’s post on Handling White Space: Website Designs with an Open Feeling for more website design examples.
The key principle is simple: empty space around the key object focuses the viewer’s attention on it since there are no distracting elements or clutter around it.
#2: Establishes Visual Order
How do you know the difference between the logo and the homepage splash of a website? The obvious thing that comes to mind is the size of the element. A little less obvious perhaps, but highly important from a design standpoint, is the size of empty space surrounding the element. Higher priority elements have more empty space surrounding them and that’s what makes them pop out and grab the viewer’s attention. Here’s a neat design that demonstrates visual hierarchy.
Notice how there aren’t any lines, colors, or dividers to set different sections apart? Yet you’re still able to tell the navigation elements apart from the on-screen options, heading, social sharing buttons, and contact information. How? One word: white space.
By implementing this hierarchy of visual priorities and utilizing white space, your design will exhibit a smooth visual flow that eliminates ambiguity. The viewer knows what’s important and where to go next.
Landing pages are usually a great example of this. You have a large title that contains more white space than the text that will follow. And that text further continues to a large Subscribe Now! button that has the most amount of white space around it. This is a fairly generic example that can be seen in everyday browsing experience. Let’s take a look at GTmetrix.
The GTmetrix homepage leverages white space to establish strong visual order. When you land on the website, you’re immediately drawn to its title and Analyze button. It’s symmetrical layout and large font size encourages visitors to use the site speed analysis tool.
#3: Sets Groups Apart
If you still think that white space and waste of space are synonymous then let me show you how you can actually save space by using it.
If you find yourself running out of screen real estate yet your products, services, or anything else that you want your viewer’s attention towards just keeps piling on then you run the risk of lining them up together in the leftover space and placing items too close together. This causes the items in that section to appear to be similar or get little attention because they’ve blended in with the noise.
A solution can be that instead of highlighting your products you just size them different, change their layout and orientation, or any combination of the two. This will create some white space between the objects, set them apart from each other, and make it easier for your viewer to pick up on that.
Let’s look at how CoSchedule has designed their features section.
CoSchedule’s features section follows a layout that allows them to display one feature at a time. Individually, it consists of a brief description and an image. Since you can only see one feature at a time, it draws in your attention and keeps it there.
You’re also able to group similar fields together on a form by leveraging white space. It makes the form easier to read and encourages the visitor to fill it out. Forms with little to no white space look crammed and are seemingly difficult to fill out. What’s more is that they also give the impression that the form is asking for too much information whereas it may actually be asking for just the essentials.
Here’s an example of two forms – one with white space and the other without. See how the form with dividers has more white space and causes the form’s fields to be grouped together?
#4: Better Readability
Last but not least, white space is the backbone of text readability. You wouldn’t be able to read through this text if it was all crammed together with minimal spacing.
Having too little whitespace makes text look cramped and hard to read. Leave too much space and you waste space in addition to risking the text looking disjointed. This is the reason why the world’s top designers place so much emphasis on fonts and typography.The Google Fonts example above depicts two fonts – BioRhyme Expanded and Cookie. BioRhyme Expanded uses too much white space whereas Cookie is a little hard to read because its individual characters aren’t spaced out enough.
Now let’s compare them to two well-balanced fonts:
Different fonts utilize different amounts of white space depending on the style. However, another major factor is font size. Headings are larger and utilize more space in order to be prominent to the viewer. Some other areas that use white space to improve and enhance the reading experience include line spacing and paragraph margins.
Conclusion
To sum it up, white space in design is one of the venues where art and science meet. A scientific application of this art is necessary for the design to be effective. It is one step in the direction of beautification through simplification; of offering more through less.
Let’s quickly recap the main benefits of leveraging white space to improve your designs:
- White space declutters your design allowing you to draw the user’s attention to wherever you want
- It sets visual order making it easy for the visitor to immediately identify your important page elements such as call to action buttons
- Using white space allows you to make your designs look neater and less all-over-the-place by grouping them together
- White space in fonts and typography improves your site’s readability
I hope I have been able to convince you that white space is not wasted screen real estate. If anything, it is just as valuable as the actual content on your website, if not more for forming its structure and improving accessibility. Do you think you can improve your website’s design by using white space? If so, how? We’d love to hear from you so let us know by commenting below!
About the Author
Ramiz Al Jalbani
Ramiz is a content writer and a supply chain professional focused on IT and Trading. He has a wide experience of using the new and latest technology to trade businesses. A true Middle Eastern and South Asian Market insider, Ramiz shares his thoughts and opinions in the form of weekly essays that you can subscribe to via subscribing to blog of Ava IT Solutions or email. He has written numerous essays, articles and blogs which have been featured and quoted in different journals around the globe. The topics range from Digital Marketing, Social Media Trends, Technology Trends and Integration of Business Processes to IT.
