8 Landing Page Design Principles You Should Never Break
ADRIENNE WOLTER | 23 FEBRUARY 2017
Let me tell you something about landing pages.
When you start analyzing what makes a landing page tick, you start to notice something – they all start to look the same.
Optimization experts have whittled landing pages down to a core format that is pretty much universal, because it incorporates design elements that work consistently in favor of increasing conversions, no matter what the industry.
These core features of the most successful landing pages are the rules you should use when creating your own landing pages.
Here are the landing page design principles you simply don’t want to break – and the one time you should break them.
Dedicate Your Landing Page to One Core Purpose
You know what you don’t want your visitors to be when they hit your landing page? Confused. Torn between two or more options and not sure which way to go.
If you have more than one goal, create different landing pages for each goal – don’t distract your audience with competing calls to action.
Even if you just have one goal, be it making sales, getting people to trial your service, or even just earning subscribers, there may be other reasons to segment your audience into different landing pages.
You can segment your visitors by source, sending organic search traffic to one landing page and social media traffic to another.
Or, you can even segment by device, giving mobile users a more abbreviated version of the landing page to improve their experience.
Postlight Labs has created several products, but each has its own landing page. This one, for their app Mercury Reader, has a single mission: to get you to install their Chrome extension.
Pare Down to the Bare Essentials
Every element of your landing page needs to have a strong reason for being there, or it should go.
One easy way to achieve this is to remove navigation, at least above the fold. Some experts say the only link away from the landing page should be your CTA. If this is too extreme for you, you can mimic the effect by only putting navigation at the very bottom of the page.
Another common offender are forms. Use the lowest number of fields possible in your signup forms.
If you are soliciting email signups, for example, just ask for an email address. The easier you make it to complete the conversion, the more visitors will convert.
Pearr has a wonderfully straightforward landing page, while a simple animation in the text shows the flexibility of their app.
Place Your CTA Above the Fold
Don’t force your visitors to scroll to find the form you want them to fill out or the button you want them to press. Make it as obvious as possible, and that means putting it close to the top of the page.
You may also consider repeating your CTA button a few times down the page on longer landing pages. Careful doing this though; make your funnel too obvious, and you run the risk of sounding like a spammy infomercial.
This landing book for the eBook Go Freelance feels complete even if you never scroll – but scroll down anyway and you’ll find a lot more information.
Highlight Your CTA
CTAs can better do their job if you can draw more attention to them. There are several different ways you can highlight a CTA:
You can use color contrast on the CTA button. You should be doing this anyway, but using a color that is used nowhere else on the page will make the CTA really pop.
You can put the CTA in a container. Adding a border around the CTA and button define it more for the viewer.
You can use page elements or even arrows to guide eyes to the CTA. You’ll see this done a lot with signup forms, where an arrow points to the form to add emphasis.
If you use a photo of a person on your landing page, you can subtly cue the CTA using the direction of their gaze.
Hund highlights their CTA using color contrast (an orange that isn’t found anywhere else above the fold) and a glowing CTA button that just begs you to click.
Make Your Content Skimmable
Your visitors are busy people. Make things easier for them by making your content supremely skimmable.
Get across the main idea using a short and sweet CTA or headline in a large font.
Simplify your page copy using “eye rests” like bullet points or bold typeface. These formatting choices make your page easier to skim.
Use visuals to do some of the heavy lifting – don’t just explain everything in text.
Uber gets their point across in a few well-chosen words and visuals, one of which animates to show just how easy Uber Central is to use.
Balance Text with Relevant Visuals
Balance blocks of text with lots of visuals – but don’t use just any visuals. Your visuals need to match the meaning of the text.
As mentioned in the previous section, the best visuals help explain the landing page content, so you can use less text. Maybe a picture really is worth 1000 words.
The best landing pages use original photography or custom designed visuals so they are 100% on-brand.
Gusto has a great balance of text and visuals, incorporating both custom illustrations and screenshots of their actual tool.
Include Key Trust Indicators
A landing page is almost always going to feel sales-oriented, because you are trying to guide your visitors into doing something, whether that’s signing up or making a purchase. This automatically triggers skepticism in some viewers. Assuage their fears by including common trust indicators in your design. These can include:
Testimonials and well-known clients. If a visitor sees an organization they recognize is already using your service, they are more inclined to trust that it is real and worthwhile.
SSL certificates and other third party trust signals. These often vary by industry, so it can help to quickly peruse some competitors’ websites to get a feel for the trust signals your customers will be looking out for.
Press mentions. Don’t be shy: now’s the time to show off that great review of your product in the Huffington Post.
Color can sometimes be a trust signal, too. Use a color that matches your business category to look like you belong. For example, pink and white are often used in the wedding industry.
GoCardless, like many financial companies, uses the color blue heavily in their design and branding to impart a feeling of trust. If that’s not enough, they also have SSL certification and prominently feature some well-known companies and organizations that use their services.
Break the Rules When Necessary
Time for me to come clean – I totally lied in my headline. Even though these are the core landing page design principles, you should always be testing to see if they are truly working for you.
One of the best ways to test your landing pages is using A/B tests or split tests. These experiments pit two or more versions of the same page against one another to see which one converts better.
Another important type of testing is eye-tracking. This type of test does exactly what it sounds like: tracks the movement of your viewers’ eyes to see what they are focusing on and what they are overlooking. Use these tests to focus attention on your CTA and remove distractions.
If your A/B test and eye-tracking studies tell you that you should break these rules, do it. Only with testing can you tell what truly works for your audience.