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 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.
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.
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.
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".
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.
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.
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.
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!