- Text Dana Meir
- Date March 18, 2019
- Est Read time 7 min
We’re faced with hundreds of decisions every day: what to eat for lunch, how to respond to an annoying email, which vacuum cleaner to buy (fun!) – and the list goes on. As designers, we have the unique opportunity to play a small role in influencing people’s decisions. This is apparent in many forms and fields of design, but one area that particularly stands out is landing page design. Together with content writers, we have the power to create landing pages that can convince people to choose a certain wedding photographer, holiday accommodation or music player app over others – and help them feel confident with the decision they’ve made.
An effective landing page design will inform the audience on the product, while encouraging them to click on the call-to-action button, be it getting them to sign up, make a purchase or perform any other action that the brand may set as their objective. On top of attention to hierarchy, clear copy and on-point button design, there are many aspects that make up a good landing page. Let’s take a closer look at how to master the art, through this selection of successful landing page examples:
Event landing page for Epicurrence
This design merges the elements of a classic landing page, with intriguing copy, atmospheric illustrations and seemingly handmade dioramas that give a hint as to the event itself. A few bold, well-chosen words set the tone on the top fold, and the CTA (call-to-action) stays put as you scroll down the site, inviting visitors to buy a ticket without being too forceful. Small yet thoughtful additions, like a widget to control the time of day on a snowy mountain, invite users to linger a little longer and enjoy the site. Browsing the rest of this website almost feels more like being cosily wrapped up listening to a story around a campfire, than scrolling down what is ultimately a marketing asset. Thanks to the subtle parallax, delicate text and full-screen dreamy illustrations that together form a cohesive experience, the additional CTAs that appear further down the site feel completely natural.
Airbnb have taken a specific angle in this landing page, keeping in line with their rest of their brand, while simultaneously aiming to target professionals that are traveling abroad for work. The large copy is to-the-point, while still sounding friendly and personal. You’re immediately invited to add your email – a CTA that is repeated once more at the bottom of the page. They’ve paired this text with a background video that enhances this same tone of voice and perfectly captures the atmosphere of a fun and casual, yet professional, working environment. As you scroll down the landing page, you’re faced with a selection of photos that convey this same vibe and appeal to a wide variety of disciplines – from sport enthusiasts, to writers and creatives. Additional CTAs are subtly intertwined in the very clean design, not distracting from the overall visual language.
Mondaine: Helvetica-inspired watches
This landing page example exposes the thought process behind the Mondaine watch collection – a design that takes to the Helvetica font as a muse. Although discreet in its approach, there are a number of buttons that appear as you scroll down the site, each inviting you to browse the full catalog. This one-pager is full of visual and textual information, breaking it down into manageable chunks, thanks to a sophisticated scrolling experience and animations. The links in the fixed menu at the top of the page all redirect you to the brand’s main website, which is likely to be their overriding aim.
This organization has created the perfect landing page to go with their values and messaging. The cute digital illustration and heart-shaped cursor are just the right accompaniments to the idea behind the website – spreading random acts of kindness during the holiday season. The menu at the top stays put as you scroll, inviting you to click ‘Join Us’ at any point during your browse. Another nice touch is the text at the bottom of the page that has a friendly, welcoming feel to it, as does the microcopy on the button, saying ‘Yes! Let’s do this!’.
3sixteen’s unsanforized denim
Fashion brand 3sixteen see themselves as a denim company first and foremost, which is why they’ve created a minisite devoted to presenting their unique approach to denim and highlighting the story of their most cherished product – the jeans. It may not be the typical landing page, as it’s more ecommerce oriented, but it does serve to promote their brand and ends with a CTA leading you to shop online. The story-like structure walks you through how to soak their jeans the first time you wear them, emphasizing why unsanforized denim is the way to go. The large product photos and minimalistic layout are engaging and convincing, without being too overpowering and pushy.
Dropbox have utilized the wonders of hierarchy in the text that appears at the top of this landing page. By emphasizing a few words that capture the essence of the Dropbox Paper product, they’ve ensured that their site visitors’ eyes will go straight to the large text, helping them understand what it is they’re looking at. Smaller sized copy elaborates more on the product, while an animation enhances your level of understanding. Further down the site, a very clean and spacious design is paired with explanatory text and videos, plus clearly defined buttons and a fixed menu that ensures you can sign up easily at any point.
While the Spotify homepage is aimed for wider audiences – “Music for everyone” says the copy on a bubbly gradient, this landing page is more professional and in-the-know. It specifically targets artists, inviting them to become a part of the Spotify creative community. The stark color contrast puts the focus on the text, that clearly states the purpose of the page. Instead of featuring an image of a model, that can at times feel somewhat distant, you’re immediately greeted with a photo of one of the artists and their name, creating more of a sense of familiarity and intimacy. The rest of the page presents engaging videos and other bits of news targeting artists, wrapping up with a final CTA encouraging you to create a profile.
Cinetype font by Grilli Type
Here are two unconventional landing pages (or “minisites”) for fonts, created by Swiss type foundry, Grilli Type. In both cases, a video greets you upon entering, providing you with some visual context for the font and setting the tone. In Cinetype’s case, the high-speed black and white videos on the top fold discreetly place the text in the forefront, showing it off in its many different forms and sizes. As you scroll down, you’re taken on a nostalgic journey through some of cinema’s most classic movies, hinting at the inspiration for the font. Large videos and quotes accompany you throughout the site, drawing you further into the experience, until you reach the CTA that only appears right at the bottom of the site. This serves to give the font the platform it deserves, while making sure that the buttons are highly noticeable and easy to click.
GT America font
This one-pager, created for the GT America font, is a perfect example of a minimal color palette used for maximum effect. At the top of the page, a link to the main Grilli Type website is emphasized thanks to the use of the color red to contrast with the blue. Further down the site, you’re faced with fun animations and interactions that invite you to play around with the widths and weights of the characters. This creates a truly engaging experience, as you discover the story behind the font. Here, too, the call-to-action buttons are placed at the bottom of the site, enabling you to get a proper feel for the typeface prior to deciding whether to purchase it.
Last but not least (if we may say so ourselves), is this landing page for Wix. The designer behind the minisite went for a fullscreen, inspirational image that draws you in, while merging it with an image of a browser. The composition formed makes it seem as though the hikers are looking into the horizon and heading towards their goal – climbing a mountain, or perhaps creating a website. There’s clear, large text and a bold CTA that stands out and repeats itself further down the site. The image of the browser is also linked, offering a larger clickable area that leads you to create a website. There is also a selection of website templates to get site visitors inspired. This design, aimed at a wide audience, stands in stark contrast to Wix’s minisite for designers, the Playground, which goes for a wildly different visual language that incorporate motion effects and a vivid color palette.