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