Free Assessment: Website Performance Assessment

Start the Assessment
Close
website performance assessment start

Free Assessment:

Website Performance Assessment
Start the Assessment
Website Performance Assessment
Free Website Course
View Website Performance Assessment
website performance assessment start

Free Assessment:

Does your website build trust with buyers and bring in revenue?

Take this free 10 question assessment and learn how your website can start living up to its potential.

7 Tips for Choosing a Hero Image That Will Slay the Design Game

By Marcella Jalbert

Marcella Jalbert also recommends this free website performance assessment.

7 Tips for Choosing a Hero Image That Will Slay the Design Game

tips-for-choosing-a-hero-imageWe all know the importance of a first impression. Some people even say that an initial judgment is made in seven seconds or less. Unfortunately, for all of us digital marketers and creatives, studies show that, with a website, you only have about 50 milliseconds (or 0.05 seconds) to captivate your audience.  

One of the very first things people see when landing on your website is your hero image. 

Free Assessment: Website Performance Assessment

Take full advantage of yours and use it as a tool grab your user’s attention and keep them on your site.

Below, I’ve compiled a list of seven tips for choosing a hero image that will help you do just that -- and make an awesome first impression.

1. Use directional cues.

Guide your audience to your value proposition using your hero image. Studies show that humans will naturally follow the gaze of other humans. Use a photo of someone looking in the direction of your value prop or CTA to lead your audience there.

Pro Who Got it Right: Virool

Virool, a video marketing platform provider, nailed it. Even though the subject’s eyes are not in the picture, it shows just enough to create a clear gaze right for their headline and call-to-action button.


2. Visually support what your value prop is saying.

You’ve put the time in to create a really powerful H1. Don’t go and ruin it by picking a lackluster hero image. Pick a photograph that is just as strong and moving as your statement is and more importantly, make sure your statement and visual are saying the same thing.

Pro Who Got it Right: Acme

Acme, an industrial solutions provider, makes a striking impression with their hero image-H1 combo. The foggy cityscape seen from above the clouds offers a futuristic, industrial feel, which perfectly supports their line, “We Pioneer the Future.”

 

3. Create an emotional reaction.

One critical way to get your audience engaged right off the ball is to create a guttural, emotional reaction with your hero image. When they first land on your page, Leave them with a feeling they can’t ignore.

Pro Who Got it Right: AMY, Forever

The website for AMY, Forever, the documentary about Singer/Songwriter Amy Winehouse, is a heartbreaking example. The hero image here focuses on a cropped photo of Amy staring straight out at the camera with an indecipherable expression. Knowing the singer’s tragic end, the photograph stirs up emotions of all kinds and leaves you wondering what is behind the gaze.


4. Play with color.

Create allure with the color in your hero image. Up the contrast and play with something slightly off-brand. Create something unexpected (yet still pleasing to the eye) to get your audience interested at first sight.

Pro Who Got it Right: Spotify Found Them First

Spotify Found Them First does a killer job with this. In their hero image, they’ve manipulated a series of photographs of artists to fit into their vibrant color scheme that’s contrasts perfectly with their headline.

 

5. Use an illustration.

A hero image doesn’t necessarily have to be a photograph, sometimes a well thought-out illustration can have just as strong a presence.

In the sea of beautiful, artistic hero images, illustrations are surprisingly rare so using one could be just the thing your brand needs to set you apart from your competition.  

If the idea of creating an illustration of your own is terrifying, however, don’t worry; there’s a wealth of illustrations for sale on sites like Shutterstock and Creative Market.

Pro Who Got it Right: Keep Portland Weird

Keep Portland Weird has an awesome illustration highlighting their earthquake preparedness initiative with a cityscape of Portland that captures the character of the city, but also shows the impact an earthquake could have on it.

 

6. Idolize your product.

If you’re focused on pushing a product or a series of products, make that the focus! Show it off, and make it look larger than life.

Pro Who Got it Right: B & O Play

B & O Play, makers of music systems and speakers, did just that for their H6 Rapha Edition Headphones. The page loads on a floating image of the black and pink headphones that brings the drama and allure to draw the focus to their product.

 

7. Be relatable.

Speak to your audience; set a scene that will resonate with your buyer persona. You don’t want to turn someone off of your site and brand because they can’t relate with you at all. Choose a picture that is reflective of your audience.

Pro Who Got it Right: Woodbuds

Woodbuds, makers of eco-conscious high-quality wood earbuds, does just that. Their hero depicts a stylish man in a wooded setting listening to music, suggesting both a love of nature and music.

This paints a realistic and relatable picture of how their ideal persona would most likely interact with their product. This not only resonates with their persona, but it helps them envision themselves actually using Woodbuds.

 

website performance assessment start

Free Assessment:

Website Performance Assessment

Does your website build trust with buyers and bring in revenue?

Take this free 10 question assessment and learn how your website can start living up to its potential.

Topics:

Web Design
Marketing Strategy
Published on October 28, 2015

Recent Articles

4 Ways To Recession-proof Your Website In 2022
June 9, 2022 • 5 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
8 Best Content Management Systems for Digital Marketing in 2022
March 22, 2022 • 9 min read
How Much Does a Website Design or Redesign Cost in 2022?
March 8, 2022 • 9 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
Your 2022 Website Strategy Must Include These 6 Things
February 15, 2022 • 9 min read
11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
8 Best Business Website Designs (Updated for 2022)
July 15, 2021 • 5 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read
What is a Featured Snippet? [Definition + Examples]
June 10, 2021 • 4 min read