The Complete Landing Page Design Guide: Part 1

Posted by Hunter Liptrap on Jan 28, 2016
Hunter Liptrap

landing-page-design-guide-1-compressor.jpg

You might look at a landing page and think, "Man that looks easy!", but there's more to landing page design than you might think. The reality is that there's a ton of information and thought that goes into a successful landing page, and it goes beyond design.

Let's take an in-depth look at landing page design that influences conversion and boost the conversion rates.

In this part we are going to take a look at attention ratio, design match, and visual hierarchy

If your interested in landing page design elements, context of use, and how to optimize for mobile check out Part 2 here.

Bonus: Download our 52-point landing page design checklist in PDF format. Easily save it to your computer or print it for reference for your next landing page.

Introduction

The first part of designing a landing page is understanding attention ratio. You may ask, "Hey, What's Attention Ratio?", here's how Oli Gardner describes it:

"Attention Ratio is the ratio of the number of things you can do on a given page, to the number of things you should be doing. When talking about marketing campaigns, you should only have a single goal (or you’re doing it wrong), and thus the Attention Ratio should be 1:1."

A visitor's attention span is short. Real short.

Back in 2000, humans had an attention span of 12 seconds.

Today, we have an attention span of 8 seconds.

You know what the attention span of a goldfish is? 9 seconds.

We now officially have a shorter attention span than a goldfish.

That's why it's important to limit the number of options visitors have on a page to 1. The more options presented to a visitor, the more opportunities there are to lose them.

The concept of Attention Ratio and the human attention span play a huge role in properly designing a landing page that converts, so keep that in mind as you move through this guide.

Context

Are you designing your landing pages with the consideration of where the visitor is coming from?

If you aren't currently, now is the time to start. Providing context to your landing page starts with the visitor's path to the page.

Are they coming from one of your site pages? A Facebook ad? or A display ad?

While landing pages are the most acceptable pages to deviate from the norm of your website design, they should still provide the visitor with the feeling of "I'm in the right place" by having a familiar design.

Design match is the visual cousin, of what you are probably more familiar with, Message Match.

If you're not sure what message match is here's a pretty good definition:

"Message match is a measure of how well your landing page headline matches the call-to-action that was clicked to arrive on your landing page. For paid ads, this is the headline of the ad."

Message match is critically important and can play a part in design match as well.

Design match particularly refers to the design elements in your paid ads and landing pages. It accounts for both visuals and content (which is why message match plays somewhat of a role here).

When a visitor clicks a paid ad, they shouldn't be shocked by the landing page. The visual context given in the ad should be an indicator of what they will see once they click through.

If you can eliminate a visitors need to figure out where they are, you are one step closer to making a conversion.

Here are a few items that should match between your paid ads and landing pages:

  • Colors
  • Images
  • Icons
  • Headlines
  • Fonts

Just to reiterate the colors, images, icons, headlines, and fonts used in your paid ads should also appear on your landing pages.

Visual Hierarchy

Visual hierarchy is one of the most important parts of web design, because it directs our attention. It affects the order in which our eyes perceive information.

Furthermore, visual hierarchy should be used to display the information that is most important.

To illustrate the point check out this exercise.

Please rank the circles in the order of importance:

visual hierarchy

Despite each of these circles being different colors, it should have been easy to rank them in order of importance by their size.

By using simple principles of design you can provide guidance to visitors to the information that they need to digest first.

Let's take a look at 8 principles of design that you can use to show visual hierarchy, including size.

8 Possible Ways to Add Visual Hierarchy to Your Design

From Visually.

1. Size

The short version is the bigger you make something, the important it appears.

Size is a way to show dominance. However, the important thing to remember is that size is relative.

Yao Ming is a tall man, even by basketball standards, but is he as tall as a giraffe? Nope.

Same thing applies to your page. Size is only relative to what's on the screen, page, or page section.

Take a look at how Shopify, used size in their landing page design.

shopify

The largest part of the landing page is the video, as it should be. You might read the header, but after that the video dominates your attention.

2. Contrast

This is probably the best time to point out that a specific color on your call-to-action or submit button doesn't actually convert better than another. The color that will convert the best is the one that contrast's with the rest of the page.

Contrasting elements create a draw for attention.

Rarely is it an emotional reaction that caused one button color to convert better than another. I mean it's possible that someone out there hates the color red and will never click a red button, but that shouldn't be your focus. Using a contrasting color to the rest of the page to say to your visitor "Hey, look at me I'm important", is the way you should contrast and pick your button color.

Let's take a look at a landing page that has been featured on Unbounce in the past, because it's a great example of how to use contrast on a landing page if nothing else.

fluidsurveys-th

They use 2 contrasting colors in the hero section to showcase the two most important elements of the page.

  1. They use orange to showcase "Free!"
  2. They use green to add contrast to the submit button "Get Started Today!"

