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. Resn
To start, let’s look at a page that disregards most of the rules we’ve just mentioned, yet succeeds anyway.
Never ones to fall in line and use a standard UI pattern, design agency Resn have built a landing page centred around “The Drop”, an enigmatic, shimmering teardrop-shaped polygon that acts as a portal into the Resn psyche. Click and hold your mouse and you get to be, variously, a greyscale, apple-themed kaleidoscope; a bat with a ouija board that uses its x-ray laser beams to strip the flesh from people in old paintings; a psychedelic Yakult that dispenses bizarre clipart; a fun tube; and some shapes that float around (after all that the last one’s a bit of a let-down if we’re honest).
Resn have broken many of the usual rules for creating a landing page, but the result is compelling enough that you’re likely to keep digging around if this kind of thing floats your boat, and refrain from wasting their time if not. “The Drop” probably works as a perfect filter for attracting the kinds of clients the company wants to work with, and it is a truly magnificent landing page that you’ll probably never forget.
02. Present & Correct
With its neatly laid-out grid of glorious imagery the Present & Correct site reaches out to what is surely their core audience: people who fetishise stationary.
A graph paper background, pale grey colouring and classic font channel an old science text book vibe and each panel displays a beautiful product. Stock is meticulously arranged into categories displayed in the top menu bar, and it’s tempting to click through the whole lot, starting with the intriguingly-titled ‘Ephemera’ section.
03. Monotype
“We are the company behind type,” states Monotype’s landing page, and its understated yet smart design goes hand-in-hand with this confident statement. Suitably for a company that works in type, its’ main landing page is entirely text-based, but with a clever twist; through a dialogue at the bottom of the page you can change the view the mission statement in an assortment of fonts (and in various weights and styles) to get a taste of what Monotype does.
It’s all gloriously restrained, encouraging you to click on the text links that take you to four more detailed landing pages – Fonts, Technology, Expertise and Company – providing much more depth regarding Monotype’s business and services, and of course getting you to the all-important fonts.
04. LS Productions
LS Productions – a stills and motion service production company based in Scotland – knows what its biggest asset is, and that’s what you’re presented with when you go to its site. A window-filling looping video showcases a selection of the beautiful Scottish locations that it can offer for your film or print project. Scroll down and you’ll learn of its three main services: motion, stills and locations.
By this point the landing page has already done its job; everything below – the gorgeous location of the week, the ‘meet the team’ section – is just window dressing. If you’re looking to hire LS Productions then you’ll have already moved on to one of the main service pages, where you’ll find a wealth of relevant, well-presented information convincing you of the company’s suitability.
05. O’Neill
American lifestyle brand O’Neill is largely focused on two things, surf and snow, and its US site makes that perfectly clear with an image-led landing page that sells you its clothing ranges and sports gear through stunning photography of big waves and snow-covered mountains.
A set of drop-down links at the top of the landing page can take you straight to what you want if you know what you’re after, but beneath that the landing page sets out to seduce you, first with a hero carousel and then a secondary carousel showcasing recommended products, then follows with a responsive two-column image gallery selling its various departments. With an Instagram gallery at the bottom, it’s all quite enough to get you dashing to the beach – or the top of the nearest mountain – but not before stocking up on O’Neill gear first, and if you’re in a rush you’ll find a handy dealer locator at the bottom of the page.
06. 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.
07. Squarespace
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 landing pages showcasing different aspects of a Squarespace site (including landing pages), as well as pages targeted at photographers, bloggers, artists, musicians, restaurants and weddings.
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 gallery of inspiring sites and a tour of the benefits of going with Squarespace. But all ultimately lead to the same place: pick one of the templates, and start a free trial.
08. GiftRocket
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.
09. Hipstamatic
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 showcases the latest version of the app, with its old-skool ClassicMode and new ProMode, with more up-to-date features.
Beneath that a new strapline sums up what Hipstamatic is now all about: “Make beautiful photography”, with a big yellow button inviting you to install the app on your iPhone.
10. Square
Square’s landing page used to lure users in with a free card reader in return for signing up for its POS software; now it’s confident enough in Square Register, its flagship package, that it doesn’t feel the need to dangle trinkets in front of you. The result is a focused single landing page that gets straight to the point with the headline: “The POS software that’s simple, powerful, and free.”
Beneath the headline and hero image the product is explained in four brief paragraphs, and beyond that there’s nothing to distract you from the prominently placed download links.
11. Apple
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.
12. Pinterest
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.
The landing page has a different theme every time you visit; we refreshed a number of times to get, among others, “He used Pinterest to start his collection” (vinyl records), “He used Pinterest to start his rooftop oasis” (plants), and “He used Pinterest to dive deep” (scuba diving). The only thing “she” used Pinterest for was making her first pasta, and this only appeared for us once; perhaps the site is trying to recruit more male sign-ups and shake off its reputation as being heavily female-dominated.
This article has been updated and expanded by Jim McCauley and Tanya Combrinck.
10 great landing page designs
