Landing Page: Tips, Tools and Inspiring Examples

Landing pages are probably the most underrated type of web page out there but it’s importance is crucial in online marketing. Purpose? Present the customer with a specific and direct promotion or offer in order to achieve a conversion goal (occurs when a customer completes an offer/purpose) of a business campaign.

So why are landing pages underrated? The reason is simple. I don’t want to speculate that most companies don’t give the right importance to their landing pages, but that might be it. Result? A poor, boring and totally wrong landing page design which can’t captivate users. To be honest looking for inspiring and really good examples for this article was the toughest part of my week. I looked at more than 100 landing pages ending up with just 15. You will probably do a quick search and find dozens of templates, so why just 15? First free tip: avoid the use of templates on your own landing pages, I’ve actually found 3 distinct landing page deals with the same layout and that’s not good for a marketing campaign. If a company doesn’t give the right importance to their platform of promotion why would they give it to their product?

The purpose of this article is to give you some insights and help you build a decent landing page. Below I’ve listed some tips plus 15 stunning and hand-picked examples that are currently implemented to inspire your day.

Enjoy it!

Tips

Headline/Call To Action

Similar to any other webpage, the headline and Call To Action are two of the most important elements of your landing page. A clean and simple headline describing what the offer is about is halfway to a possible conversion goal. Your headline and Call To Action need to stand out from the rest of the page, so give it a reasonable white-space (space between elements) balance.

Tip: Don’t write too much because visitors don’t read, they scan and you will probably have 3-4 seconds to tell them what they can get with your offer.

Clients/Testimonials

There are a couple of aspects you should plan carefully when it comes to clients and testimonials. If you have the chance to display a “Clients who use our product” section then do it. Listing brands/logos of your clients will be much more effective than having a statement of your uncle saying that your product is the best in the market. The reason is because visitors will have the chance to spot a brand they recognize which will increase the trustworthy of your landing page. Nevertheless, if you can’t display a list of brands, you should have one or two testimonials but no more than that. Again, visitors have no desire or time to read your customers recommendations. Finally, don’t use pretty photos taken from istockphoto next to testimonials unless you have a real description of the person.

Tip: Display your client brand when possible. If not, show your visitors 1-2 testimonials or even a video.

Color

Color is everything, specially in landing pages. Why? Colors are used to create emotional responses meaning that you can take advantage of a color to make your visitors look at something or make them feel good about an element of your page. Each color has a meaning and Tina Zennand wrote a fantastic article about this subject – Colors in Web Design: Choosing a right combination for your Website

Tip: Use a color that suits your offer and use a different color for your headline/Call-To-Action.

Consistency

One major problem I’m used to see on landing pages is a lack of design and message consistency. If you have more than one page, then every page should follow the same design and structure. Doing the opposite will confuse your visitors and confusion is an exit ticket from your page. However, you will have an even bigger problem by confusing the user with distinct messages. When I click an ad with something like “Get a free invitation – today only” I really don’t expect to see a “Grab an invitation for $10 – this week only” when I reach the landing page offer.

Tip: Keep your landing page trustworthy and avoid confusion.

Avoid design clutter

You have a great headline and Call To Action, you’ve chosen the right color combination, you finally have some consistency but… when visitors reach your landing page they really don’t know where to look because you have text, graphics and photos everywhere. They just leave your page and you lost a sale. The key is to have a clean and simple design, decide your content priorities and make it easy for your visitors to reach their goal.

Tip: White-space is your friend.

A/B Testing tools

A/B Testing is a method with the purpose of testing more than one version of an element. Imagine you have a landing page in dark and bright versions and you are unsure about which one to use. With A/B Testing you will basically determine which version is most successful by splitting your traffic between both versions.

“A/B testing, split testing or bucket testing is a method of marketing testing by which a baseline control sample is compared to a variety of single-variable test samples in order to improve response rates. A classic direct mail tactic, this method has been recently adopted within the interactive space to test tactics such as banner ads, emails and landing pages.”

Let’s take a look at some of the most popular A/B testing tools.

Visual Website Optimizer

Visual Website Optimizer

Visual Website Optimizer is an easy to use A/B testing tool featuring point-and-click test designer and WYSIWYG editor for creating variations. In addition to being dead simple split testing software for marketers, it also dramatically shortens time to go live with your A/B tests because of the innovative “tag-less” integration (not to mention it reduces your dependency on IT and web development department for uploading code snippets again and again).

Optimizely

Optimizely

Simple, fast, and powerful. Optimizely is a dramatically easier way for you to improve your website through A/B testing. Absolutely no coding required. A one time copy-and-paste is all you need to run tests.

Sitespect

Sitespect

SiteSpect provides the world’s only non-intrusive web optimization solution, enabling marketers to perform rapid A/B testing, multivariate testing, targeting and personalization, mobile content optimization as well as web performance optimization across all of your sites and landing pages … all without having to implement page tags or change your site in any way.

Google Website Optimizer

Google Website Optimizer

Website Optimizer is an easy-to-use tool for testing site content that delivers actionable results. Below are just three of the many benefits that testing brings.

Inspiring Examples

Bestviajes Whale Shark

Bestviajes whale shark

StatusBoard

StatusBoard

Amazing Riviera

Amazing Riviera

Ben the Bodyguard

Ben the Bodyguard

Bestviajes

Bestviajes

Dribbblr Ipad App

Dribbblr iPad App

Shallibuy

shallibuy

WeatherWise

Weatherwise

Nexus S

Nexus S

Tea Round

Strawberryj

Strawberryj

Cudo

Deviantart Portfolio

Deviant

Mobilewebbook

Sparrow

Sparrow

Ruben D'Oliveira

I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. says

    This is a PHENOMINAL post Ruben. This information is going to come in handy BIG TIME! (I just bookmarked it for future reference too chief! :-) This was a very “timly” post also Ruben, I have personally seen that more and more people/websites have resorted to “landing pages / stealth sites / splash pages (or whatever people call them, lol – all the same to me.” And I see them being utilized THE MOST in the “Real Estate industry.” Brokers and Agents are very deperate just for “leads,” and with these landing pages (and if they are properly using a “CALL TO ACTION” as you put it,) then they are able to get A LOT of leads out of these landing pages. (of course that is based on the assumption that they what their doing of course. hehe)
    Great post again Ruben!

    Jeremiah

  2. Nikhil Malhotra says

    Very valuable points mentioned….Specially agree with the point – Avoid design clutter.Its really difficult to understand what to check out on a page which is full of pieces.Its really a good practice to make things simple.

  3. Brad says

    Great examples I enjoyed all of these. Websites need to be simple and clean. Most people need to not have clutter to understand where they are. Thanks for the awesome post!

  4. Chris says

    Great Collection of nice and effective landing page designs. What I typically see happen when companies need landing pages is trying to force too much onto the page, and not having a clear, focused enough message to translate into conversions. Thanks again!

  5. says

    I really appreciate the examples. This will help my clients visualize what can be done to make their business grow. Thanks again!!

  6. Gavin says

    This couldn’t of come at a better time! It’s amazing how i’ll have an idea and the next day, you guys have blogged on it! Thanks again guys, awesome work!

  7. Harry says

    this is a good recap of what to do to have a solid land page… Im always thinking on what can I do to make mine better and better but must of the time I dont have time to do all the things that are needed…