Using White Space - Instapage Guide

Landing Page Design Best Practices

Chapter 7

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?

Law of Proximity Example

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:

Grouping Form Elements with 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.

BirdEye Landing Page Example

In contrast look at Trumpia’s landing page where the use of white space isn’t ideal:

Trumpia Landing Page Example

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:

Intacct Landing Page Example

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.

Choose a Chapter

Sign Up for a 14-day Free Trial

Maximize your ad spend while significantly lowering your cost of customer acquisition.