How to Create Effective Landing Page Design

September 11, 2012 · 47 comments

by Lars

How to Create Effective Landing Page Design

The Internet truly is the land of opportunities of our time.  The amount of online sales transactions are increasing at an incredible rate and while opportunities seams nearly endless competition is harder than ever.  The right tools to convert your traffic into costumers is therefore essential.

Being able reach anyone with a connection to the Internet certainly is amazing and the only problem is that the number of competitors have gone up at the same rate.  If you don’t manage to surface and get online presence, the millions of potential buyers will surf by you store without noticing it.  Customers today can pick and choose, compare and analyse your products and services against others and it is very easy. This makes it essential to know your potential costumers and your competitors very well. This way you will increase your chances of getting a sale whenever you have the opportunity!

This is where professional Landing Page Design becomes important and really can make a great difference. This article provides essential tips and examples on creating a landing page that work.


ElegantThemes
ThemeForest

Advertisement

What is a landing page really?

Basically a landing page is a web page that is highly optimized with the single purpose to Seal a Deal once a targeted visitor hits your site.  Landing pages are crucial to any business selling products online and also used intensively by affiliate marketers.

wpzoom

But how do you know if it works? The effectiveness of a landing page is measured by its conversion rate, meaning how often people who visit the page take the action you had in mind when creating it. Landing pages are not a magic bullet that will make most visitors do whatever you’re trying to make them do, unfortunately… Even if you hire the best marketers you are not likely to have conversion rates above 5% and you may never get it above 10-15% no matter how hard you try. The key is to plan on optimizing; you don’t succeed with a set-it-and-leave-it mentality. You must have a plan for continuous improvement. And you must learn to make the best of each so-called screw up.  The goal is to get the highest percentage of your visitors to take the desired action.  Whether you want them to order a product, sign up for your services, register for a newsletter, or just fill out a form a good landing page is essential and you will not know what is working if you’re not trying out different strategies and monitoring the results.

Key characteristics of a landing page and tips to improve it

A marketing campaign may have several phases and reach potential customers through various channels. Once the campaign goes online landing pages typically are the first encounter you will have with the user. Typically landing pages will appear after a user clicked a link on an online ad, e-mail, search result, etc. The landing page is the first chance you have to convince a targeted and motivated user to pursue the process you have lined up (purchase, subscription, provide input etc.). There are many characteristics of landing pages but here’s a few of the most important to keep an eye on.

  • Be very clear on the conversion strategy. The landing page must have one clear goal and if you have several things you want your users to do then consider having more entry points. Avoid the urge to promote or link to other areas of your site. Be clear up front on what you’re measuring, how and when the conversion is considered a success.
  • Keep it simple! Remember that landing pages have a very specific goal. Giving visitors options that are not closely related to achieving the goal can really be seen as distracting. Even a menu that are shown site wide may be striped away on the landing page.
  • Consistent message. The landing page must be aligned with the source leading to is being fx. an ad or an email. If you advertise 15% off on a banner your landing page must have the same discount. This is key to building trust. Having similar logos, colors, fonts etc. and generally overall look and fell is also good for making users fell they ended up in the right place.
  • Provide the information visitors are looking for. Convincing visitors to take action required that any question they may have can be answered right away. Too little information and missing references to essential information on a landing page isn’t good. You must ensure that visitors get what they are looking for to understand what’s in it for them.
  • Make the decision easy at any time. The landing page must make it easy for your visitor to convert at any time. Place conversion exits above the fold and at every scroll-and-a-half of screen space.
  • Value proposition. Making your users understand the value proposition, why closing the deal now is really a unique opportunity for them,… etc. is part of the sales pitch and an important element of the landing page. Use short targeted sentences with a clear message.
  • Know your visitor. OK you never know for sure who will click your banner and pay your site a visit. Still building a profile of your ideal visitor could be a good idea. Reflecting this knowledge and the profile you target in the landing page designs is probably one of the most important areas to master. Speak their “language”, talk to their needs and feelings, use graphics they can relate to and like etc.
  • Important Elements Above the “Fold”. The part of the page that users see without scrolling must sell the main message and ensure that all visitors knows what your site, product etc. is about. If visitors need to scroll to understand what it is all about they may move on without giving you a chance.
  • Who is using us already? Landing pages should share user testimonials and reviews of your service, products etc. and if you managed to get leading companies as customers they should be listed if they allow it!
  • Play it safe. Signing up for something you never tried or don’t know very well can be scary if there is no obvious exit strategy (guarantee that you can get your money back – if it is a purchase). Giving visitors a way to feel safe on your landing page may increase the conversion rate.
  • Place the conversion button where users will find it. The human brain and eye reaction to a web page can be tracked using Eye-tracking techniques. This is useful to place important elements in the right areas. There’s a reason why a lot of conversion buttons are placed a little bit down and to the left – this is simply where we look first.

