Have you ever had one of those days where you can’t seem to get anything accomplished? Distracting coworkers, too much background noise, and constant email notifications can all prevent work from getting done. For one reason or another, it’s difficult to focus and you find yourself incredibly unproductive.
Just like many people perform their best when they’re alone in their own quiet space, the same is true with landing page components. Landing page elements best serve their purpose when they’re isolated — no other elements, no distractions. Just empty space — white space.
White space: What is it and why should you use it?
White space, also known as empty space or negative space, is the area on a web page that helps highlight, or draw attention to, a specific element.
White space graphic design makes people focus on individual landing page elements because, with nothing else to look at nearby, they are forced to look at what is there.
It’s important to note that white space isn’t necessarily “white” — it’s merely empty, unmarked space. It can be any color as long as it helps separate the different elements and contrasts with the element that it’s highlighting.
The psychology behind white space design
Even though white space greatly reduces clutter and makes a web page aesthetically pleasing; it serves several other functional purposes as well, including:
- Increased readability
- Improved focus
- Greater comprehension of the offer
- Enhanced user experience
Whether we recognize it at the time or not, negative space fulfills these purposes by tapping into our psyches. This space allows viewers a visual break while processing your page’s content. This is important because too much information or visual data at one time can cause cognitive fatigue, aka information overload, making it difficult for the brain to absorb and retain any information at all.
With less clutter and fewer distractions, it’s significantly easier for our brains to take in and process information, and to better focus on what matters most.
A landing page lacking white space
Failing to establish a great first impression can be costly to your total conversions and, ultimately, your bottom line. So before showing good examples of white space on landing pages, let’s look at this LogiGear landing page that includes hardly any at all:
What was your first impression of this page? It’s a little overwhelming because everything is crammed together with no breathing room — making it difficult to navigate, focus on what’s important, and comprehend the offer. It’s almost as if the designer was attempting to display everything above the fold and have a very balanced page, that it reduces readability altogether.
Now that you’ve seen what not to do with landing page design let’s examine several great examples of white space.
What elements can white space help optimize?
White space acts as a directional cue, and directional cues are visual aids that point toward the most important elements of your landing page. Here are some of the most important elements to highlight with white space:
Your landing page headline should be attention-grabbing because it’s often the first element viewers see upon arrival. A headline can grab visitors’ attention even quicker if adequate white space surrounds it.
BigMarker created this free trial landing page with plenty of empty space throughout. This screenshot shows above the fold, illustrating how the headline and the form draw attention immediately by popping off the page:
White space is often designed around a screenshot of a company’s software, an image of their product, or a video demonstrating their service. Since engaging media plays such a large role in driving conversions, it’s not uncommon for brands to add negative space around media to make viewers notice it easier.
The image of the software on this OfficeX landing page grabs viewers’ attention as they scroll down the page because it’s surrounded by substantial empty space:
Countdown timers intentionally create a sense of urgency and scarcity because people tend to want things that are running out. Timers can be used for a variety of offers (webinar registrations, special event signups, price discounts, etc.), and since they can be incredibly persuasive at generating conversions; it’s essential that they jump out to visitors.
Here’s an example from Exact Data using ample negative space with their countdown timer — to make sure visitors notice the deadline before the offer expires:
Lead capture form
Lead capture forms are one of the most critical landing page elements, so it only makes sense to highlight them with plenty of white space to draw as much attention as possible.
In this Stackla landing page, visitors’ eyes are drawn immediately to the form with the help of eye gaze in the background and an abundance of white space:
Whether it’s a two-step opt-in, click-through, or hyperlinked with an anchor tag; buttons can take full advantage of white space.
YP Marketing Solutions added a hyperlinked button to the bottom of its landing page to guide visitors back up to the form above the fold. Take note of how the button stands out, as it is surrounding by plenty of space:
Rather than read an entire page of copy, web users would rather scan a web page quickly and easily to find the most valuable information. That’s why designing your landing page copy in small chunks marked by bullet points, or iconography, is ideal. When you couple that with white space, the bullet points draw even more attention.
Just below the fold, Comporium Media Services highlights their additional services with iconography and minimal text:
Testimonials are one of the most persuasive elements on a landing page because they add credibility, trust, and can highlight different aspects of your product or service that helped real clients achieve success.
To make sure your testimonials get noticed, follow Outbrain’s example and surround them with white space:
Along with customer testimonials, company badges are among the most convincing aspects of a landing page. Displaying badges from well-known, reputable brands helps establish authority and credibility — influencing prospects to complete your form and click the CTA button. In the prospect’s mind, they think, “if these other highly credible companies have placed their trust in the product or service, then I can too.”
To demonstrate, Alteryx showcases some of their biggest customers and partners below the fold on their free trial landing page:
One final note about white space web design
Inevitably when you add white space to any landing page design, the page will likely get longer. This isn’t necessarily a bad thing because web users expect to scroll. As long as you incorporate other visual cues on the page to point visitors in your desired direction, visitors are likely to stay focused and engaged.
Take a look at our Publishing Checklist landing page below with white space around each of its important elements. Plus, the down arrow encourages viewers to scroll down to keep evaluating the offer:
How will your next landing page make use of white space?
Although white space is referred to as empty space, the area is not wasted. There is conscious and deliberate intent with landing page white space. By spacing out and highlighting individual elements, you effectively increase comprehension and overall user experience, and in turn, can increase conversions.
Knowing this, which elements will you highlight on your next landing page?
Use our designer-friendly platform to create your own fully optimized landing pages in just minutes. With Instapage, you’ll enjoy 100% customization with the most advanced analytics in the industry.