Even if you’re not familiar with the term hero image design, you most likely know what one is. It’s that big, prominent image you see first when you visit a website that acts as a combination of a banner and a welcome mat.
Almost every website has a hero image. On some sites, the hero image changes regularly while on others, it remains static for years. Lots of websites also use sliders, a set of rotating pictures and headlines as hero images.
A hero image’s job is to create brand engagement. Because it’s the first thing a visitor sees on a website, it’s often the factor that makes them decide whether to stay on that website or navigate away. So if you want to build an appealing website and send your visitors’ engagement through the roof, make sure you design the perfect hero image for your brand.
How to create the perfect hero image for your website:
What is a website hero image?
You see them every day. Hero images are the large featured images you see on homepages. They’re the first thing you see on a website, a big, bold introduction to the brand (even when the brand itself isn’t particularly bold).
Hero images are positioned to be the first thing you see when you visit a website, so they’re designed to hook you and keep you scrolling through the website. Hero images are often used to promote specific offers or pieces of content, but this isn’t always the case. What is always the case is this: a well-designed hero image showcases its website’s brand clearly.
A hero image is often the largest image on a homepage and on some sites, it’s the only image. They can be clickable—but they don’t have to be. Similarly, they can have text—but they don’t have to. The goal here is to design a website hero image that connects with visitors and keeps them on your website long enough to do the thing you want them to do, whether that’s buying a product, read or watch your content, download something or interact with others on the site.
What makes a good hero image?
A good hero image shows, rather than tells.
It shows your brand in an image, but not in the way a logo does. A logo sums up your brand symbolically, whereas a hero image is a snapshot of the experience a website visitor can expect from your brand.
A well-designed hero image contains multiple components. Although hero images are as unique as the websites they’re found on, they all contain the same deliberate design choices crafted to attract and sustain visitors’ attention. These design choices are:
- An image that works with the headline
- An image that’s relevant to the website’s brand and purpose
- A clear call to action
- High-quality images
- Responsiveness
- Clear branding that works with the rest of your website’s design
It sounds like a lot, but trust us, designing an effective hero image follows many of the same principles as designing other parts of a website. Read on to learn more about all of the elements that go into a well-designed website hero image.
Working with the headline
A good hero image has to work with its headline. Even the most clever copy can’t hook visitors’ attention and reel them in on its own, and neither can the best image. But together, a powerful headline and the perfect picture are the perfect dynamic duo for your site’s hero image.
Take a look at how the image and headline copy work together in the design above by DSKY. Before the viewer even reads the paragraph explaining that Stillwater Investing is an investment firm in Maine, the hero image tells them a lot about the brand. It shows they’re based in New England, they promise to help you pursue financial independence and by trusting your money to them, you can achieve the kind of lifestyle depicted in the image: spending time with loved ones, pursuing hobbies in a picturesque setting, all because you have the financial security to do so.
MNoriega’s hero image design does the same thing: it makes the website’s purpose and promises crystal clear to visitors from the moment the site finishes loading. The illustration visualizes the complex subject in an appealing, easy to grasp way.
Relevant images
It sounds obvious, but it’s worth discussing: the imagery you choose for your hero image has to be relevant to your website and your brand.
This doesn’t mean abstract imagery can’t work. It absolutely can, so long as it works with the rest of your design. That might mean a geometric pattern that creates an intriguing visual texture or a sea of swooshes in your brand’s color palette.
The best images to use aren’t just relevant—they’re high quality. Don’t cheap out on anything less than high definition images—people will notice, and that will impact how they perceive your brand (and not in a good way).
Your hero image doesn’t have to be static. Lots of brands, like fivefootsix, feature animated hero images on their homepages.
An animated hero image might be the right choice for you if your brand is dynamic, whimsical or fun. If you’re an animator or a creative agency that offers or specializes in animation, this kind of hero image is most likely a no-brainer for you. Similarly, if you’re a videographer or video is otherwise a key part of your offerings, a live video could be the perfect hero image to captivate your website’s visitors.
But here’s what can make an animated hero image tough: animations can slow down websites’ loading times. A slower-loading website is a website with a higher bounce rate and a lower search engine ranking. But how much an animation slows down your website depends on a few factors, and if you can keep this slowing to a minimum, an animated hero image’s benefit can outweigh its drawbacks.
One way to keep an animation from slowing your page down is to create it with CSS instead of Javascript. You can also speed the page up by eliminating any simultaneous animations and/or delay the animation by a fraction of a second. With this second strategy, you’re giving the rest of the page enough time to use the browser’s power to load without keeping your viewers waiting.
If your animation is a gif, you can also compress the file to optimize it and your page’s load time.
A clear CTA
A call to action (CTA) is the bit of text, often on a button or right near one, that tells the viewer to take a specific action. Your hero image welcomes visitors to your website and gets their journey with you started, but the journey doesn’t end there. Your hero image should make the visitor’s next step obvious, and the way to do that is a clear call to action.
As you’re designing your hero image, think about the hierarchy and balance of the design. Balance simply means laying out the imagery and text in a way that feels, well, balanced. It can’t be too close together or too far apart; it’s not bunched up on one side while the other stands stark, it’s not just slightly to the left (or right) or above (or below) the center of the image enough to make the image feel misaligned.
Hierarchy means there’s a clear progression the viewer’s eye follows and that in this progression, information is presented logically. Your viewer should read your headline first, then your subheading, then any supplemental text, then finally your call to action, and the imagery you choose should facilitate this progression.
When your hierarchy isn’t clear, readers get confused and turned off because they process the information you’ve presented in the wrong order. This might mean seeing the call to action before knowing what they’re being asked to do, reading the tagline before learning your brand’s name or even missing the headline completely.
Responsive hero image size
Today, more than half of web traffic is driven by mobile phones. That means a responsive website—and a responsive hero image—is non-negotiable if you want to connect with your target audience. Responsive design is a design that responds to the user and usually, this phrase refers to web designs that adapt to the devices they’re displayed on.
When choosing a website hero image, be sure to test what it will look like on different screens. Are any crucial parts of the image cut off? Are any details or copy hard to see/read? Your hero image needs to retain its effectiveness and communicate the same message no matter the device your visitor uses.
When you work with a hero image designer, work with somebody who’s experienced in creating responsive images and can create hero images for different screen sizes.
Setting the tone for the rest of the website
On average, a visitor spends less than 15 seconds on a website before leaving, or “bouncing,” as it’s known in analytics jargon. 15 seconds is rarely long enough to interact with your site in any meaningful way. That’s why it’s so important that your hero image hooks visitors’ attention and communicates to them, instantly, that your website and your brand as a whole are exactly what they’re looking for.
This is step one in your visitors’ journey through your website. Design related to this journey is known as user experience (UX) design. Effective UX design takes a website visitor by the hand and guides them through the website to a logical conclusion, making the visitor feel like every step of the journey was logical and followed a natural progression. When you work with a UX designer to create your website, hero image placement will be part of the design plan.
Designing the right website hero image for your brand
As mentioned above, your website hero image plays an important role: getting the conversation between your website and its visitor started. Think of it as a beacon for your brand. If it doesn’t match your brand aesthetic, accurately depict your brand’s personality or make promises that the rest of the website can keep, visitors won’t put much trust in your brand.
Start designing your hero image by referring to your brand identity. Why did you choose the colors, shapes, fonts, and overall aesthetic style you originally chose? Look to those design choices for inspiration for your hero image. As you work with your brand identity to determine the right direction for your hero image, conduct market research as well.
The market research also involves testing different hero images. One common way to test hero images, as well as other aspects of web design, is to do A/B testing. With A/B testing, you make it so half of your website’s visitors see one version of your homepage and half see another. Then you can analyze the bounce rates, click rates, and other statistics for each version and determine which resonates better with your audience.
Save the day with amazing hero image design
Going for anything less than the best hero image possible can mean shorter visits, fewer clicks, less engagement and fewer conversions. Don’t hinder your brand’s success by using a low-quality or poorly branded hero image on your website. Work with an experienced web designer to create the perfect website hero image for your brand.
Article Provided By 99 Designs
If you would like to discuss Your Logo with Mojoe.net or your website’s analytics, custom logo designs, social media, website, web application, need custom programming, or IT consultant, please do not hesitate to call us at 864-859-9848 or you can email us at dwerne@mojoe.net.
Recent Comments