Your Website's Hero Image: Part 2
So you’ve realized that you might be turning off website visitors with your current hero section.
In part 1, we learned why an awesome hero section is a must and what kind of images we get to have. Today, we’re diving into the text and additional features you might have on your site, such as movement.
Have a call to action.
Every time I give a website review, the most common suggestion is to add a call-to-action within the hero section. Make sure the button is easy to see. Either make the font bold, give it an accent color or make sure the image in the background doesn’t obscure it in any way.
Add a great (and informative) headline.
When a visitor lands on your site, you want them to immediately know the benefits of what you do and who you do it for. Are you a sales coach? Don’t tell me that. Instead, try: “Empowering you to strut into a room and sell with confidence.” Let’s dissect this a bit.*
Empowering you to strut: Here’s the outcome, the benefit, the reward. This is also geared to women, most of which would love to feel empowered and strut. Combine those 2 and you either have a kickass boss lady or me heading off to latin dance night downtown.
Sell with confidence: Here’s the what and how. You feel empowered because you’ve taken training that gives you confidence that you’ll leave the room with all the money you’ve asked for and more.
* Note: I’m not a copywriter but I LOVE it when I see sites with great messaging. Comment below with links to any cool sites with distinct copy!
Is there any movement?
This one is a bit tricky. Videos, sliders and GIFs can sometimes work for a site but here’s my take: if you need something flashy with multiple messages, or to be able to show #allthethings - there’s probably a better solution.
Sliders typically mean you didn’t design the hero section to fit the relevant info or you’re not sure what your really pushing for in your marketing. 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 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. Mainly though, GIFs should be added detail versus carrying the message.
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!
View the image on all devices, just in case.
Designers can often crop the image differently in order for it to show up great on both desktop and mobile. Does your platform not support that? Choose an image that you’re ok with it getting cropped when on mobile. Background patterns are often great for this.
