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 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. 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.
Bonus: Download our 8 Chapter Landing Page Design Guidebook. Easily save it to your computer or print for reference for your next landing page.
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.
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.
- [Video] The Importance of Message Match: Landing Pages 101
Message Matching Landing Pages AreCritical?
- Message Match: One Weird Trick for Better Landing Pages
- How Message Matching and Landing Pages Build Successful Advertising Agencies
- Message Match: How to Get More Conversions & Dates
- Message Match: The Good, the Bad and the Ugly
How to Use Visual Hierarchy
Visual hierarchy is one of the most important parts of web
By using simple principles of design you can provide guidance to visitors to the information that they need to digest first.
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
- [Infographic] Anatomy Of A Perfect Landing Page
- [Infographic] The Data-Driven Guide to Landing Page Design
- The 5 Elements of an Effective Landing Page
- 12 Essentials of a High Converting Landing Page
Creating a Unique Selling Proposition
- Step-By-Step Guide: Create A Unique Selling Proposition for Your Landing Page
- How to Write Effective Landing Page Headlines
- Ten Examples That Teach You How to Write Remarkable Landing Page Copy
- Oversized Hero & Background Images: Unfounded Fad or Conversion Booster?
- Easy Guide to Hero Images: How to Look Good & Get the Clicks
- 4 Ways to Get More Out of Your Hero Shot
- 5 Rules for Using Video on Landing Pages
- 7 Tips for High-Performance Landing Page Videos
- Using Video on Landing Pages
- How to Use Video Background On Your Website – The Right Way!
How to Use Testimonials
- 9 Ways to Use Testimonials on your Landing Page
- Effective Ways To Use Client Testimonials To Optimize Your Landing Page
Optimizing Your Form
Why You Should Provide a Context
The Context of Use is the actual conditions under which a given artifact/software product is used, or will be used
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.
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, often times 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.
- The Anatomy of a Mobile Landing Page That Converts
- 42 Mobile Landing Page Optimization Tips
- Are Your Landing Pages “Mobile-Friendly?
- Mobile Landing Page Optimization - 10 Best Practices for Success
- How to Optimize a Mobile Landing Page that Converts
- 15 Ways To Increase Mobile Landing Page Conversion
- 5 Must-Haves for A High-Converting Mobile Landing Page
- 5 Mobile Landing Page Optimization Strategies
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.
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.
How to Optimize and Test Your Landing Page
More often than not you won't nail your first instance of your landing page. Which means you need to improve it in order to increase conversions.