9 Landing Page Design Techniques That Will Make You a Conversion Hero

By , March 19th, 2014 in Landing Page Design | 21 comments
landing-page-design-heroes
You too can be a landing page design hero! (Image by Julian Fong via Flickr).

What happened?

You’ve crafted the perfect landing page copy. It’s downright brilliant. It’s persuasive and succinct. It cuts to the heart of your offer, focuses on the visitor and is set to blow your control page out of the water.

You hit launch. Away it goes. Traffic pours in from your campaigns and you start seeing results.

A day or two later you check your stats with a grin. But wait, there must be something wrong!

The results are better, sure, but they aren’t the amazing boost that you had hoped for.

So what went wrong? Well, it could have been that you put most of your attention into your copy, and not enough attention into your design.

Here are 9 landing page design elements that you can use to truly bring your landing page conversions to the next level.

1. Choose Contrasting Colors

pushing-social-2

There’s a lot of case studies out there about call to action button colors. Some people might insist that one color is better than another, but often times it’s simply color contrast that causes the increase in conversion.

By using colors that are different, but complementary, you can make certain landing page design elements stand out from the rest. The point of doing this is to create a visual hierarchy that tells a visitor what is important and what is not.

Take a look at this same page when blurred slightly and see what stands out:

pushing-social-2-blur

The call to action is prominent and the text in red stands out as well. Perfect.

The other way that you can bring attention to text is to use font weight contrast. This is basically bolding the words that you want to stand out and be more memorable. Hell, why not go crazy and use color contrast AND font weight contrast like this:

colour-weight-contrast

On a side note, I don’t like how the tablets in Pushing Social‘s product image are facing away from the text. It would be a worthwhile test to have the tablets facing in toward the landing page copy to draw visitor’s attention inwards.

2. Feature Real People for Real Results

webex

Webex fails to understand why photos are used on landing pages. Photos aren’t used to fill space, they are there to add value to the overall landing page experience.

Instead of finding some great photos of a real customers that have used the service, they fill a LARGE amount of prime space with useless graphics.

The problem is that visitors mostly ignore filler photos of generic people or objects.

That means that Webex has essentially thrown out two thirds of the space above the fold. Space that they should be using to persuade visitors that their offer is worth signing up for.

The same goes for testimonials. Using real photos instead of place holders or no photo at all can increase the impact of a testimonial and make a real difference to your conversion rate.

The bottom line is to make sure that every image on your landing page has a purpose. If it isn’t adding value to your page, remove it.

3. Show Visitors Where to Look

warren-buffet

There’s more to an effective photo than just a good looking person. What the person is doing in the photo can make a huge impact on where a visitor will look on your page, and what comes across as important.

If the subject of the photo is looking at the camera, towards the text, or away from the text, this can make a big difference in how visitors perceive your landing page.

Notice how in the example above the photo of Warren Buffet has him looking directly at the headline. This will encourage visitors to look at the headline first.

This eye tracking study shows how the woman’s gaze in the photo increases the visibility of the product AND the headline (Full Study):

sunsilk-cued

By using a photo of someone who is looking at your headline or your product, you can draw a visitor in and help them focus on your call to action.

Be careful, this visual cue is not a substitute for a garbage headline so make sure you put the time into finding a solid headline before you start testing different photos.

4. Plant Visual Cues

salesforce

Nudging your visitors in the right direction is not always an easy task. In addition to using directional faces on your landing pages, you can use visual cues such as arrows and borders to draw attention to sign up forms, headlines or high impact testimonials.

Look at how Salesforce has built an arrow into their signup form to naturally draw the visitor’s eye from the headline and supporting copy to the goal of the page. They’ve also surrounded their opt-in form with a strong blue box which stands out against the rest of the landing page design.

You can also use the element border to draw attention to a call to action, as in this example from visual website optimizer:

Encapsulation

5. Don’t Forget About Design Match

druva-ad
This was the banner ad for the campaign.
druva-lp
Notice the use of the same background image on their landing page.

We know that this is not a proper landing page because it includes a primary navigation, but this example proves a good point.

Design Match is the visual cousin of Message Match. It means keeping your design elements – in particular, your paid ads and landing pages – consistent both visually and content-wise.

The visitor shouldn’t be surprised by what they see when they go from ad to landing page. When the entire funnel is relevant and consistent, the visitor spends less time orienting themselves to the new page and more time focusing on your message.