3. Symmetry 

During the early 20th century, the famous Harvard mathematician George David Birkhoff developed a mathematical formula which he believed could be used to gauge how beautiful and appealing a work of art was.

Birkhoff's formula relied on two abstract concepts: complexity and order (or symmetry).

If something is complex, it will be more appealing if it is less symmetrical. Alternatively, if something is highly-symmetrical, it is better if it is less complex.

The most common form of symmetry in web design is reflection. One of the best examples of symmetry and reflection in web design, at least that I can recall, is on the homepage of flat vs. realism.

flat vs realistic design

Despite the style changing half way through the screen, everything else is in balance. By using a symmetrical design, this homepage places an equal amount of importance on Flat Design and Realism. They don't make it a point to favor one over the other.

There's no doubt this is a beautiful design, it even won an award for site of the day, but is symmetrical the best way to go for you?

On the other side of symmetry is asymmetry, lack of equality or equivalence between parts or aspects of something, which creates energy and tension in the design.

By using asymmetry you can create a visually compelling composition that directs your focus to one piece of the page more than another.

It's difficult to design a page that is either exclusively symmetric or asymmetric, most pages will use a combination of the two. So here are a few tips to help you in considering the symmetry, or lack there of; in your design...

  • Symmetry helps us remember
  • Asymmetry grabs interest
  • Symmetry is great for the basic layout structure
  • With asymmetry, compositional balance should be in mind at all times
  • Stick to the basics, don't create a page that's cluttered or hard to understand

4. Similarity

As far as design principles are concerned this one is pretty simple. In Gestalt psychology, which tries to understand the laws of our ability to acquire and maintain meaningful perceptions in an apparently chaotic world, it's says:

"Things that are similar are perceived to be more related than things that are dissimilar."

That's pretty much what you were expecting right?

Well, that's not everything.

You have to understand what a viewer will perceive to be "similar".

Similarity is effected by multiple other design principles that are included in creating visual hierarchy. If you are trying to determine similarity you are probably also looking at these...

  • Size
  • Color
  • Proximity
  • Shape

These are common ways people will try to group similar objects.

Take a quick test and see which objects you think are related:

shape

So, you have a bunch of circles and squares all the same color, but different sizes. You probably didn't group them together by their color and you probably didn't relate them based on size. In all likelihood you determined which objects were related to each based on their shape.

Let's take a look at how WebDam utilized similarity in their landing page design to relate parts of their design...

webdam

Let's start with the icons in the section below the hero shot and form. All of the icons are different in that they have a different picture in the middle. However, they are all circles and they are all black. By creating their icons in like, it makes it easier for a visitor to relate them all together.

Next, take a look at all the logos in the middle of the page. Despite not saying what they are for, which would be helpful, I'm going to assume it's a list of companies using their service. All these logos are not the same color naturally. By making all the logos the same color, a nice grey, and giving them roughly the same visual weight and size they become related.

Finally, the testimonials at the bottom all feature a nice headshot of the individual wrapped in the shape of a circle.

Each section on this page creates its own similarity.

5. Unity

Each sentence, each paragraph, and each page section should serve the same purpose on a landing page - to have the visitor fill out your form or call you because it's just so awesome they need to have whatever you are offering.

From the top of your page to the bottom, each new element should be working to reinforce the one before it.

The two kinds of unity we’re concerned with here are...

  • Visual unity – for example a group of elements all aligned to a common axis
  • Conceptual unity – for example an image of a diamond, a mansion, and a pile of money might be unified around the concept of wealth

Unity is what holds your design together both visually and conceptually.

6. Grouping

Grouping is about placing like elements together through the use of proximity, or other means which we will address in a bit...

By grouping elements together you can reduce the cognitive load of a visitor, making it easier for them to process information on your page and allowing them to understand the page better.

When grouping like elements they would typically be related through their goal or visual representation.

So, who uses the concept of grouping on their landing pages...

Have you heard of Amazon?

I'm assuming the answer is yes.

amazon-grouping

Amazon groups it's content into 3 columns, creating a visual hierarchy that makes their pages easy to digest.

On the left you see the product, typically the first you want to see.

In the middle, you can get the text description of the product, which if you weren't sold on the image you'd probably read.

Finally, on the right is the checkout information all grouped together.

But, do you notice anything different about the way the checkout information is grouped?

Unlike the other two sections, the checkout information is encapsulated.

Encapsulation provides an instant separation of a group of elements from the rest of the page.

By encapsulating the checkout information, Amazon places an emphasis on it. Encapsulation is a strong design principle that is a sub section of grouping, which can be extremely powerful in directing a visitors attention.

What types of information should you encapsulate on your page...

Your form and call to action.

