How to Create a Modern Hero Image to Bring Traffic to Your Website

June 6, 2018
How to Create a Modern Hero Image to Bring Traffic to Your Website

In literature, a hero is the main character in the work, often imbued with classic heroic qualities like courage, virtue, and perseverance. I like to think that hero images in web design are similar. Hero images in web design are found at the top of the homepage of a website, front and center and full width. It’s the main character of a website and sets the tone for the other pages. The hero image can be bright and inviting like you would find on an ice cream store’s website, or it can be an “antihero” image, dark, minimal, and even unconventional, like on an artist’s or band’s website. The layout, colors, and even font found on the hero image all factor into how website visitors perceive your business and will often determine whether they decide to click back to view a different website or continue to explore yours.

Components of a Modern Hero Image

1. High Quality Image

The hero image is your website visitor’s first impression of your business online. If it’s blurry or misshapen, visitors may assume your lack of attention to detail to the quality of your hero image may mean you lack attention to detail in the products or craft you’re selling. With free resources for beautiful, high resolution stock images like Pexels or Unsplash, there is no reason why a website’s hero image should be anything but stunning. A low quality image may also make your website appear old, as if it were last updated years ago when website quality was not as high as it is today. This could make visitors believe you are no longer in business or deliver a service or product inferior to competitors with a high resolution hero image.

2. Clear Call to Action

Hero images should instantly convey what your website is about, or, in other words, the purpose of your website and what you would like website visitors to do next. The hero image is where you invite your visitors to scroll down to view more content or take some specific action like view you gallery, order a product, or sign up for your mailing list. The call to action text should be large, succinct, and easy to read and under, above, or beside the text, there may even be a button guiding visitors to click it as their next action. Guiding customers with a clear call to action reduces your website’s bounce rate, or the rate customers visit your website then immediately click off of it to visit a different one. When customers are guided toward a next step, they are more likely to follow the track you’ve laid than quickly bounce to a different website.

3. Unique Style Representative of your Brand

The hero image has always been my favorite part of a website, not only because it sets the tone for the rest of the pages, but because it offers so much room for customization and creativity. So long as you’re hero image is high quality and mobile-responsive and your call to action is clear, you can go wild with design ideas and customizations to engage customers. Design trends for hero images welcome illustrations, oblique shapes, vibrant gradients, and animations. Anything out of the ordinary yet in line with your brand’s style will invite customers to explore your website and convey that you’re company is dedicated to providing a great customer experience in store and online.

Examples of Modern Hero Images

We took some time to create a few samples of modern, effective hero images. The samples below (and the one used as this article’s main image) were all created by VirtualZero with WordPress and can be easily implemented in your company’s website to dramatically increase traffic and engagement.

How to Create a Modern Hero Image to Bring Traffic to Your Website
How to Create a Modern Hero Image to Bring Traffic to your Website
How to Create a Modern Hero Image to Bring Traffic to your Website
How to Create a Modern Hero Image to Bring Traffic to your Website