Try to use similar colors, images and iconography throughout your campaigns to make sure visitors understand each step.

Oh, and Druva, it’s time to smarten up and lose the navigation on your landing page. You’ll thank me later.

6. Pick The Right Colors

gotomeeting

You want impact? Use bright colors on your landing page and you can grab someone’s attention very quickly. But be careful, the wrong color match can actually turn off visitors.

We’ve already talked about color contrast, but the color choices you make for the look and feel of your site can change the emotions that your site provokes in your visitors.

Example: If you were selling office chairs to executives you could easily turn off your visitors by using the color pink in your design. This is because the color pink doesn’t convey the right feeling to the visitor.

Gotomeeting in this case uses very bright colors that match the style of the product they offer. Do you think this landing page design would have the same impact if it were the color purple?

7. Be Visual

crazy-egg
Crazy Egg uses some loooong landing pages so only a small portion of this one is shown.

Sometimes it’s just too difficult to explain your product using bullet points and text. This is when a picture or diagram can help you remove a lot of copy and help visitors understand a new concept quickly.

Crazy Egg does this beautifully by using images to help explain the benefits of heat maps (a pretty tricky concept to explain to someone who has never seen one before).

Never assume that a visitor is going to easily understand the benefits of your product. If you can back up your copy with a picture it makes it much easier to convey your benefits to visual people.

8. Order Extra Large Elements

quickbase

Want to draw more attention to something on your page? Try making it bigger. The point is to make the element so large that even your grandma could see it from 10 feet away.

Intuit uses this technique on their page by making their call to action almost a third of the width of the page. Paired with a bright color (see color contrast above), this makes the call to action impossible to miss.

Make sure that you only use this technique for the elements that you want to stand out from the rest. The largest element will be at the top of the visual hierarchy, but if you make multiple elements large then it ruins the effect by bringing equal attention to every element.

Increasing the size of your buttons or forms is not a cure all though. Sometimes it can backfire and actually lower your conversions, but it’s worth a test.

9. Embrace Whitespace

linkedin-whitespace

What is it that connects all of your landing page design elements together?

It’s not more clutter, lines or other elements.

It’s whitespace.

Using whitespace not only helps you organize design elements on your landing pages, but it also can be used to emphasize something important, like your call to action or a product image.

Whitespace also improves the legibility of a page. If there’s a bunch of text crammed together on a page with little or no “breathing room” it makes the text difficult to read.

You can increase the whitespace on your landing page simply by using shorter paragraphs and more bullet style lists. I’m not saying to turn your copy into a big stream of bullet points three-word paragraphs, but they are nice elements to add to your copy to make it more legible.

Notice how LinkedIn brings attention to their headlines, the content, and the happy customer logos at the bottom of the page by spacing out the elements on their landing page. They also make their copy easier to read by having a bullet style list half way through.

Okay, let’s get serious for a second. I thought I was going to make it through an entire post of examples without seeing a single “Submit” button. But I guess there always has to be a troublemaker in the room. I expected more from you, LinkedIn.

Take Action

It’s time to take action. Start testing your landing pages and improving the design elements.

You can only have a really effective landing page when great design and great copy come together to lift conversions through the roof.

Any questions? Let me know in the comments below!

– Eric Sloan


About The Author

Photo of Eric Sloan

Eric Sloan is the president of Urban Cultivator, and a conversion marketing specialist from Vancouver BC. He writes about business, management and digital marketing on his blog: Eric's Estimate.
» More blog posts by

