Using White Space
White space (aka negative space) is the empty area on a page that helps draw attention or highlight a specific element.
White space isn’t necessarily “white” space – it’s just negative space, so it can be any color as long as it performs the functions it’s supposed to.
On landing pages, white space doesn’t just have an aesthetic purpose. Instead, it fulfills the following three functions:
1. Improves comprehension
White space helps reduce clutter from your page design. Using white space in left and right margins has been proven to increase comprehension by up to 20%. When you surround an element (e.g. your CTA) with white space, it allows it to “breathe” and increases readability.
2. Clarifying relationships
When two objects are near each other, they start to look similar and are grouped together. This is the law of proximity, and it applies to visual information. For example, how do you interpret this picture?
Instead of seeing 20 individual dots, we see two groups of dots — one with twelve dots and the other with eight. This is a shortcut our brain takes when it’s processing visual information. The only thing that is separating these groups of dots is white space between the two groups.
According to the Gestalt principle, people overlook elements if they are placed too far from each other. On your lead capture forms, this principle can be translated as having too much space between the text of the form field and the field where visitors are supposed to input data. Furthermore, it’s recommended you group similar form fields together to make the forms easier to fill out.
This graphic by Nielson Norman Group showcases the difference between two forms by grouping related fields together and adding sufficient white space:
This organizational structure is particularly beneficial when you’re designing long forms with a wide variety of fields.
3. Focus Attention
White space allows you to separate particular elements from each other, which makes them stand out more and attract attention. White space manipulates your eyes and makes you focus on elements that are surrounded by the space — such that you don’t seem to notice the space but only focus on the element.
As an example, the BirdEye landing page uses ample white space between visual elements and copy to draw visitors’ focus to the most important thing — the CTA.
In contrast look at Trumpia’s landing page where the use of white space isn’t ideal:
Let’s look at Intacct page, the negative space surrounding the page elements isn’t white, but it separates the elements from each other and reduces clutter:
White space is like the glue that holds a broken object together. You can’t see it, but it serves a very important function and helps increase your landing page conversion rate.