Whitespace: Why and how to use it in the Website Builder

header

What is whitespace?

In design parlance, whitespace, or negative space refers to the space between or within elements in a composition. While it is often neglected, its importance cannot be overstated. It is not a new concept either. In 1930, Jan Tschichold postured that “White space is to be regarded as an active element, not a passive background”.

And yet it remains painfully overlooked.

Three important reasons to use whitespace

1. Achieve design harmony

Design harmony might sound like a meaningless and esoteric term, but in practice, if harmony is achieved your website is a lot easier to use. Consider the difference between Google’s and Yahoo! homepage, which do you think makes for a much more pleasing search experience?

Google's HomepageGoogle’s homepage

 

Yahoo's HomepageYahoo!’s homepage

2. Your page becomes much more readable

In internet shorthand, the acronym TL;DR stands for ‘Too Long; Didn’t Read’. TL;DR is often used when a reader encounters a long block of text, something that is easily fixed with whitespace. Consider the following excerpt from Winston Churchill’s famous 1940 “We shall fight on the beaches” speech.

ParagraphNoWhiteSpaceBefore we added whitespace

 

ParagraphWhiteSpaceBy just adding a bit of white space within and around the text, it is made a lot easier to read.

3. Your brand becomes more sophisticated

Many brands use whitespace to communicate a feeling of sophistication and elegance, moving their brand upscale. This Mark Buon article demonstrates this perfectly, using the same copy and imagery with differing uses of whitespace. As you can see, instead of having to yell all your messaging, whitespace can be an important tool.

Luxury

Three easy ways to include more whitespace in your website using the Website Builder

1. Use one of the many themes that have a lot of whitespace built in

Many of the themes in the Website Builder already make great use of white space. Here are just three great examples

  1. CurabiCurabi

 

ii. Reco Studio

RecoStudio

 

iii. Creative

Creative

2. Use the spacers

spacers

Click on any element when you’re in the Website Builder, and at the corners you’d see a double sided arrow appear – clicking and dragging them will increase the space between block elements on your site

3. Use the text properties panel

propertiesPanelWhen you click on any text box in the Website Builder, you can select the property panel on the left:

This will allow you to space your text to easily maximize your site’s legibility.

In conclusion, whitespace is a relatively simple concept that remains vastly underutilized especially when it comes to web design. The practical benefits vastly outweigh the small time and effort investment required to do so. Hopefully, this article has inspired you and given you some tools to incorporate that into your website!

Comments