Comments

  1. osman says:

    Thanks Eric..

    These techniques are really awesome and i am finding them very handy for me.

  2. Vincent says:

    Immediately implementing #5, design match. Just emailed my designer to whip up some designs to match my banner ads. :)

  3. Yousaf says:

    Really good examples. I really like what Salesforce and Gotomeeting are doing.

    I have compiled some of their latest A/B tests here http://www.rocketmill.co.uk/top-5-gotomeeting-conversion-optimisation-tests

  4. Hasan Latif says:

    Good post Eric.

    Designing landing pages to convert the targeted audience well and continuously testing the users behavior turns into better online sales.

    I would like to add some words from my latest reads on Entrepreneur.com that explained, how eliminating the distractions/unessential pieces made his website focused on conversions. It is worth reading for you: http://www.entrepreneur.com/article/231644

  5. Andy Kuiper says:

    This is a great post Eric :-) even visually, you can see exactly what to do :-)

  6. Azizul Yusof says:

    How about the Newsletter Subscription form on this page, shouldn’t it be more attractive?

    Putting it on top of everything else (on the right) should mean that you guys wanted your visitor to subscribe right?

    Or is there other strategy that i haven’t notice?

    I know that you guys want to concentrate more on Lead Generation (ebook’s download & the landing page conversion course) but i think if the button for the form uses a different color , if not the whole box, the conversion for Newsletter could be better.

    If i am a new visitor, i’ll definitely will choose the newsletter first, before i go ahead and signing up for other stuff. And the first CTA for the newsletter is definitely the one that i will attracted to (not the one that on top of this comment area).

    Care to explain the plan here? would love to learn the secret.

    • Dan Levy says:

      Hi Azizul,

      Great question! We’re actually revisiting our blog subscription strategy right now. I agree that we could be doing more to encourage sign-ups and improving the color contrast on that box is a great idea. Of course, we also don’t want to do anything that might interfere with the reading experience, which always comes first for us. Thanks so much for the feedback!

  7. Dez says:

    Great article, lots to take in, but all very very good tips

  8. I really like this post, as a designer it helped me to build not just some pretty site / page but also high converting site!

    Thanks

  9. Danny Cheng says:

    According to a couple of well known internet marketing gurus- by simply using the color blue on the “submit” button rather then red, they increased sign ups by about 12%. The rationale being that blue is a much more “inviting” color then red (which is mostly associated with STOP signs and warning signs)

    • Eric Sloan says:

      Hi Danny,

      To put it lightly, I would take anything you hear about a specific color working all the time with a big ol’ grain of salt. The truth is, you need to test those types of things and here’s why: Everyone’s audience is different.

      Sure, maybe some traffic sources will be turned off by the color red (though I would be willing to bet it’s more about how it looks compared to the rest of the page) but every audience will react differently.

      Good luck, and test like hell.

      • Danny Cheng says:

        Test like hell! I like that! (actually I don’t… but that’s what IM is all about isn’t it? Test, test and more test… ) I’ll have to agree about different audiences reacting to different colors and copy. Thanks Eric

  10. Great list of landing page tweaks to take my marketing to the next level. Bookmarked this page and will have my analysts implementing these techniques for our campaigns.

  11. Fredrik Näs says:

    This is excellent, i will be using all 9 steps when we redesign and pull our domain management service http://domaintower.com out of beta this spring.

    We are doing some already, and of course crazy egg has bee with us for some while now, buy it is always excellent getting tips like this, in an easy to manage deploy list.

    Btw, got any tip about using multiple colors? And finding accent colors?
    We collect many services in one control panel, and have color coded each service and its respective landing page with its own color, any opinions on this?

    best regards,
    Fredrik Näs
    CEO domaintower.com

  12. Nikhil says:

    Hi Eric,

    Awesome Post. The design is the most important part to appeal your users. If you have appealing design of your landing page, then more leads you collect and the more leads you have more conversion you get.
    Thank you for sharing this awesome post……

  13. Along with a good Call to Action we’ve found #2 to be very helpful in landing leads off of campaigns. Nobody want to go searching for the contact form. Agree on the contrast of the design also. Great post.

  14. Vinay Koshy says:

    Great design tips. I think they would only reinforce or make story telling on a landing page all the more effective by:

    provoking an emotional response,
    reminding the user of their pain points and why they’re looking at the product/service to begin with
    giving the user enough information and proof to convince them to buy or offer up their email address.

    An example being the basecamp home page (from 37 signals).

  15. Preeti Singhal says:

    I just love your point, “show visitors where to look”. The way it is presented is extremely unique and engaging.
    Beside, Every information in itself is a landing page conversion guide.

    May I also have the pleasure to share one of my post related to create productive landing pages of site. Here is the link for it:
    http://www.inkthemes.com/how-to-make-an-effective-landing-page/11/

    Hope you allow to display on your site.

    Further, feedbacks are very much appreciable!

  16. Rodrigo says:

    In the ebook “The Ultimate Guide to Conversion Centered Design” it’s adviced to segment inbound traffic by creating on landing page for each marketing/campaing sources:
    – Social Media
    – Email
    – PPC
    – Organic
    – Display

    If Im just starting a site wich have only one list (Newsletter Subscription) is it the same?