Google Analytics tells you what's happening. KISSmetrics tells you who's doing it.

The Blueprint for a Perfectly Testable Landing Page

Landing pages are composed of a group of definable elements. The building blocks presented below can be used as a guide when defining and creating a perfect landing page of your own!

Click on the infographic below to view a larger image:

The Blueprint for a Perfectly Testable Landing Page

View an enlarged version of this infographic »

Click here to download a .pdf version of this infographic.

Want to display this infographic on your site?



Sources

  1. Very nice, just what I was looking for, I Just started a new webdesign. Thanks!

  2. I love the graphics you put together. For this infographic, can you also post some good working examples you think do this perfectly?

    Thanks for all of these!

  3. This is definitely a great landing page blueprint. Should be followed at all times by any designer in my opinion.

  4. I beg to differ on the CTA above the fold. I strongly belive that CTA button needs to be at the very bottom of the page. This allows users time to read before making decision. CTA above the fold is good for returning customers to take immediate actions, but not for first time visitors.

    If your website gets about 60 odd % of new visitors each month, you ought to focus on gaining their trust and not make them take action before knowing what your product/service really benefits them with. However, cool infograph =)

    • Thanks Dhruv!

      What we’re trying to say here is that placing the CTA above the fold is a good place to start. Really, every element on the page should be tested. This includes the placement on the CTA.

      • No doubt, about that. Here’s a cool article I found about the CTA and life below the fold. You may find it useful =) iampaddy.com/lifebelow600/

  5. Great Infograph due to its simplicity. Thanks.

  6. This is awesome, perfectly explained and nice for the eyes. Landing pages are always tricky and I have a hard time creating them. This is a great resource though.

  7. Christopher Handy Mar 04, 2012 at 7:04 pm

    I cannot wait to show this to my clients in Fort Worth, TX. It plainly explains the idea behind what we are creating when designing websites. Thank you again.

  8. Astro Gremlin Mar 11, 2012 at 10:04 am

    Nice and simple infographic. I’ve seen landing pages with multiple “safety” CTAs, stretching out the benefits. If I understand classic landing page strategy, at some point there should be a “testimonials” block, typically with photos of satisfied customers, followed by yet another CTA. :)

  9. Yes, it is true that the landing page design have a great impact and it works as well by converting visitor into customer. I also do landing page design, you can check my landing page design example here semanticlp.com/featured-lp/ Please have a look and let us know what do you think about my design.

  10. I also do landing page design, you can check my landing page design example here semanticlp.com/featured-lp/ Please have a look and let us know what do you think about my design.

  11. Tárcio Zemel Apr 12, 2012 at 5:25 am

    Hi! It’s a fantastic Blueprint you guys have here! Congrats!

    Any possibility to provide the PSDs to I translate that and put in my brazilian portuguese webdev blog?

    Regards!

  12. Tárcio Zemel May 03, 2012 at 9:16 am

    Guys…?

  13. Corky Swanson Jul 18, 2012 at 10:33 pm

    Nice structure for a landing page. One element I would add is a Testimonials section, at about the level of the Benefits section. Testimonials increase buyer confidence through a “social proof” mechanism.

  14. Jitendra Shah Aug 15, 2012 at 4:07 pm

    Brilliant design and helpful in equal measures.

  15. I’ve been testing this landing page design for a month and I can say it really works. great article by the way.

  16. If the “hero shot” is of a person then i think its important not to use the classic stock images of business folk, they are so overused, maybe the benefits section should be above the CTA.

  17. Lukasz Krawczyk Dec 24, 2012 at 12:38 am

    Interesting infographic. Simple, clean and understandable. Really great job. Thanks for sharing!

  18. Great Infograph due to its simplicity. Thanks.

  19. This is an excellent piece of content! Considering this is pure goold material I suggest to reuse it with a different typography that makes it easier to read it ;)

84 comments

Please use your real name and a corresponding social media profile when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →