Web Design

Landing Page Design: The Definitive Guide

7 min read

Mar 16, 2017

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.

In reality, there’s a ton of information and thought that goes into a successful landing page, and it goes beyond design.

The first part of designing a landing page is understanding the 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. This is better.

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.

The Ultimate List of the Web's Best Resources for Landing Page Design

From visual hierarchy to the latest design trends, this guide has you covered.

Chapter 1: How to Provide Context with Design Match

Chapter 2: How to Use Visual Hierarchy

Chapter 3: How to Use Landing Page Design Elements

Chapter 4: Why You Should Provide a Context of Use

Chapter 5: How to Optimize for Mobile

Chapter 6: Using the Latest Trends

Chapter 7: How to Eliminate Friction

Chapter 8: How to Test & Optimize Your Landing Page

Chapter 1

How to Provide Context with Message & Design Match

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.

Chapter 2

How to Use 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, a visual hierarchy should be used to display the information that is most important.

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

Chapter 3

How to Use Landing Page Design Elements

As stated at the start of this guide landing pages are not simple. If you look at how a landing page is broken down, you'll find there are 28 design elements on each landing page that need to be considered and influence conversion.

Anatomy of a Landing Page

Creating a Unique Selling Proposition

Hero Section

Using Video

How to Use Testimonials

Optimizing Your Form

Chapter 4

Why You Should Provide a Context of Use

The Context of Use is the actual conditions under which a given artifact/software product is used, or will be used in a normal day-to-day working situation.

While that may seem like an obvious part of landing page design it can often go overlooked, because you are so close to your product.

Chapter 5

How to Optimize for Mobile

Mobile landing pages are a completely different beast than on desktop.

Visitors often have a different mindset when they are on their mobile devices, oftentimes they are in research mode.

So when a visitor actually decides that they are interested in something on their phone, it’s best to eliminate as much friction as possible.

Chapter 6

The Latest Landing Page Design Trends

Web design trends aren't always the best for conversion. Instead of blindly following the latest trends, you should test them in moderation to see how they work for you. In fact, many of the hottest design trends are terrible for user experience and in turn conversions.

Chapter 7

How to Eliminate Friction

Stemming from the dictionary definition of the term friction “The resistance that one surface or object encounters when moving over another.” Landing page friction is a term used to describe any element of your landing page that’s preventing users from converting.

Friction can be anything from form length, form position, page length, privacy disclaimers, images, readability, clarity, and more.

Chapter 8

How to Optimize and Test Your Landing Page

More often than not you won't nail your first instance of your landing page. This means you need to improve it in order to increase conversions.

There's a right way and a wrong way to do landing page optimization. The wrong way would be to blindly following landing page best practices and tactics. The right way is to develop your own process that is repeatable and efficient .