What Makes a Hero Section Work
Thumbnail of a well designed against a poorly designed hero section
Listen. I understand the self-consciousness.
It's super tough to be creative on the spot. Yet, you can sail with the creatives by simply learning to avoid the common pitfalls. Here's the 80/20
In its essence, a hero section informs the visitor of a few things:
What you do
Your style
What's next
What you do:
Example of a poorly designed hero section
This is your header's job. It informs any visitors about what you do. While this is well-known, it's easy to mess up.
A hero video can be a substitute for this. But it's more complex to get right.
A mastered header is the outcome of a conquered journey. This to say, it'll take time and many iterations to perfect. However, I can help:
Abstraction
A confusing and abstract header could leave a negative impression. Generally, curiosity is the goal. But not in the header. At best, it urges the reading of the subheading. But this isn't recommended.
Just as you wouldn't enter an unmarked building, visitors wouldn't waste their precious seconds browsing a website if they're unsure of its purpose. Just as stores mark themselves, so should your website.
Be Succinct
This is the time to inform. Do it quickly and stay on point. Do not overly sell. Generally, 20% of a hero section should be about sales. The worst way to sell is via text. Show visitors your worth. And blend it with the website's style and layout. Otherwise, it'll take away from your Call To Action.
Your style:
You'll bombard your visitors with your hero section's colours, layout, and content upon visit. Thus, these need to be consistent, appealing, and welcoming as they shouldn't off-put the first impression. Here's how:
Consistency
Consistency is important. Ensure the colour palette, page layout, font, etc remain the same throughout the website.
Homogeneity
While discussing hero sections, remember that they're one part of your website's introduction. It needs to blend well with other elements visible at the first instance of your website. Such as the NavBar, a potential Header or image from the next section, etc. Ensuring these all harmonise is essential.
What's next:
Fundamentally, a hero section is the bedrock for a well-written CTA
Distractions
The goal is to prompt your visitors to interact with your CTA. Thus, this must stand out the most. An overly distracting hero section (unnecessary hover effects, long animations, an uninformative or uninteresting hero video, etc) takes away from the potential power your CTA button holds. Understand what makes a Call To Action pop or flop.
Follow these to seamlessly generate an outstanding website introduction. One that leads visitors to take the next step with a powerful foundation for a well-written Call To Action.
