Using design theory to create beautiful, high-converting landing pages

One of the biggest challenges for designers is creating landing pages that not only look good, but also convert well.

You can see why this would be the case—design goals and business goals are often at odds. UX and CRO (conversion rate optimization) principles don’t always align, either.

There is, however, a solution: conversion-optimized design.

Conversion-optimized design is where design theory meets conversion-rate optimization principles. The result is happier users and more profitable businesses.

In this post, I’ll show you exactly how to use your design theory knowledge to optimize your landing page conversion rates.

Design theory and conversion rate optimization

When marketers create landing pages, they focus on layouts, persuasion principles, and information hierarchy.

The top concerns for designers, however, are user experience, colors, typography, and stylistic elements that help build a powerful and usable brand.

Conversion-optimized design essentially seeks to align these 2 schools of thought. So instead of focusing on UX alone, you’d also emphasize persuasion and conversions, while merging it with the aesthetic choices that lead to better looking websites.

Let’s take a look at some theory-backed tactics to creating beautiful landing pages without compromising on conversion rates.

Picking the right layout

Marketers know very well that the layout of different elements on a page will affect conversion rates. This is why they ask designers to put the most important information above the fold and remove navigation menus from checkout pages, even if it goes against UX principles.

But there are some theoretical principles you can adopt to create conversion optimized landing pages without compromising on user experience:

1. Design according to the rule of thirds

If you’ve ever taken any photography lessons, you might have heard of the rule of thirds. Less a rule and more of a suggestion, this rule says that any image has more tension and energy when it is divided into 9 equal parts.

This GIF from Wikipedia illustrates it perfectly:

The rule of thirds is the reason why photographers don’t always center their subjects in the frame. Some of the the world’s most recognizable photographs follow this rule.

Here’s one example:

The rule of thirds doesn’t just apply to photographs—it also applies to landing pages. Take a look at this landing page from WebDAM:

Or this one from Inbound Emotion:

The page design is much more dynamic and energetic than if the designer had simply centered all elements.

As per design theory and eye-scanning data, the intersections of the 3×3 grid lines capture the most attention on any page. So it makes sense that elements placed closed to these grid lines would get more attention as well.

Follow this tactic and your layouts will look good and convert well (while also being highly usable).

2. Place important elements in accordance with Fitts’s law

The human eye is trained to follow hierarchies. Our eyes naturally follow a progression from bigger to smaller elements. Eye tracking studies conducted by Nielsen show this as well:

Here, users focus on the header more than on the body, and their eyes linger longer on the larger font than the smaller paragraph text.

Another principle similar to this is Fitts’s law. Originally formulated by psychologist Paul Fitts in 1954 to describe human-computer interaction, this law states that how quickly a user moves to an on-screen object is a function of ratio of the object’s nearness (to the user) and its size.

Mathematically, this is represented as follows:

The less complicated way to think of this is as follows: If you want people to click on something, make it larger and place it closer to the user’s cursor (or finger).

In desktop applications, this means keeping the most important buttons close to the corners, which occupy primary pixel space (also called “prime pixel”).

For example, the prime-pixel corners in Word all house important buttons:

Websites lack a prime pixel because the page is scrollable. In such a case, it’s wise to consider the center of the screen as the prime pixel area. As Smashing Magazine puts it, web designers have to “necessarily opt for a more compact, centered layout” with the cursor at or near the center of the screen. Per Fitts’s Law, any large button kept close to this area will yield higher clicks.

Hence, you see landing pages like this where the CTA and leading text occupy the dominant areas on the screen.

Keep in mind that Fitts’s law is a binary logarithm, so the clickability of a button doesn’t increase linearly (i.e. a 300% larger button won’t be 300% more clickable). Instead, smaller changes lead to bigger returns in clickability.

For this reason, you’ll do better by placing your CTAs near the center of the screen and making them slightly larger than surrounding elements.

This page from Litmus is a great example:

The CTA occupies the center of the screen and is easily visible in the first half of the page.

Here’s another example from MarketStrong:

Here, the CTA is easily visible above the fold, while the header text occupies prime screen real estate. Note the lack of a navigation bar and small logo.

This is something you can use in your own designs right away—minimize non-essential items on-screen and bring your most important elements closer to the center of the screen, and place them above the fold.

Picking the right fonts

You likely already know the basics of typography. You might also know that the 2 basic categories, serif and sans-serif, can be further divided into different font families like humanist, geometric, modern, slab-serif, etc.

Conversion-rate optimization experts, meanwhile, only consider one thing: Will this font lead to better conversions?

Conversion-optimized design essentially merges these 2 concerns. So instead of choosing a font based on aesthetic or usability considerations alone, you would choose fonts that:

• Improve brand perception, and thus move conversion goals passively.
• Improve the speed and ease with which people can read a page while also emphasizing conversion-focused type elements such as headings.

Let’s look at these in more detail.

1. Typography and brand perception

Take a look at this page from The New York Times:

Now take a look at this page from Buzzfeed:

Both these brands use very different typefaces. NYT uses serif fonts (NYT-Cheltenham and Georgia), while Buzzfeed uses 2 sans-serif fonts (Helvetica Neue Light and Proxima Nova).

This aligns with their brand image: The New York Times is perceived as a home to serious journalism, while Buzzfeed is still largely perceived as a site filled with “fun” cat GIFs.

Designers know this already: Typography and brand identity are deeply related.

For example, one study argues that typography is a core element of whether a brand is seen as “sincere”, “exciting” or “sophisticated”.