design-to-increase-conversions-encapsulation

Take a look at the difference between these two mock-ups. Just by encapsulating the form, your eye is drawn to it.

7. Style

You can place emphasis on one piece of information over another by changing its style. A change of style is an easy way to make one piece of information stand out from other pieces that are similar.

Take this Unbounce landing page as an example...

unbounce_landing_page

I want to call your attention to the testimonials given at the bottom of the page.

The one to the left has a different style than the ones on the right. The testimonial is much longer, which may have something to do with the placement, but it takes up more visual space.

On top of that the image of Gev is the only testimonial photo that is in color. To me that's a sign to read that one.

By using a change of style you can place emphasis on the information or elements of the page that you want.

8. Color

Color is an effective and easy way to create distinction between what's important and what's not. By choosing a bold color or one that contrast's with your primary color palette you can highlight a feature, making it a focal point of the page.

When choosing color to use in your landing page design, keep this in mind...

In general, high saturation and complimentary colors projecting messages loudly, while low saturation and pastel colors and tones (light and dark shades of a single color) create a soft calming mood.

There are two specific ways in which color theory relates to designing a successful landing page:

  1. Contrasting color combinations and readability
  2. Psychological color associations

While it's important to take color associations into account, it's far more important to choose colors that are readable.

Is it easy to read this? Nope.

Probably not the best choices of colors.

Colors are more readable when they have a stark contrast from their background. Like black on white for instance.

If you want to convert visitors into leads your landing page should be understood quickly and easily. The best way to do this with color is to ensure that your text and background colors are complimentary, but contrasting.

To find contrasting colors on your own, your best bet is to use a color wheel. There are plenty of tools out there, but my personal preference is Adobe's color wheel. It will even spit out the hex code for you to copy and paste in your content editor easily.

colorwheel-compressor

Adobe offers multiple pre-set color options. This is the preset Complimentary setting. You can drag the points on the color wheel or paste in your hex code and the tool will move the points on the color wheel for you.

The other options on this color wheel are:

  • Analogous
  • Monochromatic
  • Triad
  • Compound
  • Shades
  • Custom

I'd encourage you to take this tool for a spin if you need help finding the color you want to use to make that one feature really pop.

The next thing you want to consider with color is the psychological impact associated with each color.

Here's a list of colors and the associated feelings they typically convey:

  • Red: danger, stop, negative, excitement, hot
  • Dark Blue: stable, calming, trustworthy, mature
  • Light Blue: youthful, masculine, cool
  • Green: growth, positive, organic, go, comforting
  • White: pure, clean, honest
  • Black: serious, heavy, death
  • Gray: integrity, neutral, cool, mature
  • Brown: wholesome, organic, unpretentious
  • Yellow: emotional, positive, caution
  • Gold: conservative, stable, elegant
  • Orange: emotional, positive, organic
  • Purple: youthful, contemporary, royal
  • Pink: youthful, feminine, warm
  • Pastels: youthful, soft, feminine, sensitive
  • Metallics: elegant, lasting, wealthy

Now, after all this I'm going to say something you might not like...

One color doesn't convert better than another.

A color might convert better on a certain page for one person, but it's not a global blanket statement about color.

Instead, the color that converts the best is often the one that contrasts most with the rest of the page.

Take a look at this test HubSpot ran for one of their clients...

hubspot

Their test was simple, a green button vs. a red button.

They ran the test over a period of a few days worth of traffic and in total had over 2,000 subjects visit.

Their result was the red button outperformed the green button by 21%.

But why is that?

Do you notice much red on that page other than the button? Maybe the red from the YouTube icon, but that's it.

Now how about green? There's a large chunk of the hero shot that is green, the logo is green, and there's a cash money icon that's green directly below the button.

It's no wonder the red button beats the green button.

The green button follows the color scheme of the page and therefore gets lost in the shuffle.

On the other hand, the red button is a stark contrast to the green and everything else on the page. It screams click me! So, 21% more people clicked it. Imagine that.

So, what does this mean to you?

Choose a color for your call to action, or form submit, that contrasts with the rest of the page.

What's Next

Thanks for getting this far in the Complete Landing Page Design Guide. Take some time to digest and implement these tips on your landing pages.

Actionable tips and insights still to come:

  • Landing page elements
  • Context of use
  • How to optimize for mobile
  • Web design trends
  • Eliminating friction
  • Optimization testing

Part 2 is up! It covers landing page design elements, context of use, and how to optimize for mobile. Check it out here...

Author
Hunter Liptrap

Hunter Liptrap

Creative Director at Modgility
Hunter is Certified Inbound Marketing, Growth Driven Design, and HubSpot Design. He has a passion for the conversion rate optimization process. With 3 years of experience he has designed and built multiple websites across various industries.

Leave a Comment: