How To Design for Conversions with Hero Images

What Are Hero Images?

If you visit a website, oftentimes you will see a large banner photo right at the top with a few words highlighting either a product or the site’s purpose—and some form of a call to action. See the following image of the front page of Starbucks as an example:

Let’s break this down so we can understand how (and why) Starbucks has used this hero image for their homepage.

The first detail you’ll notice is the bright red color they use to grab your attention and to express the emotions of excitement and happiness.

Now that you’re looking, you see three of their products front and center. This lets the visitor know what they’re advertising without much guesswork.

Visitors will now direct their attention to the words on the right of the image, which encourages you to sign up for their newsletter to get “exclusive access” to deals.
Who wouldn’t click that “Send Me Magic” button?

The point of the hero image is to do two things:

1. Grab your attention and win the favor of your eyes with an aesthetically pleasing photo.
2. Quickly convert new visitors with a clear and accessible opportunity for action.

Let’s look at one more example before we dive into creating one ourselves.

Below is the front page of Dropbox:

Here, Dropbox reserves itself to a minimalist, calm, and focused tone. The image was chosen to communicate collaboration, with no other distractions in view.

Dropbox’s hero image is used to make a small pitch about exactly what their service provides. Though they have two calls-to-action to choose from, they use color to emphasize the free trial, indicating to your brain that it is the correct button you should click. In the last line, they mention that no financial commitment is required in an attempt to give the visitor the minimum information they need to allow them to confidently move forward with the conversion.

Using a hero image like Dropbox’s is the ideal way to quickly capture conversions in an appealing, non-intrusive way.

Why Does This Work?

When a user visits your website, they need to immediately see the value on the page to continue moving forward. They need to know that what they came for is here—without having to search for it. A hero image is a perfect way to communicate exactly what you want the user to do, while also ensuring that you make them want to do it.

Tailoring Your Hero Images

Now that we know what we want to make, we’re ready to create our hero image. In this example, I will make a hero image for a custom suitcase website. First, we need to ask ourselves what content we want to display. Here are some tips for choosing your hero text:

• Consider the reason why the user has visited your site instead of a competitor. What are you advertising that makes your product/service different than others? Make that apparent in the words you choose.

• Remember—less is more. We do not want to overwhelm the visitor with too much information that they have not asked for. This may lead to confusion/frustration, and ultimately the loss of a potential customer. Narrow it down to a few short sentences at most that advertise your product or service.

Notice how I’ve used the positive action phrase of “Travelling in style” to assure the visitor that by making a purchase they are gaining something beyond the product itself.
Next, we need a call to action. It is important to make your button(s) attractive by either using enticing and playful language, or language that displays the value (such as Dropbox highlighting their free no-commitment trial). Your CTA should lead directly to a landing page that gives an opportunity for conversion.

Here, my call to action displays value by stating that pressing this button will allow the user to start customizing their suitcase immediately. Notice how I did not use generic words like “Start”, or “Go”, or “Buy”. Vague CTAs will lead to user doubt, thus lowering the chance of the visitor moving forward right away.

Finally, we need to add visual appeal. Here are some tips for choosing your hero background and colors:

• Choose a hero background that supports your text. If your text mentions offering “the most comfortable shoes”, you want to display the best version of those shoes to set a positive expectation of quality.

• Consider how you want the visitor to feel when browsing your site. Your hero image will set the tone of the user’s perception of your site going forward. You can use color to evoke a given emotion from visitors (See this article to learn which colors correspond with different feelings) .

In the case of our custom suitcase site, we want to display the product we are selling on the forefront. Since we are advertising a personalized experience, we want to focus the attention on the product alone, with no distractions. By adding the color purple, the visitor will be inclined to feel like what they are seeing is unique. Hopefully that feeling will carry on throughout their time on our web design.

Now we know the details of making a compelling hero image that is designed for conversions. You are ready to get started! If you take away one thing from this article, it is that you only have a few seconds to leave a good impression, make it count.