Landing Page Design: The Definitive Guide

Posted by Hunter Liptrap on Mar 16, 2017 10:30:00 AM
Hunter Liptrap

working on laptop

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.

design match

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.


context of use

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.


optimize for mobile

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.


design trends

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.


eliminate friction

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.


optimize & test

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 .

Hunter Liptrap

Hunter Liptrap

Inbound Operations 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: