Designer or not, creating a landing page entails knowing how to get inside your visitors’ heads. In this post, I’ll talk about landing page design principles you can apply to get your readers to convert. I’ll also demonstrate these concepts in action through real-world examples and examples of actual landing pages.
I’ve discussed what should go in your landing page, but before you even start creating one, you need to think about design. The landing page copy and design should work together to convince your visitors to convert into leads.
In this article, I’ll introduce some design principles that you need to master and how to apply these so you can create a landing page that converts.
Disclaimer: I DON’T have access to information about how well the landing pages I’m using as examples are actually converting, so treat them as simple illustrations of my points rather than absolute models or standards.
Encapsulation is a simple design technique wherein you frame a target object so that the viewer’s eye is drawn toward it.
In the photograph below, the yellow frame draws your eyes toward the white castle in the distance. It’s impossible to not look at it.
Encapsulation is also demonstrated in the landing page below. Notice how the lead capture form is inside a box, bringing the focus to the form at first glance.
It’s good to use this when you have plenty of other elements in your landing page. Encapsulating important parts of your landing page will ensure that your visitor looks past everything else and focuses on the elements inside the box or border.
Landing page design tip: Enclose your lead capture form in a simple box. You can experiment with using just a border to frame your lead capture form, or using a completely different colored box.
Using contrast is an effective way to make important elements in your page stand out. It automatically draws the eye toward that particular element.
This is apparent in the photograph below. It’s hard to tear your eyes away from the pink jellyfish against the blue background.
Color contrast is best applied to your CTA, since that is the ultimate goal of your landing page and what you want your visitor to accomplish. It’s important to note here that the actual color of the element doesn’t matter as much as how much it contrasts with its background. Thus, contrast is not absolute, it’s relative.
I’ll show you in the following examples how a similarly colored button (I’m using green) works differently in different backgrounds.
On the left, we have the Outskirts Press Landing Page, which uses a green button against a bluish-gray background. It’s a different color from the background, but it doesn’t really pop out of the page. On the right, Consulting.com uses a green button but against a stark white background. Your eyes are drawn toward the button because it just pops.
As a general rule, to get the best color contrast, look no further than your color wheel. The easy way to select your accent color is to select the color opposite the dominant color of your page or your background. In the case of the Outskirts Press landing page, they would have had a better contrast if they used an orange button.
There are various color pickers available on the internet that you can use to know the exact complement of the background color or dominant color of your landing page. My personal picks are W3Schools and HTML Color Codes.
At times, though, using complementary colors can have a jarring effect. Take this yellow button against a blue background.
It’s certainly contrasting, and effective in that your eyes are drawn toward it. However, the effect is jarring and might turn people off (might even give some of them a headache). Sometimes, you’ll want to use colors that are not necessarily opposite on the color wheel but still contrasting. This is where value contrast comes in.
The value of a color refers to its lightness or darkness in relation to white or black. The value of a color is what you tweak when you don’t want to use complementary colors that are too striking. Let me demonstrate this in the following example using the same background but a green button this time.
As you can see, it doesn’t contrast very much. But what we can do is to make the button color a bit lighter.
This one has a better contrast and is much easier on the eyes than the yellow button.
A good way to test your color combination is to convert the image to grayscale to see if the colors contrast and are still easy to see. Here is a side-by-side comparison of the two images with different shades of green, with their grayscale versions below.
The ones on the right contrast well, but are still easy on the eyes. Thus, Outskirts Press could have still made the green button on a blue background work if they just tweaked the value contrast.
Landing page design tip: Use a single dominant color for your landing page and then make your CTA a contrasting color so it attracts attention.
Further reading: You can read more about color theory and picking contrasting colors in a previous article.
Directional cues are visual indicators that guide your visitors through your page, leading them to the final goal, i.e., your lead capture form and CTA. These cues ensure that your visitors see what you want them to see in the order you want them to be seen.
This sounds a bit complicated, so let me try to break it down for you.
Most people do not view web pages like they would read a book. It’s rarely left to right (or right to left for some languages), top to bottom. For landing pages that contain minimal copy, readers usually view them in a Z pattern, illustrated below.
Starting from the upper left corner, the reader does a quick scan across the top toward the upper right corner. Then, the reader looks left and down in a diagonal path toward the lower left corner. Finally, line of sight moves horizontally from left to right, ending in the lower right corner.
This is why the common landing page layout has the headline and subheadline across the top, benefits and/or hero image on the left, then the lead capture form at the right, which is the terminal point of the Z. An example of this is in the landing page by TheHOTH.co for their video course.
Of course, not all landing pages look like this, and yours doesn’t have to be. You can arrange the elements of your landing page however you want without confusing them. The key is for you to guide your readers’ eyes to where you want them to look at. Here are some ways you can do that.
Below is an example of how lines can hijack the natural tendency of your eyes.
The lines make your eyes go upward toward the top of the building. This goes against the usual way your eyes go, which is from top to bottom. Take a look at the landing page example below.
Notice the green arrow beside the subheadline, directing your eyes from the headline and subheadline toward the lead capture form on the right. Visitors then tend to look at the form instead of at the image on the left.
At the bottom of the page, there’s a blue arrowhead pointing downward, inviting visitors to scroll down for more information.
Landing Page Design Tip: Use arrows or more subtle lines or triangles to guide your visitors through the page.
We tend to look at faces first, then follow their gaze to see what they’re looking at. It could be curiosity or it could be an evolutionary behavior. Whatever it is, we follow eye direction without even thinking about it.
In this photo, we tend to look at the phone that the woman is holding, and then the coffee cup in the foreground. Take a look at the following example from Campaign Monitor’s landing page.
It looks like the duo are looking at their computer monitor, but following their gazes further leads us to look at the headline and then their CTAs (yes, they have two, but let’s ignore that for now).
This is a less subtle way to direct readers’ eyes to look at something and may look tacky because it’s just so obvious. But done right, this can be a powerful way to direct your visitors’ gazes.
You can’t help but look at what the woman is pointing to, but you’re more aware that you’re doing so, as opposed to subtly following the direction where someone is looking.
Landing Page Design Tip: Choose images of faces looking in the direction of your CTA over images of people pointing to it. Try to use attractive faces to prolong the time your visitors stay on your landing page.
Whitespace isn’t always white; the term refers to the blank space between page elements. This blank space keeps your landing page from looking too cluttered or unclear and helps highlight and draw attention to your landing page elements.
In the following photograph, notice how the expansive space around the subject serves to emphasize it; it’s impossible not to be drawn to the person.
Here are some ways you can use whitespace in your landing page.
Placing whitespace around the most important elements in your landing page reduces distraction and increases the clarity of the message. This is especially important for your CTA. An example of this is found in HubSpot’s landing page.
Notice how the appropriate amount of whitespace brings more attention to the CTA button, while not distancing itself too much from the subheadline text. This way, visitors notice the CTA because it stands out but is still relevant.
Landing Page Design Tip: Surrounding your lead capture form and CTA with adequate breathing space will help make them stand out on your landing page.
Copy that can’t be read is useless. This is where legibility comes in.
The little spaces between letters and between lines help your visitors have a more pleasant reading experience. You’ll see what I mean when you compare the two sets of text below.
Notice how much more cramped the text feels just by decreasing the spaces between the letters by 1 point. The same cramped feeling can be observed when manipulating line space.
Displaying cramped text on your landing page will make your visitors more likely to skip away from your landing page.
Landing Page Design Tip: Add the right amount of whitespace in your text to help it become more readable.
Whitespace provides visual cues as to how page elements are grouped. When you surround multiple elements with whitespace, it signifies that these elements are grouped together. By contrast, whitespace between elements signifies that these elements are distinct. An example of how this works is demonstrated below in the landing page for Industrial Strength Marketing (ISM).
Notice how the lead capture form is well-separated from the headline and subheadline, allowing your brain to process the headline and subheadline separately from the lead capture form.
Landing Page Design Tip: Use whitespace to create distinctions between groups of your landing page elements.
In a sense, whitespace can serve as a directional cue in that you can use it to guide readers’ eyes toward the elements you want them to see. For example, consider this landing page from Playbuzz.
The blank space on both the left and right sides guides readers’ eyes to the middle, going against the conventional Z-pattern of perusing a landing page. The whitespace forces readers to start going through the page from the middle and then down.
This isn’t technically a landing page; this is actually a homepage. But this is an extreme example of whitespace above and below a page element being able to force your eyes toward the middle row instead of following the usual Z-pattern. Your eyes are drawn toward the center instead of focusing on the logo on the top left, even if it’s more colorful.
Landing Page Design Tip: Wide margins force your readers’ attention toward the center column. Similarly, wide leading and trailing spaces force your readers’ attention toward the middle row.
I’ve previously discussed images and video in landing pages, but let me delve a little more. Here are some ways you can use images in your landing page.
Food photography is an industry by itself, and that’s because there’s no better way to sell a food item than to show a picture of it. You can write about how you use 100% beef patties in your burgers for the tastiest, juiciest burger ever. Or, you can show people this: