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.
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
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
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
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
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
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.
So You Think You’re a Landing Page Designer? [5 Templates Critiqued]
No comments:
Post a Comment