Your Website's Hero Image: Part 1

Humans make split second emotional decisions about you and your business as soon as they land on your website.

These choices are typically based on visuals or tones versus the actual copy on the page and you’ve only got about 3 seconds to make it or break it. Yup, 3 seconds to grab people’s attention on your website, visually show off your brand and get them to understand what your business is all about - whether that’s to donate, sign up for an event or buy new shoes.

What happens after 3 seconds? Your potential lead has either closed out of your website, started scrolling or clicked on something. According to Crazy Egg, if you manage to get people to stay on your site, you’ve got about 15 seconds to really get them hooked!

Side note: if you read the Crazy Egg article, you’ll also see the words Bounce Rate thrown around. As a quickie: high bounce rate is when people land on your site then leave because it wasn’t what they were expecting or wanted.

This is where the hero section comes in.

The hero section is the part of the web page you see as soon as the page loads (no scrolling ). The hero image is the photo or graphic within this section. Sometimes it’s next to text and other times the image can be set as a background with a call to action over it. Other times, no image is used, just text.

Why the website hero section is important? It’s the first thing that your website visitor sees and it helps establish what you do, who you do it for and gives a call to action – such as “Get your strategy workbook! Click here!”

So how do you get the best hero section on your website?

Great images, graphics, copy and a call to action. Sounds like an easy recipe, right? Wrong. Sometimes, it takes testing copy or being honest about the level of graphics you use to find out it’s time for a website refresh. You’d be surprised at how simply upgrading one of these items can often yield great results for our clients!

So, images…

How can you make sure your images are #onfleek?

Ask yourself: Is my photo or graphic on brand?

If you were to place the image next to your logo, business card, brochure - would it look like it belonged? If all your other images are airy and happy while your hero image is dark - there’s a disconnect. Instead, you’d be better off getting images that all looked like they were photographed the same day with similar lighting and models.

Is the image conveying the right message?

Are you a coach that’s looking to help women business owners gain confidence in sales but your image shows a mom taking care of her kids - it’s conveying a different message. Instead, you’d want to show a women business owner killin’ it in her posh office.

Is the image on fleek?

Is it pixelated or does it look like it was taken by your uncle bob, it’s better not to even have it there. Here’s where you might think about hiring a photographer. My fave is Autumn.

Can’t afford a photographer? Get a couple stock images from the same photographer so they all have a similar style. Look to the brand guide from your designer. Is your brand lite and airy or dark and luxe? Make sure you stock images look the same.

Perfect images will allow text to still be readable. Make sure that the image offers an area for the text or that the contrast doesn’t vary too much.

Add some real people to your site.

Yes, this one is hard – sometimes images with faces can distract. Make sure to hire a photographer to take head shots and invite friend to fill in any gaps. People on your site invokes trust. Stay away from horrible stock images with stiff people and fake smiles.

Is the image slow on loading?

Large files that take a long time to load will leave a negative feeling about your site. Make sure you optimize your images and that they load in less that 3 seconds (on mobile and desktop).

Stay tuned for part 2. I’ll be going over the type of copy you’ll want to have within your hero section and whether or not you should add sliders.