Three Hero Image Websites That Are Inspiring

Photo credit: Rohan Makhecha

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

Photo credit: 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!




UX Designer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Blooming: A fun way to teach pronunciation to kid — a detailed case study

¡Adelante! Team Clemente Pushes Forward

Farm Fresh: Designing for the Drake Family Farms cheese stall

The show must go on.


The 4 Creative Skills That Will Prosper in The Future

Layer 3 Explained: Digital Fashion Operating System.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yao Chen

Yao Chen

UX Designer.

More from Medium

Refactoring UI by Adam Wathan & Steve Schoger — My Summary.

The cover page of the book “Refactoring UI” by Adam Wathan and Steve Schoger

Figma Plugins For College Students

A Guide to Axure vs Sketch

Why designers should learn Flexbox while they’re learning Figma.