WordPress Themes for creating a Landing Page fast

OptimizePress

OptimizePress WordPress Langding Page Theme

OptimizePress is an advanced WordPress Theme that gives you the power to create killer squeeze pages, sales letters, one-time offer pages, launch pages and much more, all through a simple point and click interface. It also interface with various membership solution for WordPress e.g. Wishlist Member. If you are used to WordPress this is a good option for creating a great landing page fast.

10 Free WordPress Landing Page Themes

image

Nova

Nova is a sharp, simplistic design that makes for an intuitive user experience. Nova’s biggest strength is its homepage, which allows you to organize your content into two areas. The Featured Slider is perhaps the most versatile slider we have built, and comes with multiple slider variations that breath new life into the design.

Nova WordPress Langding Page Theme

PureCorp

PureCorp has been designed specifically for marketers or anyone who needs to promote a product online. It is tableless and jQuery enabled. 5 color themes are available for you to choose from. The home page is easy to customize and provides you with plenty of ways to market your product.

PureCorp WordPress Langding Page Theme

Landing page showcases and examples

UserVoice.com

UserVoice.com

Highlighting 3 main benefits, listing large leading companies that use the product, key figures on number of users etc.  Very limited options except for getting started or learning more. Pay attention to the button that make the conversion compared to the one below (it’s quite clear what button you are expected to click).

AWeber Communications

aweber

This landing page is from one of the largest email marketing software vendors. Actually it both try to convince users to sign up for the product at the top and a newsletter at the bottom. The sign up conversion exit button is placed above the fold and there’s a demo video right next to it.

Voices.com

voices

Segmenting by user type. Highlighting leading companies that use voices.com

voices2

Simple list of what you get and making use a video to demonstrate how things work. Page contains testimonials.

Assembla

assembla

Assembla list four key characteristics and manage to flash the number of users they have next to the word secure. Security is key for online SaaS products and especially if you plan to manage your projects using the tool. The landing page have a tab based solution to cover the product key features and each tab have large conversion buttons (the sign up button also appears when you scroll down. The page have several customer testimonials with logos.

User Testing

usertesting

Above the fold visitors see a testimonial from a twitter co-founder and get access to demonstration video and sneak peek on the product. The sign up button almost scream “Click me know!!!” and is associated with a money back guarantee.

Woothemes

woo

Woothemes is the most successful WordPress themes vendor and their landing page is pretty good. Of cause there’s a big green button convincing you to go the next step. An interesting element is the what next 4 step process to get value. The landing page also have a slider with customer testimonials.

woo2

For each individual theme there’s a unique landing page as well. A key selling point here is the 3-for-1 offer. All the main features are listed and nicely organized. Also pay attention to the try before you buy and test drive box used to build trust.

Tweet Adder

tweetadder

I wanted to add Tweet Adder here because the landing page is different than the others showcased. It is a all in one place page and clearly this website only have been created to sell this product. Presence on Twitter is a must for any business today and this tool really is interesting to help Twitter users manage and build up the follower base. The strategy is clear – Tweet Adder believes that the product will sell itself and try to convince visitors to make a download. At the very bottom of the page the actual sale conversion is located but this is clearly not the first step in this company’s funnel strategy. Before you reach the buy button at the end of the page you will first find non-Tweet Adder videos explaining why twitter is important and worth taking serious. The page have numerous user testimonials and explain into details how the product works and will help you be successful with Twitter.

Presta Shop

petra

This is a landing page for the free e-commerce software Prestashop. Even though it is a free open source product a lot of effort have been put in building the landing page. It highlight the number of community members at the top and number of shops online just below the featured slider. This includes images of shops build with the tool.

WP Remix

remix

This landing page sells a product that turns WordPress into a CMS. The heading makes this clear by striking out “blog”. The various visual possibilities you will get is nicely set up and there’s a extra free benefit introduced using a price tag. The “limited time period” is clearly a strategy to push visitors to decide fast. Besides listing key features and how it works this page have testimonials and showcases. The exit options are available at the bottom too.

5pm

5pm

The 5pm landing page does not have the traditional huge sign up page button placed in an area where we humans look first. Actually the signup link is placed right but it is just a text link saying “Start today” – rather unexpected. On the other hand 5pm have added statements from media and user testimonials, videos and iphone support (hot and trendy). The main features have been nicely lined up with icons.

gliffy

gliffy

This landing page is interesting. Clearly gliffy want visitors to try out the product and hope to make the sale later as an upgrade. The fact that no sign up is needed will make it simple and fast to get started. You will have to make several clicks to find plans and prices. There are examples all over the place of what the tool can be used for and the buttons gliffy want visitors to click is all over the place.

If you have a unique and highly effective on your site or just have seen a great one lately then please drop a comment and I will add it ASAP. More examples can be found here.

Further reading on landing pages and how to optimize them

This article is not a full theoretical coverage on landing page optimization but I have to admit it is an interesting subject. If you consider getting more serious about creating highly effective landing pages you should consider reading one of these books.

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions

Landing Page Optimization For Dummies

This is also an article that is really worth reading. Google has a powerful tool that allows you to test changes to your website – and will tell you which changes brought in the most customers. See how to use it here: Google Website Optimizer 101 – a quick-start guide to conversion rate optimization

{ 34 comments… read them below or add one }

poptropica January 16, 2013 at 12:51 pm

thanks for sharing, also want to share my website poptropicatricksy, It’s about cool games for kid

Reply

http://giogamer.com September 21, 2012 at 1:12 am

Like it so much, Thanks for help :)

