Blog · 23 April 2024

Hero section examples

Hero section patterns that work, from product-first heroes to one-line promises, with real dev tool and SaaS homepages and the mistakes that cause bounces.

const y = useScroll()
const lift = transform(y, [0, 400], [0, -80])

.hero h1 {
  font: 800 clamp(3rem, 8vw, 7rem)/0.9;
}

TLDR

• The hero has one job: tell a stranger what this is and why they should care, in about five seconds.
• The patterns that keep working: show the product, one clear promise, one main button, and proof right underneath.
• The real examples below are from the Design Inspiration folder in my own Savepad, mostly dev tools and SaaS.

Patterns that work

Show the actual product. A real screenshot, a looping clip, or a live demo you can poke. Not an abstract 3D blob. Linear and Raycast have been showing the product front and centre for years.

Say what it is. “The Postgres platform” beats “Build the future of data”. Developers especially will close a tab that won’t tell them what the thing is. Supabase and Neon are both blunt about it.

One main button. Usually “Start free” or “Get started”, maybe a quieter second option like “Read the docs” or “Book a demo”.

Proof right under the fold line. Logos, a stars count, a short quote. It answers “is anyone actually using this?” before they ask.

A code sample, for dev tools. Three lines that show how easy it is. Clerk, Liveblocks, and Prisma do versions of this.

From my swipe file

My Design Inspiration folder has 34 homepages I’ve saved over the years: Linear, Raycast, Railway, Retool, Vercel, Stripe, Mintlify, Bytebase, and more. Heroes change a lot, so what you see today might not be what I saved. Which is the reason to save them.

Mistakes that make people bounce

• A headline that could be anyone’s. “Work smarter, together.” Every second homepage. (Says the person whose homepage says “For all the things that make you go hmmmmm”. Fair.)
• A carousel. Nobody waits for slide two.
• Three buttons fighting. Start free, Book a demo, Watch video, Contact sales.
• Stock photos of people pointing at laptops. You know the ones.

Save the whole hero

A hero is more than a screenshot: the headline, the font, the colours, the button. In Savepad (mine), a saved homepage keeps a full-page snapshot plus its palette and fonts, and you can bundle the screenshot, colours, and font as one collection. Then the find a website’s colour palette and find a website’s font steps are done for you. More pages to steal from in landing page examples, and buttons in call to action examples.

Join the waitlist