Design + Sketch
Published in

Design + Sketch

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.


  • How to find websites to learn from. 🔎
  • Breakdown of three examples. 👀
  • Putting it all together for your site. 🎉

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.

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.

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.

1. Header Bar

  • Stays at the top of page (except for Intercom).
  • 5–6 links.
  • One CTA, Intercom does this the best with their signup button requiring your email address.

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!
  • The headline is bold, clear, and dark colored.
  • The subheading follows the recipe: who’s it for, what they can do, and what’s the benefit.

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
  • Artists and laptops — made for new age teams.
  • Squares, triangles and circles — components in a kinda laid-back but still technical product.
Intercom — Credit:
Slack — Credit: Alice Lee
  • Shows the human side of abstract ideas like sharing files.
  • Gets across collaboration without using a stock photo of an open-plan office.
  • (This is my favourite illustration by far).

4. Optimising the Call to action for sign ups

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.

  • Cool greyed out logos of their customers.
  • Two similar CTA sections for sign ups.
  • Big footers.

Putting it all together

Shout out to Hao Le for the design.
  • Headings: We picked the gorgeous and sturdy Libre Baskerville as our title font.
  • Hero Image: We learned a lot from the Slack illustration and so tried to communicate what our app does without a screenshot.
  • Bonus video: We got the idea of the video from Framer (who updated their website last week — yep it’s new website season).

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!)



A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store