What is a Hero Image & Why Every Website Needs One

Does your website need a hero? Yes! A hero image that is.

How do you convey to users who you are?
How do you convey the value you offer quickly and efficiently?
How do you grab their attention long enough to do so?

Hero headers to the rescue!

First impressions matter and having a hero image that complements your value proposition will help make it a good one. So let’s dive a bit deeper…

What is a hero image?

A hero image is defined as a large banner prominently placed at the top of the homepage — it’s the first thing visitors see after landing on a website. The role of a hero image is to pique people’s interest and make them excited to find out more.

Simply put, it should be a bold, in your face banner that clearly states a problem for your prospect and your ability to solve that problem, all in a matter of seconds. A hero image can also be referred to as ‘hero header’, ‘hero banner’, etc.

We’re sure you’ve seen them before, they look like this:

Hero image for a lifestyle and entertainment center.

Hero image for Kid Scouts

A hero image is generally composed of 3 elements:

1. An Eye-catching Image – an image or video that reinforces your message.
2. A Compelling Message – your brand’s unique selling proposition (USP); what is your purpose? Explain how you solve a customer’s problem.
3. An Effective Call to Action – drive users to take a specific action.

Why Does Your Website Need a Hero Image?

A hero image done right is the hook you need to catch visitors’ attention and convince them that your company or product is what they’re looking for. Studies prove it only takes 50 milliseconds for users to form an opinion about a website. A hero image demands the attention of your audience, making them a surefire winner. Within 5 seconds your hero image needs to explain the following:

• Who you are (your industry or niche)
• What you do (a summary or your product offering or services)
• Why the user should care (how it can help them or make their life easier)

As you can see a hero image is so much more than a large photo; it’s visually displaying the value your company offers.

Examples: Good vs Bad Hero Image

THE BAD: Let’s examine an example from Insight2Profit:

While visually appealing, this hero image lacks clarity and is obtuse at best. What does this company do? How do they “deliver bottom-line growth”? Their messaging missed the mark.

THE GOOD: Now let’s take at a good hero image example from Youngberg Law Firm:

This is such an effective hero image, because it speaks directly to their target audience and the challenges they face during a divorce. An image of a happy mother and her child is emotional especially when paired with the phrase ‘Protect what matters most’. This image is so much more impactful and relatable than a photo of lawyers or city skyscrapers. We know right away what this law firm stands for and how they can help.

THE GOOD: Hulu’s website.

Hulu has a compelling hero image, their logo establishes trust and the background photos gives viewers a glimpse of the series and movies they offer on their platform. The ‘start your free’ trial is an alluring CTA by encouraging users to watch for free.

Here are some helpful tips on crafting a compelling hero image for your site:

• Use the hero image to send a message. For example, let’s say you own a pool maintenance company. Instead of going to the default pool image, you might instead use an image of a family relaxing in a pool, helping visitors associate satisfaction and happiness with your brand.
• Select the right image size. Don’t make your image too large or you risk slowing down your page speed. Remember to always compress your images.
• Make sure your image is responsive. Does it look good on both desktop and mobile?
• Highlight your call-to-action buttons. Make sure they stand out with good contrast.
• Make your text legible. Is there enough contrast between the text and background image? If not and the text is hard to read, try applying an overlay to the background image. Ensure your fonts are easy to read as well, there’s nothing worse than not being able to read your carefully crafted statements.

Takeway

To recap, adding a hero image to your website can be a great way to grab a user’s attention. These oversized web banners come to life on screen and tell visitors who you are. Be unique and bold in your design and messaging — don’t be afraid to stand out!

The post What is a Hero Image & Why Every Website Needs One appeared first on Twingenuity Graphics Web & Graphic Design Blog.