Design theory and conversion rate optimization

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.

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.

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).

“Use the rule of thirds to design layouts that look good and convert well.”

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

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.

“Smaller changes lead to bigger returns in clickability.”

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.

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.

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.

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.

Khalid Saleh is the co-founder and CEO of conversion optimization company Invesp, where he is gearing up to launch their first comprehensive conversion rate optimization tool Figpii that will include everything you need to optimize the conversion rate of your websites.