Why website hero sections should act like billboards, but most don’t
In the most practical sense, the hero section of a website homepage is akin to the first step inside a store. You’ve seen the sign and are enticed to enter and walk inside. At this stage, you can either continue to walk in or immediately turn around because it isn’t what you’re looking for, or maybe the vibe is just off.
Likewise, with websites, a visitor has already decided to visit the site. They either typed in the URL, found it on Google, or clicked on an ad. Unlike real life, though, it is MUCH easier to bounce off a website than to turn around and walk out of a store that you’re already inside.
While I’ve walked into a restaurant or store and immediately walked out many times, this comes with a certain level of social stigma and literal physical effort versus that of clicking back or ‘X’ on a web browser tab.
So, the website hero header must continue to engage, with the only goal being to keep the visitor moving to the next step. Whether that is to scroll down the page for more information, click on a listing, subscribe to an email list, or any of the many other CTAs, the hero header must keep the visitor moving.
The problem is that many websites overcomplicate the hero section, adding too many CTAs, dense messaging, or making it boring or abstract.
For this reason, I like to treat website hero sections as billboards. They must entice the visitor without overcluttering and complicating.
I’m kicking off a regular series of posts that will feature examples and commentary of website hero headers (aka billboards), why I like them, and why I might not.
Here’s the first round of website billboards:
Framer
Good:
- Clear inspirational messaging
- Very actionable and unique CTA with “Start your site” that will get the target audience excited to create.
- Teases continuation to the next section, enticing the visitor to learn more.
Bad:
- It Misses one of Framer’s biggest benefits, in my opinion — it’s no-code and easy.
Stripe
Good:
- Strong gradient colors and bold, impactful headlines draw the visitor in.
- Stripe offers a wide range of products, and I like the positioning of Financial Infrastructure to bring it all together.
Bad:
- There is still a lot going on between Start Now, Contact Sales, Sign In, and Watch on Demand. It’s unclear what they want me to do first.
Phil’s
Good:
- “Ph*ck Plastic” immediately captures my attention with its uniqueness and entices me to learn more about what that means.
Bad:
- I then went on to read the subheader and it kind of explained it, but not really. I feel it could be punchier. Overall though, it is definitely drawing me in to learn more.
Starlink
Good:
- Messaging is straight and to the point, with imagery that shows the dish in action in the wilderness.
- The CTA is unique and gets right to the point with customization by asking for a service address.
- Teases continuation with types od products: residential, roam and boats.
Bad:
- While the message is straight forward and simple, it could also be much more aspirational given what the product is. I’d love to see a version that pushes the boundaries of connectivity even further (watch this space 👀)
Nike
Good:
- Nike has one of the most impactful brands in the world, and I love that they continue with strong imagery on their website billboard. The interplay between the Run logo, shoe and green colors are mesmerizing.
- The tagline “Don’t waste your energy” is inspiring in a way I haven’t seen shoes position messaging before. Normally it is just “these are lighter”, but this goes to a deeper level and definitely draws me in.
Bad:
- CTAs are pretty weak on this site. The SHOP Button was below the fold on most devices, and there isn’t a clear pathway for the UX.
___
Follow me for more content about designing using AI and no-code tools as I explore a new way to live, work, and play. 🎨👨🏼💻📍
