11 great landing page designs

[Rss Bot 1]

The right landing page design can make or break a website – as this is the first thing your visitors will see, if you get it wrong, most people won't hang about.

Landing page designs should clearly convey the unique selling point (USP) for the product or service, and focus on one call to action (CTA), such as getting the visitor to register their details or to make a purchase. 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 some particularly effective examples of landing page design from across the web.

01. Interface Lovers

Designing a landing page for a site dedicated to 'interface lovers' is no mean feat, but Timothy Achumba – a designer for Facebook – has nailed it here. The site aims to inspire people, provide practical advice on the craft of UI design, and celebrate different designers' unique experiences.

The design places the focus firmly on content, and uses a balanced layout inspired by Achumba's first love: print. “The design for Interface Lovers, based on a simple three-column grid taken from a newspaper layout, is uncomplicated and clean,” he says. Beautiful portrait photography draws visitors in and emphasises the site's interest in individual stories.

To build the site, developer Iheanyi Ekechukwu took advantage of Tachyons, a functional CSS framework that allows for granular control over the design. The result is a gorgeous, minimal design without any bells and whistles getting in the way.

02. Google Fonts

Google directs you straight to the fonts without any fuss

Originally launched in 2010, Google fonts are now viewed on the web over 15 billion times a day, in over 135 languages worldwide. The Google Fonts site is clean and fully responsive, using Material Design for its grid and styling. 

In her blog post about the project, designer Yuin Chien explains that "by building in the ability to play with scale, colour and font pairings, we invite everyone to discover and seamlessly use typefaces in their projects." And she's right; the interface is inviting and beautiful. It's also intuitive and fun to explore.

Crucially it doesn't force you to jump through hoops to get to the fonts; they're right there at the top of the landing page, ready for you to play with. You can type straight into the page's text fields to test them out. And if you're overwhelmed by choice, Google makes it easy to narrow things down with tick boxes for font categories and handy sliders for number of styles, thickness, slant and width.

03. MIT Technology Review

MIT Tech Review keeps it simple

So many sites go out of their way to reel in those page views with fancy tricks, it's a relief to find a site that keeps things nice and simple. MIT's Technology Review, first published at the end of the 18th century, has a long and proud heritage, and its site has been tailored to showcase excellent art and be a delight to read.

The landing page is a joy to behold, starting you off with a bold cover story, three secondary stories, and a roundup list of the day's top stories called 'The Download'. This enables visitors to quickly get to what matters in a no-nonsense way.

A large red Subscribe CTA in the top-right also immediately draws your eye, channelling visitors to the paid website options without impeding their enjoyment of the free content available.

04. Resn

The mysterious 'drop' breaks most of the rules of conventional landing page design

Now let's look at a page that disregards most of the rules of landing page design, yet succeeds anyway. Never one to fall in line and use a standard UI pattern, design agency Resn has 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 fun tube; a psychedelic Yakult that dispenses bizarre clipart; and goodness knows what else.

Resn has 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.

05. Present & Correct

Every panel is a temptation

With its neatly laid-out grid of glorious imagery, the Present & Correct site reaches out to what is surely its core audience: people who fetishise stationery. 

A graph paper background, pale grey colouring and classic font channel a school exercise 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.

06. Monotype

Like the company itself, Monotype's landing page is about the power of typography

"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. The entire left half of the landing page design is dedicated to the company's mission statement, and there's a clever twist: through a dropdown you can view the text in an assortment of fonts, and in various weights and styles, to get a taste of what Monotype does.

The right-hand side of the page is given over to a link to the Monotype library, enterprise licence, and company news, with large 'M' icons in different fonts, acting like drop caps. A muted sepia colour palette keeps the focus firmly on the fonts.

07. LS Productions

LS Productions lures you in with cavalcade of gorgeous Scottish locations

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 company's work, all set in beautiful locations. 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.

08. O'Neill

O'Neill's photo-heavy page sells the surf and snow dream perfectly

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, with several large, image-led section links and Instagram galleries. 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.

09. 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 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 CTA directing you to the App Store.

10. 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 has even won it a D&AD Black Pencil.

The homepage slices through the company's extensive product range and zeroes in on just one hot product of the moment. Besides the simple navigation bar across the top, it's just beautifully shot product photography, the product name and its slogan. There isn't even a CTA here – Apple sensibly assumed its tech-savvy audience will know the image and text is hyperlinked to more information. It's a true masterclass in restraint.

11. 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: 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 boards and risk getting sidetracked.

Behind the signup card, one of Pinterest's scrapbooks of glorious photography scrolls tantalisingly upwards, giving a taste of what's on offer for users. This is a stripped-back and beautified version of what you actually get – no wordy descriptions, ads or repin info clutters up this version of the homepage.

Related articles: 

• CSS tricks to revolutionise your web layouts
• 10 great uses of imagery on agency websites
• Fresh ideas for building websites

View the full article