Monday 19 January 2015

INSPIRING LANDING PAGES WITH OUTSTANDING USER INTERFACE

In the last few years, there’s been a real shift in design trends that focuses on gorgeously designed landing pages. Whether it’s for an iPhone app, a web app, a service or a physical product, the bar for landing page design has been raised year on year.


I think a big part of this is down to startups. In the world of startups, you only get one chance to make a first impression, so presenting your product well is crucial. Larger brands have taken note and have had to step up their game in order to compete too, and the result is a series of marketing pages that do a great job of showcasing a product, introducing its features and benefits, and drumming up excitement and anticipation.


I’ve brought together a collection of some of my favourite marketing page designs — ones that I think reflect a serious amount of thought and effort — that you can hopefully draw some inspiration from too.


1) Forest


Forest is a productivity app that aims to help you focus your time and attention in 30 minute increments. Its landing page is pretty sparse – almost minimalist – but despite that it still manages to do a great job of explaining the concept of how it works simply and elegantly.


01-landing

2) Moto 360


Motorola’s first entry into the smart watch market, the Moto 360, is a flagship product that they’ll want to show off in an innovative and interesting way. Scrolling through the landing page shows you the watch being put together, all the way to the UI in action. Clever little features include the time on the image of the watch being the accurate time.


02-landing

3) Instapaper


Instapaper, one of the most successful of the read-it-later apps, is known for having a simple, minimalist app interface. Its landing page follows suit, with an incredibly heavy-on-the-white space approach that has everything you need, with none of the cruft.


03-landing

4) Ring


Ring is a doorbell straight out of the internet of things. It’s built in video camera allows you to see who’s at the door, right on your phone, and it can even detect motion on your property and alert you. It’s a novel concept and one that takes explaining, but the landing page does a great job of elegantly selling you on the benefits.


04-landing

5) Gumroad


Gumroad is a service that allows you to sell things online and collect payment through their system. Their landing page ticks a lot of boxes in terms of best practice: there’s an obvious route for where to go next (the big “Get started for free” button), a brilliantly worded call to action, logos of trusted sites that have covered them, and a beautifully illustrated depiction of how the whole system works.


05-landing

6) Rdio


Rdio, the streaming music service, has a beautifully crafted landing page. It’s elegant, clean and uses a huge amount of white space and large, full-screen images to create a bold design that grabs your attention.


06-landing

7) Intercom


Intercom is a service that allows you to email your customers more efficiently. The landing page takes a reasonably complex idea and makes it easy to understand how the product works, and why it might be beneficial. One thing I really like about this design is the illustration of the old way of working, versus Intercom’s simple approach.


07-landing

8) iPhone 6


The landing page for Apple’s iPhone 6 makes use of their trademark marketing style – lots of whitespace, big, easy to read text and high quality images set against a white backdrop. But they’ve also gone a step further and added reasonably subtle animations – scrolling the page down makes the phone itself move, in an almost parallax fashion. It all comes together to form a nice, easy to digest and typically Apple-esque landing page.


08-landing

9) Shyp


Shyp is a new service designed to take the hassle out of sending packages. The process involves taking a photo of the item on your phone using the app and organizing a pickup, while Shyp takes care of the rest. Because it’s an unusual proposition, it requires a bit more of an explanation to show how simple and straightforward it is to use; and that’s where the landing page comes in. Scrolling down reveals the step-by-step guide to how it works, and it shows how simple and convenient it is in the process.


09-landing

10) Squarespace


Squarespace makes it easy for small businesses and individuals to set up their own websites, without needing to know how to code. They’ve opted for a landing page that makes use of one giant background image, showing the product in action. Landing pages like this — ones that keep it simple — can work really well when done effectively, and Squarespace have kept theirs beautiful, simple and easy to use.


10-landing

11) Disqus


Disqus makes it easy for website owners to add comment functionality to any part of their site, by simply embedding their code. Disqus have always focused on having a creative, clever and thoughtfully designed landing page, but their latest iteration adds another element: personality. They’ve dedicated the header of their homepage to slideshow of unusual, interesting and funny comments that have been left, which adds some extra charm to an otherwise beautifully designed page.


11-landing

12) Campaign Monitor


Creating a simple and elegant landing page isn’t as easy as it looks, but Campaign Monitor has done an astonishing job. This is one of the simplest, but most beautiful pages I’ve seen. It ticks all the right boxes too: it has a strong headline, a well written introduction that lets you know the benefits of using the software, a very obvious and impossible-to-miss call to action and a block of well known and respected companies that use the software.


12-landing

13) Human


Human is an iPhone app that tracks your fitness levels, your calorie intake and more. The landing page to promote the app takes a leaf out of Apple’s own design style, with large typography, plenty of white space and big, bold imagery. It’s a clean, simple design that gets to the point with no fluff, and it looks great in the process.


13-landing

14) Circle


Circle is a new service that allows you to use Bitcoin to pay for things more easily. The landing page does some things really well: such as incorporating the signup form right there and then, rather than on a separate page. It also has some design tricks up its sleeve. It has a fairly smart parallax effect on the background images when you scroll, but instead of keeping them in place, it makes the large-size images shrink into the distance, creating a more unusual sense of movement.


14-landing

15) Dyson 360 Eye


Dyson have unveiled their take on a robotic vacuum cleaner, with the Dyson 360 Eye. The landing page shows off their unusual product in a brilliant, unusual way. Above the fold, the page first shows off the finished product, but scrolling down makes use of some interesting animations that reveal each part broken down, allowing you to examine the cleaner in detail. The end result is an informative and interesting landing page that showcases the product beautifully.


15-landing


INSPIRING LANDING PAGES WITH OUTSTANDING USER INTERFACE

No comments:

Post a Comment