Reply

BestTravelCoupon.com July 31, 2012 at 10:51 pm

Outstanding stuff. A lot of quality links here to help setup a landing page. I used to use Aweber. But I found a landing page software with hosting and the autoresponder built in. It saved a lot of money for us over the past year.

Plus it allows you to create cool slideshows. Some other neat features too.

Website is called: http://LandingPageSoftware.co

Chris
BestTravelCoupon.com

Reply

Business Coach Sydney April 3, 2012 at 7:44 pm

Thanks for the help – Landing pages can be hard to get your head around.

Reply

mindxstudio January 12, 2012 at 1:28 pm

Glad to know about a lot of things on landing page design, I will follow those step on my landing page and hop it will work for me. Thanks for your hard work.

Reply

Ben Fitzgerald October 12, 2011 at 2:32 am

Great advice. Helpful examples. Bad spelling! (You’ve got to show you care!)

Reply

Secure Assure September 14, 2011 at 2:09 pm

Nice article – our web site needs adapting to convert visitors…..

Reply

Web Design Nottingham June 28, 2011 at 11:26 pm

Very important information!!

Reply

Debbie May 31, 2011 at 1:42 pm

Creating an effective landing page is one of the key for online business success. I think working on your landing page design and layout will also make a difference. It’s an excellent way to attract your prospects to opt-in, not to mention offering a great freebie. Would you mind if I share below link? This landing page software helped me a lot building my landing page since I’m not familiar with programming.

Landing Page Software

Reply

laurence May 18, 2011 at 4:41 pm

In internet marketing, conversion rate is the ratio of visitors who convert casual content views or website visits into desired actions based on subtle or direct requests from marketers, advertisers, and content creators. I recently read an interesting post by Codebaby about how to “Creating an Emotionally Engaging Online Experience” (http://codebaby.com/cbBlog/2011/04/28/creating-emotionally-engaging-online-experience/) that I thought you would find interesting.

Reply

Lars May 18, 2011 at 11:56 pm

Thanks for the tip!

Reply

McIlir April 30, 2011 at 7:09 am

Great Landing Page Examples guys. You can find more landing page examples in this websites:
http://www.landingpagesshowcase.com or is another website http://designshack.co.uk/gallery

Reply

joe April 21, 2011 at 11:57 am

nice info.thank you.

Reply

Toena Ils April 6, 2011 at 2:25 pm

Can anyone comment about assessing conversion rate on a professional website. I want people to pick up the phone and call me for an appointment. Hard to measure or impossible?

Reply

Synthetic grass November 2, 2010 at 12:32 am

I have been struggling with my landing pages for a about 5 months now. I have built about 10 of them 2 are going great guns and 8 of them are nowhere to be seen. Everyone keeps saying make a change then leave it for 3 months, that could take years to get it right – by the time it is all good the page will be obsolete. Any ideas?
I like your tips on how to make it work better once google actually finds it though! I’ll will test them out.

Reply

Architectural babe October 28, 2010 at 6:55 am

Really great article , perfect for us to use now that we going to do an ad words campaign and we need to have a landing page.

Reply

Orthotics Brisbane October 22, 2010 at 12:25 am

Thanks for the response. The page construction is underway (kinda). It is my first one so it is a bit slow going. My website is very much an information resource one – 150 odd pages of info sheets and FAQs. Trying to get the right balance between the ‘call to action’ button and the information that takes them off the page. Challenging.

Reply

Orthotics Brisbane October 11, 2010 at 9:12 am

Hi – I see you reply and give feedback :-) I am a medical practitioner – podiatrist to be exact. Do you think landing pages could still work in such an industry? I can’t put BUY, BUY BUY!!! on my website – It might all appear a bit unseemly. Advice appreciated.

