Web designFeature

8 great landing page designs - and how to get it right

A well-crafted landing page design can make the difference between a user buying into a product or losing interest.

There are plenty of rules and principles of great design but when it comes to a website's landing page, it is almost an exact science. It's about 'conversion-centred design', or using the design of the landing page to persuade a user towards a particular action.

The first, and arguably most important, task is to find a clear USP (unique selling point) for the product or service in question, and then use the landing page design to focus everything on one primary call to action (CTA). This might be getting the visitor to register their details, say, or make a purchase there and then. Whatever the goal, it's up to the design of the page to channel the user towards it – whether through use of white space, contrasting colours or more explicit directional cues.

Clear, succinct headers and sub-headers and punchy, easily scanned bullet points are the order of the day. The landing page should be prominently branded, often incorporate a 'hero' image to communicate the product or service at a glance, and cut straight to the point to avoid users' attention drifting. With all of that in mind, we've pulled together eight particularly effective examples of landing page design from across the web to show how this theory has been applied in practice...

01. Bear CSS

 Bear CSS
You can't miss the call to action on the Bear CSS landing page

Bear CSS is a tool to help web designers generate CSS more quickly and easily based on their existing HTML. This simple layout follows all the key rules of landing page design: a clear, simple strap ("helping you build a solid stylesheet foundation based on your markup") and simple, no-nonsense information.

The primary call to action, 'upload HTML', is an unmissably large orange button on a pale grey background, underneath three punchy bullets explaining the process. And just in case you miss it, Bear CSS's mascot is pointing his paw directly at it from the other side of the screen.

02. Squarespace

Squarespace presents several side-scrolling landing pages

Immensely popular with creatives, Squarespace provides high quality website templates on a subscription basis. Acknowledging that users will respond to different touchpoints, its website presents several side-scrolling landing pages with titles including: 'Create your own space', 'Create your own brand', 'Create your own store', 'Create your own canvas', and 'Create your own story'.

Each features a full-screen 'hero' image, a large header in the centre, and the call to action, 'Get started', placed directly underneath. Each landing page also includes a bespoke customer testimonial video. But all five ultimately lead to the same place: pick one of the templates, and start a free trial.

03. GiftRocket

The eye-catching gold of GiftRocket's call to action draws instant attention

Another best practice example of how to use exploit a simple 'header plus bullet-points plus call-to-action' formula, GiftRocket's beautifully designed landing page features an illustrated 'hero' image, which is surrounded by icons of all the different products and services that are available for purchase.

But it's that single, prominent 'Send a GiftRocket' button, in eye-catching gold out of a pale beige background, that draws the attention as a single-purpose entry point, provided the bullet points convince you to do so, of course. If not, you can always scroll down the page for more information, testimonials and more.

04. Hipstamatic

Hipstamatic's landing page shows what the app has to offer

For retro analogue photography app Hipstamatic, it's all about demonstrating the cool features, as well as the look, feel and intuitive navigation of the app, in as engaging a fashion as possible to draw users in.

At the top of the page, a scrolling gallery strip showcases the 'Hipstamatic aesthetic' in practice, while an enormous iPhone demonstrates the app's functionality on a loop alongside the prominent strapline: "Digital photography never looked so analogue".

Once you're sold, the final call to action comes underneath with a giant app icon inviting you to "tap the yellow button and easily bring your world to life".

05. Square

Square's landing page uses a free card reader to pull visitors in

A great way to persuade users to part with their details is to offer something free in return. For Square, this is the company's credit card reader, which enables small businesses to process payments using their mobile device. And the small amount of information and time required to complete the process (tapping in an email address and password) is a very low barrier to entry.

Like Squarespace, Square has three equally well-designed landing pages to scroll through: the other two push registration for the service and the company's Square Wallet app respectively. Prominent hero images and calls to action that leave no doubt where to click makes this a shining example of landing page design.

06. Apple

Apple's landing page centres around beautifully shot product photography

It's no surprise that the undisputed masters of industrial design can knock together a decent website, and the effortless simplicity of Apple.com helped scoop it a D&AD Black Pencil in 2010.

Depending on the hot product(s) of the moment, the homepage slices through the company's extensive product range and zeroes in on just one. Besides the simple navigation bar across the top, it's just beautifully shot product photography, a line of clean type and two links: 'Learn more' goes deeper into features and functionality, while a video link showcases it in true Apple keynote style. It's a true masterclass in landing page design.

07. Pinterest

Pinterest is so well known, its landing page doesn't need to work hard to sell itself

Pinterest knows what it wants, and is in no mood to beat about the bush getting it: it's sign up, or nothing. The popular online scrapbook is confident enough in its brand and burgeoning reputation not to worry too hard about selling itself, or giving users an opportunity to browse around some pinboards and risk getting sidetracked.

Interestingly, there are different browser-specific straplines: Firefox tells of "a few (million) of your favorite things", Chrome has the more perfunctory line "plan projects, start collections and more", while Safari implores you to "collect and organize the things you love". But the only place to click on any of them is that all-important 'sign up' button.

08. Rdio

Rdio's landing page features plenty of information without seeming cluttered

Streaming music service Rdio offers a great example of a landing page with a beautifully simple call-to-action above the fold. A vibrant hero image in rainbow shades sits below the punchy, engaging strap line, "Discover music. Start listening free", and a bold blue 'Continue' button opposite.

If this isn't enough to convince you, you'll encounter more depth and detail by scrolling down, with descriptions of key features and USPs, platforms available, a selection of tracks and so on, within horizontal strips of bold, flat colour. Finally, the obligatory social media links give another option for staying in touch with those users who don't sign up right away.

This is an updated version of an article that previously appeared on Creative Bloq. Let us know what we should add in a future update in the comments below!

Words: Nick Carson

Nick Carson is editor of Computer Arts.

Don't miss this!