Another test conducted by the NYT quizzed readers on the trustworthiness of some scientific studies. The results of the test showed that readers trusted studies written in the Baskerville font the most. Studies written in Comic Sans, on the other hand, were deemed to be the “least trusted.”

For conversion-optimized design, try to use fonts that echo the emotions you want your readers to feel.

That is, use a sincere font like Georgia on a sales page where trustworthiness is crucial, and a more “fun” font like Playfair on non-conversion oriented blog headlines.

Broadly speaking, you can divide some popular fonts as follows:

 

• Sincere: Georgia, Baskerville
• Sophisticated: Garamond Pro, Playfair Display
• Bold: Impact, Oswald, Gotham Condensed Bold
• Modern: Helvetica, Avenir, Roboto, Futura
• Fun: Lobster, Barrio

2. Typography and readability

The font choices you make affect not only the emotions your readers feel, but also how quickly they can read your copy.

More importantly, your type choices decide what page elements your users focus on.

As an example, consider a headline in the bold, decorative Pacifico font:

This would certainly grab your attention, but when the same font is used in a lengthy paragraph, here’s the end result:

That’s not exactly easy to read. It also doesn’t let any particular page element stand out, which is bad for conversions.

Besides using different fonts in your headlines and body text, there are several other ways to work around this.

Readability, line height and paragraph length

This is something CROs and UX designers can agree on: longer line height equals better readability.

For instance, the first paragraph below is much easier to read because of the larger line height.

While line height is important for better readability, an even more crucial factor is paragraph length, i.e. the number of lines/words per paragraph.

For example, most old-school sales pages almost always limit themselves to one- or 2-sentence paragraphs:

Combined with a generous line height, these short paragraphs will make reading your landing pages a whole lot easier.

Readability and font-size

According to one study, larger font has a bigger emotional impact on the reader, which also enhances readability.

You can see this yourself in this example:

It’s now standard to use fonts larger than 16px in paragraph text. Some popular sites such as Medium use fonts as large as 21px.

This is not only good for CRO, but also a sound UX practice since larger fonts are more likely to make your content more accessible.

Picking the right colors

Most established brands have a set of “brand colors” that are used in all their marketing materials, including landing pages.

For example, this is Twitter’s brand colors set:

And this is Coke Zero’s:

If you’re working in any organization that embraces design culture, you probably have these color sets as well.

But if your goal is to increase conversions, you might have to stray from your brand colors in your landing pages—especially if your brand colors aren’t conducive for conversions.

For conversion-optimized design, follow these tips when choosing landing page colors:

1. Choose colors that evoke your landing page’s emotion

You probably know that different colors are associated with different emotions and occasions. You go green with envy and feel blue when you’re down.

Similarly, you associate green with nature (and St. Patrick’s Day); white with snow and purity, red with hunger, power, and aggression; yellow with the warmth of the sun.

This is why so many food companies use red in their logos:

And why green is the favorite color for environmentally-friendly companies like Solar City:

When you’re choosing colors for a landing page, pick something that conveys the same emotions as your product or landing page copy.

That is, if you want your customers to see you as a futuristic brand, use a black, white, and gray/silver theme, like Tesla:

Similarly, if you want your brand to be seen as trustworthy and business-like, use “corporate” colors like blue and white.

Take a look at this Salesforce landing page:

Keep in mind that color associations are cultural. Red might be seen as a symbol of aggression in the west, but in China, it is seen as a symbol of luck and fortune.

2. Use complementary colors for contrast

Complementary colors cancel each other out when combined. However, when they’re placed next to each other, they produce the highest possible contrast (outside of white-black combinations). This is why you see so many landing pages use complementary colors in their design.

For example, this landing page uses orange for its buttons and blue for the surrounding regions—2 complementary colors.

This page likely gets solid conversions.

Similarly, this page from Groupon uses green for the background and red for the button:

Note how the model in the image is facing the form, drawing your attention to it.

Complementary colors should form the foundation of all your landing pages. They’re particularly effective when creating CTAs that stand out.

3. Choose colors that match your target demographic

Studies indicate that colors play a big role in what we decide to purchase. Consumers tend to gravitate particularly strongly to colors that are already culturally associated with their respective age or gender.

One study found that men tend to prefer shades of blue, and women tend to like pastel shades of pink.

Check out this landing page from Birchbox:

And now look at this page from Thrillist:

Birchbox is a subscription box service for beauty goods. Their customers are almost exclusively women. Thrillist’s target audience, on the other hand, is mostly men.

This is reflected in their choice of colors as well: Birchbox uses lighter, colorful hues, while Thrillist sticks to bold, dark colors.

Broadly speaking, you can make the following demographic divisions:

• Men prefer bold, strong colors
• Women prefer softer hues
• Young consumers prefer bright, playful colors
• Older consumers prefer “trustworthy” warm and corporate colors

You can see this reflected in the color choices of some of your favorite brands. For example, Kate Spade, a New York-centered fashion label for women, uses bright colors and pastel shades on their homepage:

Kate Spade’s sister company, Jack Spade, which sells clothing for men, uses a very different color scheme focusing on olives, gray, and blacks:

This is a great example of how brands can target different demographics by carefully selecting their color schemes.

Over to you

By following a few simple principles of design theory, you can create landing pages that will net you leads without compromising your brand.

Focus on choosing the right colors, fonts, and layouts. Pick fonts that correspond to your target market’s requirements and choose colors that complement your brand. As for layout, designing pages that have a strong visual hierarchy and obey Fitts’s Law will go a long way towards improving your conversion rate and brand presence.