How a website is designed directly influences how a user feels about the brand behind the site. Using a hero image on your site can help to establish trust among new visitors and and even convert them into customers, by helping them buy in to your site’s concept. We are going to look at 5 great examples together that I think will give you inspiration of how to make the most of large banners on your website.
What Is A Hero Image?
A hero image is a website design term used to describe an oversized banner image at the top of a website. Sometimes called a “hero header”, it serves as a user’s first glimpse of your company and offering because of its prominent placement towards the top of a webpage that usually extends full-width. In addition to a high-resolution graphic, a hero image can contain your company’s unique selling point (USP) and a conversion goal, such as a signup form or button to begin shopping. A recent web design trend has been to use videos and animations for the hero image rather than static photos.
Why Use A Hero Image?
A hero image, usually a high quality photo or video, can be a good way to add a personal touch that immediately builds credibility and trust for your brand. Because people are highly visual, having high quality, fullscreen imagery at the top of your page can help create a positive first impression. A hero image can also serve to direct users towards a desired link or call-to-action, or present your business’s value proposition at the top of the web page. Hero images on media sites and blogs can also be used to catch the visitor’s attention, and draw them into reading the article on the page.
— Optipedia Optimization Glossary
1. The product-first background
When a product is already well-know, it’s a great oppotunity to let the product shine and use product as the hero image. Apple is such an example.
2. The hero background video
“Watching a simple moment in motion can create a tremendous impact on how users will perceive and engage with your brand.” — Jason Beever
Video is a great way to keep users engaged and attract users buy into the message that the website tries to deliver. Müller website uses such design to help visitors visualize and connect with the brand.
3. The Call-to-Action design
A CTA design can be used along hero image or video. Designers usually need to pay attention to the visual harmony between the image and the CTA button.
There are lots of amazing examples out there. I would love to hear what trend inspire you!