So You Think You’re a Landing Page Designer? [5 Templates Critiqued]

By | Google+ , March 7th, 2014 in Landing Page Design | 16 comments

Having recently completed a landing page template design project, I know just how tough it can be to create a page that is both beautiful and likely to convert.

Most template designers still treat landing pages too much like home pages. And even if they do create a single-purpose dedicated landing page, the design might not conform to the principles of Conversion Centered Design (CCD), which is where any marketing landing page designer should hang their paintbrush.

landing page template design

Enter the template design contest on Themeforest

We just kicked off a partnership with the awesome design community over at Themeforest. To get things going we ran a contest to get some templates designed for the new Unbounce landing page category. As the collection grows, I’m going to review and critique some of them over the next few weeks.

Critiquing 5 Landing Page Template Designs

Let’s be clear. The following 5 templates are available for download from Themeforest so you can upload them into Unbounce to use for your marketing campaigns. You might think that given this I’d take it easy on the templates. Far from it. I’m going to tell you why they are excellent, and where they are going wrong or could use a little CCD action to make them more appropriate for marketing campaigns.

As templates, they often have placeholder Lorem Ipsum copy in them, so obviously I’m only going to be looking at visual design, not copy.

Let’s get to it!

Approach

Unbounce landing page template from Themeforest

I love this template.

What I like

  • The delightful experience
    This is something we’ve been talking about at Unbounce a lot lately. When I look at this template, my spirits rise. It makes me feel happy. This is based in part on the stock imagery (which you wouldn’t include in your implementation of the template), but it demonstrates how you can affect a visitor using design. Why is it delightful? The palette choice and photography is fresh, friendly and positive. The white space is plentiful (the unbounded images enhance the separation). And there is a flow to the content that eases the reading experience.
  • Directional cues
    The above-the-fold experience ends with a nice bright arrow that uses an encouragement statement and points to the CTA. This is really good design. Marketers, pay attention as there is good copy on this template. The instructional tone of the copy doubles the impact of the directional cue.
  • Encapsulation
    The form is encapsulated in a containing box. Easy. It’s that easy. It gives it a place to live, and provides you with a space to direct attention.
  • 5 essential elements
    Every landing page needs to include the 5 essential elements. This one does, and it’s a great part of why it looks so structurally complete.
  • Bottom CTA scrolls to top
    If you have a long lead gen page (long-ish in this case), use a closing argument statement at the bottom with a CTA to scroll back to the top of the page to your form. This lets you end your story with an action and bring it back to the point of conversion, which is your form.

What I don’t like or would change

  • Nada
    The only way I could actually critique a bad aspect of this page would be to look at the copy, which isn’t relevant in a template.
  • Alternate version
    However, there is an alternate version of the template available which shows it’s versatility, but includes two intended actions – one is to fill in the form, the other is to sign up from the pricing grid. As a marketer you need to remember the landing page mantra: One page, one purpose. But in the context of a template this is actually very useful, as you can choose the one that suits your purpose and delete the other.

Inspiron

Unbounce landing page template from Themeforest

What I like

  • Color contrast
    The page palette choice allows the black CTAs to stand out and the blue stripes are useful to focus attention on important information.
  • Social proof highlight
    The testimonials rotate through a series, letting them take up less space on the page. This is a good candidate for an A/B test: Would it perform better with one visible testimonial cycling through a slider vs. all three visible?
  • Separation of content
    The page is broken down nicely into colored sections, making it easier to read. The spacing of elements also helps.

What I dislike a lot – pay attention conversion centered designers

  • Inappropriate use of motion and timing
    Click this link to see the page. What was your experience? If you had the same experience as me, you witnessed two things. First, that half of the page header area is missing when you arrive. It’s virtually devoid of content. Why? Because the designer is trying to be clever with unnecessary animation. There is a 4-5 second delay before the images actually decide to show up. Second….. nothing. Your visitors are not here anymore! When they saw this empty header they left assuming it was a mistake. The lesson? People have no time to waste on your too cute design. They need to get the point of your landing page immediately. Don’t make them work, think, or wait. This landing page template will fail 100% of the time unless this is removed. Sorry.

Convert SaaS Trial

SaaS Unbounce themeforest landing page template

What I like

  • Directional cues
    This template is a directional cue tour de force. Each section ends with some arrows to encourage you to keep reading.
  • Storytelling design
    The way the content is separated by the arrows makes you feel like you are on a journey. The use of different media types along the way enhances the options for different styles of communication.
  • Repeated CTAs
    It’s important on a long page to reinforce your calls to action by repeating them throughout the page.

What I don’t like or would change

  • Not too much to dislike on this one
    What I would say is that despite being designed for a good storytelling experience, I did feel a little lost about the purpose of the page, half way down. A shorter version would compress the experience, making it more digestible.

Startup

Unbounce landing page template from Themeforest

What I like

  • Nice use of the parallax effect
    Use of parallax effects can provide a modern feel for your landing page. Designers often get carried away with this technique, creating confusing experiences that can make you dizzy. Here it’s used really well on just the opening and closing page sections.
  • Closing argument
    Jump down to the bottom of the page and you’ll see how the designer has wrapped up the page with a final “closing argument” statement. This is a great way to tip your prospect over the edge with the CTA placed right beside the closer.
  • Clean typography
    The copy is very clear and easy to read due to the choice of typeface and the relative size/colours of the hierarchy of content. I really like the way each headline has an associated subhead. This adds clarity without overwhelming the user with too much copy.
  • Plenty of white space
    The page is large, but only because of the amount of white space. It’s a delightful reading experience.
  • The CTA at the bottom of the page smoothly scrolls back up to the form

