Create the Perfect Hero Image Using Contrast

Want to make a great first impression? It starts with your website’s header. The image a user sees will leave an impression—good or bad—and determine whether that user clicks and continues, or leaves the site altogether.

That’s a tall order for a single image.

The key element to creating a hero image that will draw users in and keep them moving around the design is contrast. (Seriously! It all goes back to design theory 101.) A head that features contrasting elements in size, color and scale provides the right mix of visual interest and tells users how to interact with the design. Here are a few ways to maximize contrast on the path to creating a perfect hero image.

Crop Strategically

The hero image does not have to fill the “first” screen on devices. Don’t get caught in that trap.

Crop the image for impact based on the content therein. Consider the other elements that are important to users when they land on the page and make accommodations for those as well. Depending on this framework, that might mean the hero image is scaled to be larger or smaller than the browser window (let’s just consider more standard resolutions for sake of argument).

Before you balk at the idea, consider it for a moment.

• A shallow image will help preview other content.
• An unusually deep image will encourage users to scroll for more.
• Any unusual shape will draw attention.

Consider Animation

You don’t have to create a full-fledge cinematographic experience to add moving imagery to the hero header. The smallest touches of movement create just enough contrast to grab the eye.

Subtle movements, such as the plane flying across the image for Bar Z Winery, provide that element of contrast without being overwhelming. It’s a simple alternative to some of the more flashy video headers that have become popular. The element of contrast is two-fold: The design is different that many of the others that users are exposed to and the subtle movement is delightful and rather unexpected.

On the other hand, you can go all in with animation or video for a hero image. Movement can be particularly engaging and is a popular option. Use it in the same ways you would a still image when it comes to adding effects such as typography and calls to action.

Think Bold Typography

Typography in the hero image should wow the user. It needs to be bold, impactful and memorable.

You can create this with both typeface selection and the words on the screen. (No Arial headers that say “Hello” here.)

The combination of lettering style and messaging needs to have direct impact and appeal on the user. You’ve heard that people have shorter attention spans than goldfish; it’s your job to catch them with beautiful lettering and language.

When it comes to bold type, the key elements of contrast are color and size.

• The type needs to be a color that stands out from the background. Light on dark or dark on light are the best options when it comes to readability.
• Bold is a digression from the norm. Consider over- or undersized typography on the hero header for impact.
• Choose words with meaning. Unless it is key to your message, you don’t need a paragraph in the header. Opt for a few key words that entice users to learn more. (The number of words will impact how large or small lettering can be.)

Choose Color Carefully

A hero image might not be an image at all. It could be a color block or cool texture.

Choose a color carefully that portrays the exact meaning you intend. A bold color hero header can impress users, but the wrong color can be a turn off.

Bright, trendy options are a good alternative. The nice thing about this option is you can mix it up from time to time just by changing the background color. A big color background can also help reinforce brand identity—particularly if it has a strong color association—and lends itself to readability because of the simple nature of the design.

Color is also an important consideration when used with another image or video. From colored typography to colored user interface elements, it is important to make sure that color choices in the image match the rest of the design. Much of this goes back to color theory and an understanding of the color wheel so that the image and color choices work together in the design.

But what if the hero image and brand colors don’t mesh? Think creatively about how to use the parts in the hero image together. Try a color overlay on the photo; consider black and white for the image or text. Move high-color elements into a navigation bar that’s white or black to keep them off the actual image. When the image and the mandated colors don’t play well, the best option is to eliminate or separate the color.

Think About Light and Dark Spaces

Accounting for dark and light spaces in an image might be the most difficult task when adding elements to create contrast in a hero image. Particularly with responsive formats and breakpoints, the placement of text or buttons on an image can change and you can’t always find a great location.

What’s a designer to do?

• Choose another image;
• opt for a different type family, size or color;
• add a color overlay;
• make the best of it.

Each of the above is a viable option. The best option may vary by project.

The Society Inc.’s solution in the hero image slider—with plenty of variance between light and dark spaces – was to include a logo overlay with white text in a black shape. It does not detract from the images and is a lot less obtrusive than you might think from hearing the idea. The logo in the center also helps establish brand and visual identity.

Include a Distinct Call to Action

Don’t forget the CTA!

What do you want users to do after they look at your cool hero image? Tell them.

The call to action should be clear, whether it is to fill out a form, scroll for more content or to click a link to another page. It should include enough definition and contrast so that it is easily seen against the image background. (What’s the point in a CTA if no one sees it?)

Color and size are of particular importance here. The color of the button (a common CTA cue) should stand out from the rest of the image. The words telling users what to do need to be exceptionally readable, simple and clear.

Conclusion

Contrast is one of the key techniques for any good design. It creates separation between elements and helps guide users toward the desired action.

Take special care to create enough contrast when designing a hero image so that users know exactly what actions to take on the page. Peek at your metrics and if those conversions aren’t happening, rethink the amount of contrast in the design. It might be time to amp it up even more.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.