A well-designed landing page design can make the difference between a user buying into a product or losing interest. Here are 10 websites that get it right.
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 10 particularly effective examples of landing page design from across the web to show how this theory has been applied in practice...
- Read all our web design articles here
01. 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 simplelayout 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.
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.
Everest's landing page works hard to channel users towards the App Store
A great example of how to sell an app based on an easy-to-digest breakdown of its key features, this landing page design for Everest splits into two vertical panes.
The minimal left-hand pane contains a logo, an intriguing strap line ("Live your dreams", complete with constantly updating examples), and a clear call to action in a turquoise button out of white. On the right-hand pane, a mockup of the Everest interface on an iPhone toggles through its main features, with annotations picking out highlights. Ultimately, the goal is to channel users towards the App Store.
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.
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".
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.
Apple's landing page centres around beautifully shot product photography
It's no surprise that the undisputed masters of industrial designcan 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.
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.
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.
10. Tiny Letter
Tiny Letter's landing page uses video to great effect
The three-colour design of this page, and minimalist layout above the fold, make the two main action points extremely clear, in bright primary red out of pale grey. Initially, all that's visible is the strap line, "Email for people with something to say", with sign up button above, and play button above a closed laptop.
Hit that, and the laptop swings open and starts demonstrating everything you need to know in a short video, snapping shut again when it's done to leave just the call to action. For those who don't watch the video, there’s more information below the fold.