Your website needs a hero

Here’s something I’ve learned in life so far. Humans make decisions, more often than not, with emotions. (Yup, it took me this long to figure it out.) Often, these choices are made in a split second and based on visuals or tones versus what the actual message is or the words that are being said. It’s the same for your website.

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

And usually, it’s based on the hero image.

What it is: The “hero image” is the main image on a site, the one towards the top. Sometimes it’s a background image with text over it (like mine below) or the one I created for Ashley Kaylor (with her photograph).

Robles Designs Website Homepage ScreenshotAshley Kaylor Website

Why it’s important: As I stated above, the hero section the first thing that your website visitor sees and it helps them establish either what you do or gives a call to action – such as “Get your strategy workbook! Click here!”

The image behind the text (and you should always have some text) supports in establishing the business as well. On the screenshot above, mine has feathers which keeps the text easy to read. If you designed textile, you might want to photograph a close up and place it there. Are you a coach and the face of the company, you might want to consider putting up a head shot.

So how do you get the best hero image? Here’s a few questions to ask yourself:

1. Is it slow to load?

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).

2. Is there movement?

Sliders and GIFs can sometimes work for a site but here’s my take: if you need something flashy with multiple messages, there’s probably a better solution.

Sliders typically mean you didn’t design the graphic to fit the relevant info or you’re packing too much into the hero image. Keep in mind that site users don’t often sift through multiple slides.

Instead, organize your promotions, calls-to-action, and any other content you would have used in order of priority. Next , spread it out throughout the web page, in that order.

GIFs with text should be slow enough that the viewer can read the whole thing before the text changes out.

Again, in my experience, GIFs and Sliders aren’t the best solution and often lead to ADA issues with the site. Be careful how you use these!

3. Is it relevant?

Refer back to your brand’s mood board. Does the image feel like it fits? Your image should fit with the brand and overall aesthetic of the website. Is the image tugging at heart strings or showing the visitor what the benefits to her are?

The text on this image should be clear and to the point. If your goal is to get people onto your email list – offer a freebie and give a call to action. If the goal is to establish authority, maybe your tagline and call to action for the blog would work.

Selling a product? Show the best image while putting it in context. For example, if you sell catering services, place a closeup of the food and the call to action could be to the free consultation calendar.

Be clear about who you are and what you do while keeping the graphics on brand.

4. Is the image on fleek?

Meaning, if it’s pixelated or looks 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. One of my current faves is Autumn. The section that says brand photography is what I’d use for a hero image (if you’re against having a headshot).

5. View the image on all devices possible.

Designers can often crop the image differently in order for it to show up great on both desktop and mobile. See the image below of Ashley’s site. I designed the mobile hero image as a different crop and set up than the desktop version in order to keep it looking #onfleek and avoid the forced look.

6. Have a call to action.

I’ve said this before and will say it again – have a call to action. Make sure any button and headlines are easy to see. Either make the font bold and the button a great accent color that pops from the image behind it. You can also lighten or darken your image with an overlay.

7. 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. I’ve written about stock images before, check it out.

Want to know how your website is doing? Feel free to sign up for a complimentary call where we can dive into your website and level up your branding!

Leave a Reply

Your email address will not be published.


After you have typed in some text, hit ENTER to start searching...