Anatomy Of A Perfect Landing Page

Although there is no exact formula to making a perfect landing page, there are some common rules of thumb to increase your chances of making a winning one. If you’re looking for ideas on where to start with your next landing page design, the infographic below is a great place to begin. And remember, after you build your first landing page you must continually test variations to improve your conversion metrics.

Landing Page Design
via Formstack

View an enlarged version of this Infographic »

  1. Great article, and beautiful diagram. I particularly like the attention paid to trust indicators and the color legend. There are, of course, a lot of other tricks, such as adding time-sensitivity to the offer, and knowing when to use reversed text (lightly-colored text on a dark background). This article, though, is a phenomenally easy to follow start for anyone.

    I have an ebook that has over 70 optimization tricks ( http://www.moluv.com/70ways ), but following this blog post will take care of the basics. Thanks for putting this together.

  2. I’m always impressed by how much time and thought goes into your articles. Best corporate blog IMHO. Nice work.

  3. I realy like the article. What realy surprise me is the color factors. Realy will use this tips on my next landing pages.
    Im thinking to translate this infografic to portuguese, if i do, will keep the credits.
    Great Post.

  4. Nice article and visual. I wrote a similar article earlier this year that might be helpful:
    http://mikestickney.com/wordpress/anatomy-of-a-landing-page-part-2/

    The biggest challenge I’ve found working with marketing teams is that they do believe that there is a one “Magic Template” for LPs, which is not the case… just a set of “best practices” that can be a great starting point. Defintiely need to test, test, test.

    • Thanks for sharing that, I’ll take a look. Also I agree that there isn’t a magic page, but there are “best practices”. And yes, testing is KEY!

  5. This is by far the best educational blog for startups!

  6. Again… ‘World class’ and practical article. Big thank you! :)

  7. This is a fantastically educational post Neil!! As a wanna-blogger, I look for ways and means to finesse my design and I’ve forgotten more about design than I’ve learned. Infographics are #WIN and this one has a nice bit about colour theory too.

    I’m not fully in sync with the colour theory advice but I’m definitely going to use some of these tips while templating some WordPress stuff. Thanks again.

    • I can see how for some people it’s hard for someone to comprehend the information because many people can provide contradictions. At the same time, these studies were done thoroughly and more so to generalize the people who use the web.

  8. I agree with the commenters. Very good article and nice diagram. In my line of work, Landing Pages are essential and too many times I see the boring affiliate pages, 8 or nine page downs to get the end. this is concise, and too the point.
    good job

    • Very true… some pages convert much better with shorter landing pages while others do better with really long sales letters. It’s just something you need to do trial and error with.

  9. I’m curious: Is this “color legend” universal ? For isntance, green being associated with wealth – didn’t ring a bell at all with me, until I remembered the USD bills were green – but in many other countries money is of entirely different colours… wonder if this spectrum has other “cultural shifts”.

    • It may not be the case for EVERYONE, but it’s more of a general assumption. Generalizing certain psychology beliefs work pretty well for online conversions. It’s not absolute, but it never hurts to AB test it.

  10. Thanks for extremely useful informations here. I am looking to improve my lp page too. actually my bounce rate is a bit high. I would like to reduce that. Thanks again

  11. I will try to test a various of landing page for good performance to my site

  12. hi Niel, its one of the most important thing to optimize conversion ratio, and your guides are really good for newbie as well as an expert web designers to help optimize.

    thanks for this great tutorial.

    • Neil really does a great job at explaining this. I think this info applies to newbies and veterans who need to brush up on the basics.

  13. Thanks for a great article. In my experience the best improvement have come from testing different layouts all together rather than improving the details on a particular layout. With that said I think you make some great points that apply to almost all layout choices. Thanks for a great article with specifics!

  14. Yeah I agree with you… sometimes it’s the shifts of objects and forms that make a significant impact.

  15. In your next article on LPs can you talk a little more about how long the messages should be in certain places like the header. Like lets say for the title don’t make it over 75 characters in length. But in general this is all so helpful and even the comments especially from Mo were very good.

  16. Often we create landing pages that are within an existing website–and therefore have menus at the top. What’s your opinion of pages that fit within an existing website vs. special landing pages that stand alone?

  17. I see “click here” everywhere and I’m concerned that I’m seeing here in this example.
    Wouldn’t you want a call to action that explains what the action produces?
    i.e the button below this comment form is “add comment” which is very explainatory.

  18. I don’t believe there’s such thing as a “perfect landing page”. It all depends on what you actually want your visitors to do. The example related here could help a webmaster to have more client accounts maybe..

  19. The tips are really superb. I would also like to show my landing pages to all your visitors. Also check out my landing page SEO Training in Chandigarh

    My site target local visitors from a small city in India. I get around 10-15 visits daily and due to this super landing page I get around 5-10 calls daily for my local business.

  20. Good lesson, i go try it on a personal website.

  21. Hello, I think a very interesting article, it is true that any website can have a significant potential in the network, but if that site is optimized, a good SEO, good structure, easy navigation and user-focused the chances of success are greater . I liked the article, the structure of a site has to be well defined to achieve success. A page with good structure facing is seo juegostt.com mini web by web design and anatomy parame think that meets the most important.

  22. This is an artlice that makes you think “never thought of that!”

  23. Very good article on landing page design anatomy.

  24. Cool info-graphic, it’s always nice to see people taking the time to create useful and nice looking content. Cheers

  25. Thanks for the article and the graphic on the topic! Other than rule #9 about the fold and the use of words like “never” I think the article generally outlines some good practices. However, clever use of the entire page and the appropriate application of interest above the mythical fold can lead to an efficient landing page as well. After all, with people’s adapted browsing behaviors and the wide variety of screen dimensions and resolutions in use, isn’t the fold an antiquated object? And at least a wide gray area, rather than a single black line? I’m curious: how would you illustrate this anatomy on several different phones and tablets?

  26. No one “social interactor” is present… it’s is not “socializable”

  27. Thanks for the great article. I am a really small business, do you have any companies that create easy landing pages for people?

  28. You can also check some more landing pages here http://www.semanticlp.com/ for inspiration.

  29. I couldn’t agree, more. You’ve got some amazing tips, I’ll be sure to use when writing my next post. Thanks :)

  30. Wow. I knew my landing pages were bad but now I see just how shocking they are. I’ll have to make fixing them into a whole project by it’s self. Thanks for the infographic.

  31. Has anyone heard of color therapy kaleidoscopes? At our craft gallery we have our own color chart used with kaleidoscopes. The kaleidoscope color energies chart http://www.stowecraft.com/ctgy/collier-color-therapy.html align nicely with the color chart in this article.

  32. this was really helpful…good insight…can you also suggest some small size landing pages…

  33. Great article!
    Many factors can boost your conversion rates and UI is a major factor.
    If you really want to DO IT ON YOUR OWN, check out
    HitsAndLeads.com – the best landing pages software you’ll ever find.

  34. great presentation tool for conveying a very important (often overlooked) action point for reducing bounce rate and improving click-thru. Works best as part of an SEO campaign

  35. Readers must follow this blog post. Discover new ideas and tips here. Great stuff indeed!Its very helpful. Good Luck for the upcoming post. :)

  36. great post. this may help me spend less time this Mother’s Day weekend actually redoing my website.
    good job!

  37. Your guys’ corporate blog really is the best. It’s all in the data, and you guys really embrace that philosophy. Keep it up.

  38. i am so much excited after reading your blog. your blog is very much innovative and much helpful. i will use it in future. thanks for the efforts to make this ! must admit that you are one of the coolest bloggers i ever saw.

  39. Where can I get a template just like this as this is exaclty what I am looking for for my website

    http://www.rogerlapin.co.uk

  40. Generally helpful and interesting.

    Unsubtle use of pink will turn off lots of women. It smacks of stereotyping and many of us don’t enjoy that and will be repelled instead. Try smaller highlights or blending it in, or just a nicely balanced set of colours.

    Too much of any colour can be aggressive and may not only lose its effectiveness, but also drive people away. Lots of sites use way too much orange.

  41. reallly like this and feel your colours are spot! orange as a call to action button works well in all the testing we have done

  42. Your advice is great, we are continually testing our landing page and looking for continual improvement, I think you have really covered the topic well – great advice. Thanks!!

  43. Hey this is a wonderful looking website, is wordpress? Forgive me for the foolish question but if so, what theme is? Thanks!

  44. Very nice, besides that (3) is dead content.

  45. Thank you for making this website so easy to find info. wonderful stuff. Saving this one for later.

  46. Just what I was looking for, thank you very much! Great website btw!!!

  47. Very nice.. Excelente material. We saw it in a course of SEO.

  48. I really like the tips on call to action. There’s definitely a big difference between traffic and what you ultimately want … Conversion!

  49. Hello

    is there somebody who can send to me
    links of websites than sell templates
    which respect the

    Anatomy Of A Perfect Landing Page

    or templates which are the most close than
    suggest Anatomy Of A Perfect Landing Page

    Thanks

    Olivier

  50. Great info graphic! I’ll be quoting you in a blog post at Mequoda.com on Jan. 8!

  51. This one is a great post on landing page design using info graphics, I am inspired on this post and come up with some good landing page design, you can check my landing page design portfolio here http://www.semanticlayout.com/portfolio/

  52. I’m no expert at this stuff, but I understand that it’s a good idea to match the landing page to the ad/email. I did that and am now at over 50% opt in conversion! you can see the email I had sent out, the landing page they went to and the stats at my site http://www.joemcvoy.com It’s the most recent post

  53. Great post on “Anatomy Of A Perfect Landing Page”.
    Landing page design elements vary with respect to the purpose and nature of business. For-profit organizations and non-profit organizations, for example, shall have very different end objectives because they don’t look to achieve the same result. You can read more on this http://semlandingpages.com/blog/why-different-types-of-landing-pages/

  54. Nice Post, Very helpful for noobs…

  55. landing page makes your website more effective, More business and makes better ROI. We landingpagesdesigns.com make high Conversion Landing Pages. We offer creative and custom landing pages designs at affordable price.

  56. Love, love, love this! Clear, concise and not too cluttered. It’s not about having pretty landing pages, it’s about conversion rates and growing your leads.

  57. This is perfect for what I am looking for, do you know where I can get the template from?

    Thanks

    Roger

  58. This is really great informational tips for creating the perfect landing page. If you’re really serious about creating landing pages and you want them to not only look professional but be able to build incredible lists to generate a nice income, I found an incredible software that’s novice friendly, works with wordpress, and is integrated for mobile devices called Lead Rocket Plugin.. The guys that created this software, Anthony Aires & Derek Pierce not only help you train and learn the software but they show you step by step how to build huge lists and convert incredible landing pages in minutes.. This is something that will last the life of your business…For more information just go to leadrocketplugin.net… I can assure you, you won’t find a more powerful software as affordable as this….

  59. This is such a cool piece of information, I really want to play with it on my site. I am still trying to work out whether my website follows these pointers on the perfect landing page. http://www.tomlondonmagic.com Tell me if you think I have followed these tips well or whether I need to make some changes. Thanks.

Comments are closed.

← Previous ArticleNext Article →
Buffer