Beautiful Landing Pages: Tips and Examples

By Laura Moisei. Filed in Web Design

Hundreds of witty articles have been written around the topic of landing pages. We all know the basic facts – that these are the pages a visitor reaches after clicking on a banner ad or a promotional link, and that they play a crucial marketing role by converting leads into customers for the business. When it comes to designing a landing page yourself however, matters seem to be far more delicate than you would have expected after going through how-to documentation. This is why today, we have chosen to share a collection of actual landing page examples for inspiration.

According to a pretty scholarly classification you may find in Wikipedia, landing pages fall in two major categories: reference and transactional. If they are to be called reference, pages have to display information that is both appealing and relevant to the visitor (text, multimedia). “Transactional” landing pages are the ones who aim at immediate sales or at least in capturing strong sales leads.

As you will probably agree with me, all landing pages meet both criteria: they inform the visitor upon the offer as well as incite actions from his side. Otherwise we wouldn’t need calls-to-action on absolutely any landing page, would we?

What needs to be clear before launching any landing page in the www is the nature of the desired visitors’ action. Is increasing newsletter signups your goal? Then design a CTA with the message “Signup now to our newsletter”. Do you aim to have trial purchases from visitors? Say so. Generally speaking, the essential recipe is to make your landing page express this offer as clearly and as enticingly as possible.

Recommended Reading: Beautiful “Coming Soon” Page Design

Tips for Designing a Landing Page

Some quick tips to start from when designing a landing page:

1. Use the AIDA principle

This is a chain of events that we desire to happen once a lead reaches the platform displaying the promoted product or service. Mainly, the steps are:

1. Awareness – attract attention from the visitor
2. Interest – which can be aroused by highlighting the benefits to the customer
3. Desire – induce in customers the idea that they want the product or service
4. Action – customers performing the purchase process

2. Not too many distractions; leave A way out

The idea is simple. If the landing page has virtually no navigation option except for the CTA button, visitors will force their exit. Don’t think that if you don’t provide any navigation, they won’t find a way to leave – they will, maybe even by shutting down the browser. And these visitors will not come back.

3. Make it pass the blink test

Typically, a landing page has to catch the visitor’s attention in the first 3 seconds of entry. If the guest blinks, and can’t see clearly what he should find on the page or isn’t interested with what he saw, he is most likely to bounce away empty-handed.

4. Don’t create false expectations

The landing page has to be consistent with the hints provided by the original ad, or vice versa. Visitors have to find on the landing page what they were first promised in the ad they clicked.

As we have promised, let’s tour some nicely designed and effective landing pages of B2B and B2C. We will explore their strengths and inevitable weaknesses. Watch out for the following in the gallery below: visual communication, branding and trust indicators, content effectiveness, calls-to-action.

Showcase: Beautiful Landing Pages

99Designs

This is the version of a landing page targeted towards designers and students. 99Designs also has a landing page for the other side: businesses that need designs. As for this one, it’s very effective in terms of endorsement (see the bold testimonials) and truly speaks the language of the audience with figures and trust indicators (number of community members, amount of money they earned). Notice the bright red shade of the single CTA button – this usually is something to avoid, but in this particular case it’s not disturbing, as it matches the color of the logo.

123RF

123RF makes a clear statement of purpose in this landing page with the image slider and the four median boxes. You understand in an instant what the service is and how you can use it (Search, Sign Up, Pay-As-You-Go, Buy Subscription). The light grey background is unobtrusive and puts the highlight on the essence, that being the image. What I personally think they can improve on is the list of stock photography categories, it’s a bit stuffed. And the CTA is a bit too subtle for the clickable boxes.

Favomatic

I absolutely love the design of this landing page. There is contrast, good slogans in each section and it brings a lot of information without forcing you to read everything (the small font does it all). It does have navigation, but a vertical one, by scrolling, which considerably reduces bouncing rates.

BiznessApps

Strong calls-to-action, emphasized slogan and an impressive list of endorsements – this is the right combination for a landing page and this page has it. Plus, it includes a minimum amount of text and uses a demo video, as it’s a known fact that people prefer watching a short film than reading. The form is an element they can slightly improve on. Usually, you should give first before you can get, so if in exchange for submitting the form visitors can receive free treats, then the “Send message” button can say something like “Get your free stuff now!”

Brusheezy

Another proof less is more. This landing page looks very neat with a single icon and prominent header. Notice the two calls-to-action, at the top and bottom – this is a foolproof method to make the message persistent without overcrowding the page. Highlighting the benefits for the customers instead of the product’s features is another vanquisher.

JailBreak

This page may be a little too crowded, but it’s in the tradition of landing pages for apps. However, the decision to divide the page in segments makes it easy to navigate through all the elements. You can find everything you may be looking for: features, benefits, testimonials and even a guarantee of a refund if you are not happy with the result. The last one is quite risky, as it may raise questions on the quality of the service, and it was a good idea to place it all the way at the bottom

PageLines

Minimalism is the key concept here. I personally like that this page doesn’t tell you everything right away, but invites you to discover. What I don’t find so enjoyable, however, is a video that starts automatically (a feature I generally avoid) – even if Andrew Powers is not only skillful but also handsome! Also, the fact that there’s no immediate CTA may be a drawback for the website.

Pico

This landing page is simple yet powerful. The “greater than” red sign is salt and pepper to the overall appearance. The paragraph arrangement resemble a newspaper layout and is quite suggestive for the purpose of the CMS. The CTA buttons are a bit too weak, though, and the lady in the bottom right corner causes a mild distractin; with too much surprise on her face, does she look like she is able to negotiate a business matter?

Shoeboxed

The descriptive lines for each of the sections are an example of descriptive language use. You understand the message in a split second, as your line of sight quickly scans the first row and arrives at the CTA button. If you are still hesitating, there is a testimonial to help, together with strong endorsements – won’t you trust a company that’s featured in Forbes and Tech Crunch? I would.

SquareSpace

Professional looking landing page, this is. A bold slogan, CTA buttons that you can’t resist clicking and a very good endorsement, this is the combination to success. I also like that they put their context of use in the center of the page, with a screenshot of the way their pages look and infographic-like indications. The 3-element structure of the page is another strong point.

More:

You may find below some more examples of interesting landing pages.

• StockFresh
• Wix
• XHTMLchop
• Cubender
• DailyRazor
• FireCore
• Fotolia
• Inkd
• iPage
• LightCMS
• Odyssey
• P2H
• ShortStack

Suggestion:

–>

You might li