Blog · 6 September 2023

Landing page examples I keep stealing from

The landing pages in my own swipe file, what each one does well, and the patterns worth borrowing for your next homepage.

TLDR

  • Most good landing pages do three things fast: say what it is, show it, and prove someone uses it.
  • Steal patterns, not pages. The structure of a hero, the order of sections, how the pricing link is worded.
  • Everything here is from my Design Inspiration folder, which has about 50 homepages in it and is mostly dev tools, because that’s my job.
  • Save a copy when you save the link. These pages change every few months.

How I look at a landing page

Before the list, the three questions I ask of every page I save:

  1. Can I say what it does after five seconds? Not what it “helps teams achieve”. What it does.
  2. Where’s the product? A real screenshot, a live demo, a code snippet. Not a 3D blob.
  3. Why should I believe them? Logos, numbers, a quote from someone with a name and a face.

If a page nails all three, it goes in the folder. If it nails one of them in a way I haven’t seen before, it goes in too, with a note on which one.

Patterns worth stealing

0664 · pattern · product as hero
0761 · pattern · install as hero
0858 · pattern · one line, one button
Three hero patterns from my folder: the product as the hero, the install snippet as the hero, and one plain sentence with a big button.

The product is the hero. Put a real screenshot of the app where the illustration would go. Linear made this the default look for half of SaaS, to the point where EVERY second homepage now looks like Linear. It works because the screenshot answers “what is it” faster than a headline can.

The install command is the hero. For dev tools, npm i whatever next to the main button says “you can try this in ten seconds” better than any copy. Supabase and Clerk both put code right up top.

One line, one button. Resend has said “Email for developers” in some form for years. Four words that tell you the product and who it’s for, and it’s enough.

The title in Google is part of the page. Your homepage’s first impression is often a blue link on a results page. Check how your title and description get cut off with the free Google snippet preview.

Logos under the fold, numbers above it. A row of customer logos is table stakes. A number in the hero (“used by 40,000 teams”) does more, as long as it’s real.

The changelog as proof. Pages that link to a busy changelog tell you the product is alive. Linear and Supabase both do this, and Supabase goes further with launch weeks: five days of shipping, one announcement a day, all linked from the homepage. How they launch is in my case studies folder. (Ours is a lot quieter: there’s a changelog and a roadmap, and that’s the launch week.)

From my folder

A few of them, with the one thing I saved each for:

  • Stripe. The page everyone’s designer has open in another tab. Saved for the section order more than the gradients.
  • Supabase. “Build in a weekend, scale to millions” is still one of the best dev tool lines out there.
  • Linear. The product screenshot as the hero, and the dark, dense look everyone copied.
  • Clerk. Shows you the actual sign-in component you’d drop into your app. You know what you’re buying.
  • Mintlify. A docs product whose homepage looks like good docs. Obvious, and still rare.
  • Mailchimp. The Cavendish yellow rebrand. Proof that a B2B homepage is allowed to have a personality.
  • Railway. Deploy flow as the demo.
  • Liveblocks. Live cursors on the homepage, so you get what “multiplayer” means before you read a word.

These change. By the time you read this some of them will look different, which is the point of the last section. For pricing pages specifically there’s a separate post, and for where to find more, design inspiration websites worth bookmarking.

A link to a landing page is a link to whatever’s there today. The hero you saved in March is gone by June, and the version you liked is only in the Wayback Machine if you’re lucky.

When you save a page in Savepad it keeps a full-page snapshot, pulls out the headline, description and colours, and reads the text so you can search it later. On Pro, page history watches a page and keeps a new snapshot each month it changes, which is how you notice a competitor quietly moved from “Start free” to “Book a demo”. More on that in competitor research.

My folder’s public at my.savepad.app/@gunnyganatra if you want the rest. There’s a lot of purple in there, sorry.

Join the waitlist