Improve your landing page by learning from the best

A breakdown of the latest trends in SaaS landing pages and how you can use them in your own designs.

Alexander Handley
Feb 21, 2018 · 5 min read

I love websites.

There’s nothing like getting the whole team together to create a new home page. Designers, illustrators, marketing, growth and developers all working together. You sprinkle on some SEO, optimise your acquisition tactics, and probably forget to upload your icons. Ah—websites 🙃

There’s great resources out there already about the best practices for landing pages. In this guide I’m going to show you how to find the right websites for inspiration. Then we’ll go through a breakdown of three examples to show you how to learn from their design decisions.

Contents

  • How to find websites to learn from. 🔎

Find companies that are solving a similar problem and share your aspirations

The best way to find inspiration is to look for companies who are solving a similar problem to yours.

So, what is the broad problem you are trying to solve? Remember this is a branding exercise, not product development: think big!

Instead of:

“Pug owners who use retractable leashes find they are too long for cafes.”

Try:

“Allowing people to feel welcome in new spaces”.

That way you’ll stop combing Dribble for Pet Supply stores and you’ll look to AirBnb.


Perfect! Now, what companies are leading the pack on solving that problem? Find companies who share your aspirations and ambition.

I chose Airtable, Intercom and Slack because they aligned to our company Reqfire.

These companies are speaking to a broad audience, about new ways to look at existing offerings, and want to welcome these people in with beautiful design and a splash of colour.


New trends in landing pages

Everybody in the futuristic 2018 can remember back in late 2017 when large images and auto-play videos were the Hero image of choice.

Slack made a messaging app so their 2016 website showed the ‘cooler’ image of the Mars rover.

And what’s more loveable than an interactive database? Children with interactive databases:


Now—your window into the future:

Airtable — launched 5th of February 2018
Intercom — launched 5th of February 2018
Slack — launched August 2017

Learning from their designs

What makes a great page? I’m sure there’s no simple formula or answer.

What I am sure is that in our three examples, they have teams of talented designers refining their work and customer acquisition specialists optimising how they function.

Let’s go through the four main elements which make up the “above the fold” hero section.

1. Header Bar

  • Nice and spacious.

2. Heading and subheading

The first ‘W’ in Slack’s font Slack-Tiempos is so enjoyable it just makes me want to keep reading in case I get to see another one… Work… there it is!
  • Short headline: 3–5 words.

3. Hero Illustrations

Gone are the days of motorcycles racing through tunnels to showcase quick document management. Enter the era of fun illustrations of documents jumping into a folder.

Airtable — Credit: Ally Jaye Reeves
  • Snapbacks and desk plants — must be cool.
Intercom — Credit: https://dribbble.com/Intercom
  • Not my style but it shows messages being linked and letters being opened.
Slack — Credit: Alice Lee
  • Simple.

4. Optimising the Call to action for sign ups

I love this approach. It gets across how simple it is to create an account and speeds up the process for the user.

I especially like how Intercom uses the space under the email input box to show a few value propositions.

Here’s how it works:

Gif made with the always handy Cloud App

Other features below the fold

I focused on the area “above the fold”. But here’s some other features worth mentioning.

  • They are all very short! (Check out Monday.com — it’s only the hero image).

Putting it all together

Shout out to Hao Le for the design.

Tada! 🎉

Here’s how we copied/drew inspiration from the above designs:

  • Header bar: Similar design but we wanted more space.

Flattery, imitation and better conversion metrics

Since implementing our new design we’ve seen our conversion metrics improve and people are sticking around longer to look at the illustrations and watch the video. (But who cares right? New website!)

Do you have any feedback on our site? Or do you think we need to increase the line-height of our subheading? Let me know in the comments 🙃

Do you want to create interactive User Flows that include data, logic and users? Then our app Reqfire was made for you.

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Alexander Handley

Written by

Writer, student @ University of Melbourne

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade