How To Design a Hero Image: Best Practices and Examples

How To Design a Hero Image: Best Practices and Examples 1

Non-contextual hero images are, as the name suggests, footage that displays something seemingly “unrelated” to the product or business owner. The goal of a non-contextual hero image is to make an impression on the visitor through visual association or subliminal messaging. Seeing the non-contextual image shows the user what the product or brand is about, but in an indirect way. 

This technique is used, for example, in the sample above from the Elementor site built by Oklahoma-based digital marketing firm AP Technology. The firm’s website uses a wide and clear background image that shows a unique angle of Oklahoma City skyscrapers. This photograph depicts the business’s value proposition, as stated in the site’s hero text: build your business and watch it grow, as tall as the city’s highest office towers. 

As soon as the human eye sees the physical structures towering over the sky, it understands that these marketing professionals work to lift businesses off the ground, as far as sky-high. 

Best Practices:

  • Make Sure Visitors Understand Why the Image Is Relevant

Although you’re not displaying a direct visual of your product itself, make sure your product value’s connection with your non-contextual hero image is still easy to identify. Users shouldn’t need to spend time thinking about its relevance.

  • Draw a Clear Connection Between Hero Image and Hero Text

The hero text you place in conjunction with your image must be directly related to its visual content. This is a necessity, even if it requires multiple iterations of your text and choice of wording. 

  • Create a Cohesive Design Scheme

The colors you choose for button texts and backgrounds, headings, or descriptions should be coordinated with the hero image or illustration. This also applies to your site’s clickable accents: the nav menu items, the logo, etc.

We all know how important a consistent visual language is to our website prestige, brand presence, and professional credibility. This is where design style guides can be really helpful, especially to ensure that your hero images are aligned with your website design. 

This article was originally published here.


Share this page
Share on facebook
Share on twitter
Share on linkedin
Share on email