What I don’t like or would change

  • Footer navigation
    Remove this. It’s not a homepage, so you should have no extra links.
  • Pricing plans look like buttons
    The pricing plans are informational only, so I’d recommend making them look less clickable.

Carna

Unbounce landing page template from Themeforest

What I like

  • Full-width and boxed designs are included
    It’s nice to see a template with different layout options. Perfect opportunity for an A/B test.
  • Clear chunking of information sections
    Each section has it’s own headline, which greatly enhances readability when scanning.
  • Good white space
    The use of circles provides extra space for your eye to wander down the page unimpeded.

What I don’t like or would change

  • Remove blog posts
    This isn’t a homepage – remove the blog posts, they are a distraction that can do nothing but drive people away from the page.
  • Remove social links for employees
    Again, there two many interactive elements going on here and right near your CTAs. Remove them to get the Attention Ratio closer to 1:1. Read about Attention Ratio in pillar 1 of this post.
  • Remove rollover states
    All of the people and features have square rollover states which are distracting and imply interactivity. Thankfully, you can’t click on them, but adding confusion will reduce the efficacy of the page.
  • Poor CTA contrast
    The CTA in the header is very hard to see. The contrast of the button needs to be improved. And clicking it should smooth scroll down to the pricing grid.

Need a landing page template?

If you need new templates for your marketing campaigns, keep an eye on the Unbounce category at Themeforest. And come back to see my next critique post on this blog.

If you’re a designer yourself, hopefully you’ve learned a few tricks for your next landing page design.

– Oli Gardner

About The Author

Photo of Oli Gardner

Co-Founder of Unbounce. Oli has seen more landing pages than anyone on the planet. He is an opinionated writer and international speaker on Conversion Centered Design. You should follow Oli on Twitter
» More blog posts by

Comments

  1. Joe says:

    love the first one, IU made one like this but was unable to get the edges of the header and footer picture to stretch to the ends of the page. How would I be able to do this?

    • Oli Gardner says:

      There’s a setting in the right properties pane that let’s you “Stretch background to page edges”. Check that box and you’ll be good.

  2. I agree with all reviews. Nothitng to add.

    Meantime there are already new landing pages in themeforest. I love this one http://unbouncepages.com/all-in-one-base/ – To use for an agency or specifi service.

    What do you think?

    My regards,

    Pedro Menezes Pereira

    P.S. I think that Unbounce should have a certificate for Unbouce designers or a course to help people constructing landing pages for Unbounce. That will be a blast and a sucess I believe!

  3. Dez says:

    As always some real good pointers that we must must remember but sometimes forget :)

  4. Grabski says:

    Awesome! Notify me of follow up comments as I would like to learn more. Thanks.

  5. Carol Manser says:

    I have yet to make my first landing page – I had no idea! Now I have a few much better ones. Thanks. (I like the first one best too).

  6. David says:

    Solid stuff as always.

    Here’s something I’m wondering about landing pages: have you guys tested, or are you aware of any material that deals with the conversion impact of linear/single column vs. multi-column layouts?

    I always feel like landing pages that go from one column (headline/hero section) to multicolumn (features) back to one (other stuff) make me feel uneasy.

    They just make me really want to skip the multi-column part, as it breaks the flow of my experience.

    Lance from CopyHackers ran a test on just that for bullet points, and when I saw the treatment that changed the layout from 3 to 1 column, it knew it was going to be a winner.

    Any thoughts on that?

    • Oli Gardner says:

      That’s a really interesting questions David. I’ve not done any testing around that idea personally, but your comments are making me think about it now.

      There are benefits to both a linear, straight down reading experience, and the more zig-zag approach made popular by Apple, as it can give your mind a bit of a rest during the reading process.

      I’m going to stick a single-column vs. multi-column test on the to-do list.

      Thanks David!

  7. Great reviews, great links. Probably the best blog post I’ve read in 2014.

  8. Alex says:

    Great article with some very salient points. I should add that I’ve had a detailed look at the Unbounce LP templates on Theme Forest and, on the whole, they’re all pretty darn good. Keep up the great work guys.

  9. Mark says:

    Hi, Great Templates! but i don’t agree with you about the second template “inspiron”, it’s unique and the only one using awesome animations, i didn’t see any delay with animation!! + it has a great testimonials section and i will definitely choose it for my next landing page!..

    Thanks :)

    • Oli Gardner says:

      You should try it again. There is a clear 4 second delay for the iPhones to come in in the page header.

  10. Amazing article, it is a science of technology + psychology to create a perfect landing page. This examples are a great way to start and test our own landing pages. Thanks to this post I know now about your service and maybe in the future will have the chance to work together.

    Just a comment aside, the Convert SaaS Trial link didn’t work when I tried it. Maybe it’s temporary.

  11. bruno hug says:

    Hi oli

    http://try.convertarama.com/saas-trial-v01/ link is dead, and I can’t find it on themeforest.

    Can you head me to a working version ?

    Thanks !