Reply

Lars October 11, 2010 at 6:49 pm

conversion is not about buy buy buy. It is about solving a need or problem and by providing a solution. I don’t think it is wrong to use landing pages in any industries but in your case I would expect you to focus on facts and not oversell… basically it is about ethics ;)

Reply

Graphic Chick Brisbane August 27, 2010 at 6:11 am

I have a couple that I am creating for clients. Not as funky as some I have seen around but professional and informative.

Reply

Graphic Chick Brisbane July 1, 2010 at 7:40 am

I have applied some of these suggestions and I am really happy with the result. Thanks.

Reply

tripwire team July 1, 2010 at 10:02 pm

@grat to hear your feedback, what sites are you working with?

Reply

Todd Wallace June 10, 2010 at 5:11 am

“Place the conversion button where users will find it.” And make sure it’s a contrasting color that stands out from the website’s color scheme. For example, Voices.com has a blue theme with an orange button that stands out. On the other hand, Assembla has a blue theme with a blue button that doesn’t stand out well.

Reply

Sprecheragentur April 30, 2010 at 8:26 am

This is a great aticle for us voice over people here in europe. We can learn a lot from this. Thanks.

Reply

Jacob March 3, 2010 at 5:59 am

Hi there,

Great post! Interesting ideas, although I’m not quite sure I agree with some of your site choices, but then I have a slightly biased opinion…

We’ve set up a new usability testing site at http://intuitionHQ.com – it’s just really simple heatmap tracking, because we think usability testing should be simple!

If you’d like to check it out, sign up for an account and I can give you some free tests to try it out. I’m sure you’d like it!

Cheers, and keep up the good work.

Jacob.

Reply

Janoe March 2, 2010 at 10:58 am

Thanks for this great info.

Reply

Ed March 1, 2010 at 7:09 pm

I would suggest give Clicktale a try. I’ve been using it for 2 months and it is neat to watch what your users do, I learned a lot.

Reply

well-meaner February 28, 2010 at 10:19 pm

You folks really need to get an editor to correct the spelling and English errors throughout this “article”. You are losing credibility: If you can’t be bothered to write well, how can we expect you think well.

Reply

tripwire team February 28, 2010 at 11:15 pm

@well-meaner, OMG…just looked thought the post and you’re right. I have done a quick update to fix the obvious problems and really have to thank you for letting us know!

Reply

Mark Astle February 28, 2010 at 8:18 pm

@tripwire You may have a point – I do agree that fancy design alone doesn’t make sales – simple communication and learning from research does. That’s a very David Ogilvy approach in fact. And he knew a thing or two about selling. By the way, thanks for the polite and considered response. It makes a refreshing change rather than the defensive, blinkered responses you sometimes get online.

Reply

tripwire team February 28, 2010 at 9:31 pm

@Mark, you’re welcome. I appreciated when readers submit comments with an opinion and engage for dialogue, thanks again.

Reply

Mark Astle February 28, 2010 at 5:19 pm

That’s all good, but most of those pages look very similar and generic, with bevels, drop shadows, all the bandwagon-y design elements prevalent in web design at the moment. Surely being unique and memorable would help too?

Reply

tripwire team February 28, 2010 at 7:09 pm

@Mark, you’re right that being unique may be an important factor as well overall. If it’s one of the elements that really turns a visit into a sale is something i’m not to sure about. Having the landing pages all collected in one place kind of gives the impression that they are all the same…and yes they are and for a reason i believe. Human minds are so predicable and easy to manipulate. Once the recipe is know marketers all jump on us you know….

Reply

Noel Wiggins February 28, 2010 at 3:30 pm

I have to say I wasn’t convinced that these suggestions would work to improve conversion.

But after seeing the samples I signed up for voice over talent website and the usertesting.com

I am not skeptical anymore and will be paying closer attention and seeing how I can employ these techniques in my projects

Thanks and Regards

Noel for Nopun.com
a graphic design studio

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 13 trackbacks }

Previous post:

Next post:


Web Analytics