Home > UX and Prototyping > 10 inspiring hero image websites
10 examples of hero image website inspiration to boost your conversion rates and impress your users

10 examples of hero image website inspiration to boost your conversion rates and impress your users

The hero image trend in web design is still going strong. Don’t believe us? Just take a look at the top-half of this page.

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 even convert them into customers, by helping them buy in to your site’s concept.

Sounds great. But what makes a n awesome hero image website? That’s what you’re about to find out!

Today Justinmind is going to show you how to make the most of large web banners, looking at 10 inspiring examples. So read on if you want to know the secrets to designing beautiful and persuasive hero image websites.

What is a hero image website?

A hero image is a large or oversized web banner image that is pinned to the header section of a webpage, usually towards the top of the page. Because of its prominent place in the site’s visual hierarchy, the hero header is often the first thing users see when arriving on a website.

hero-image-website-visual-hierarchy

Often lending context to a specific feature or content block, it’s important that the hero header is positioned in close proximity to the content that it relates to. It’s usually placed as a background layer underneath the header text or above the content block it corresponds to.

Why should you use a hero image on your website?

As Conversion Xl reminds us, it only takes 50 milliseconds for users to form an opinion about a website. That’s why you need to make sure that your site is easy to read, clear and delightful. Using a hero image is a good way to ensure users can identify with and relate to your site.

Large, oversized images grab the user’s attention as soon as they land on a page. They also help users identify the brand’s unique selling point (USP) and form an opinion about the brand as soon as the page loads. Many web designers create hero images using photos of real human faces. This helps designers to personify users, as well as enable users relate to the brand, according to Webflow.

And in an attempt to create more personalized experiences for web users, some designers opt for animated hero images (using videos, sliders or carousels). This helps draw users in as soon as they arrive on the site’s homepage, and makes the experience feel more crafted. Here’s an example.

With all the benefits of hero image websites, it’s no wonder they have become such a popular web design trend. Next we’ll take a look our favorite hero image examples, including some interactive headers!

10 awesome hero image websites to get your creative juices flowing

#1 Hero image website: the interactive carousel

Surfrider Foundation is a site dedicated to the protection and enjoyment of the world’s oceans, waves and beaches through an activist network. As soon as you land on the homepage, you’re immediately brought up to speed regarding the foundation’s mission statement, activities and news – all thanks to the interactive carousel header.

10-hero-image-website-ideas-to-inspire-you-1

The carousel flicks automatically through four slides, each containing a full-width hero image and header text. The combination of large images, clear type and simple slide effects focuses your attention on the most important and current information about the foundation, without having to click anywhere. You can also flick through the information at your own pace too, using the left and right arrows on the sides of the carousel. Learn more about designing with carousels here.

#2 Hero image website: the super gradient

Gradients are making a comeback, according to Smashing Magazine. We’re seeing more and more multi-tone effects on website homepages, particularly in large, hero headers. Take this example for instance:

10-hero-image-website-ideas-to-inspire-you-2

Creating gradients involves the gradual blending or transitioning between colors, mimicking distance from or proximity to a light source. In big header design, it’s common to use super gradients, which transition between two or more colors (like in our example above).

Gradients allow web designers to make more colors available by creating more color tones. According to UX Planet, they help to make a bold statement, create a mood and channel user emotions, and make the on-screen elements they’re combined with more memorable. Perfect for hero image websites.

#3 Hero image website: the hero background video

Using video is a great way to create dynamic headers that attract and keep users engaged. As Jason Beever from How To Get Online tells it: “Watching a simple moment in motion can create a tremendous impact on how users will perceive and engage with your brand.”

In fact, statistics shared by Forbes show that embedding a hero background video can help boost your conversion rates by 80% and influence a customer’s purchasing decision by 90%.

In the below example, property development company Ditto Residential uses a series of full-width video clips in their hero area. The header reads “Building places that inspire”, and the video clips show instances of home and office life, with some very content dwellers. Here, video is a way to demonstrate the product, allowing visitors to visualize what it might be like to live or work in these types of properties.

10-hero-image-website-ideas-to-inspire-you-3

#4 Hero image website: stunning typography

The right use of type can make your hero images explosive. Take a look at this example:

10-hero-image-website-ideas-to-inspire-you-4

Although brightly-colored, the text “HAIRCUTS” doesn’t overpower the image, nor does it fade into the background. Placed directly above the body of the image (the busiest part of the image), it adds depth to the visuals below, and draws the user’s eye to the center of the screen. Now that’s teamwork.

#5 Hero image website: the product-first background

Sometimes the hero image makes the website. When a product is well-known, or when visitors know what they’ve come to your site for, it’s the hero’s time to shine.

Product-first hero images are images that show off a particular feature or top-selling product – much like Apple does:

10-hero-image-website-ideas-to-inspire-you-5

Apple tends to use “chromeless” images. These images aren’t full screen, but are borderless and have a clear background. They are either fixed in position or float to a specific location on the page. Backgrounds tend to be white, with contrasted, near-black header text to accompany.


Prototype visually stunning hero image websites with designers’ favorite tool

DOWNLOAD FREE


#6 Hero image website: graphics and illustrations

Most hero images you’ll see online are photographs. However, another approach to consider is using illustrations. Colorful, textured illustrations help to explain a theme or establish a motif as well decorate your hero space. And as Nick Babich explains, they give you more control over image specifications.

10-hero-image-website-ideas-to-inspire-you-6

In this example, the illustration provides visual reference to what the site offers in order to help the user buy in on the concept.

#7 Hero image website: the CTA

Often, the hero header will contain a Call-to-Action (CTA). When this is the case, it’s important to have visual harmony between the hero image, the content and the CTA button.

When content is placed on top of the hero image, designers usually adjust the contrast of the image. This is to ensure that the content is readable and the CTA button is located and used.

10-hero-image-website-ideas-to-inspire-you-7

In this example by Kindeo, the hero image lends design support by enhancing the user flow leading to the CTA button, which is placed front and center. The image has been darkened so that it simply complements the white text and light-green CTA button on top. Darken your photos, lighten your type – that’s the trick!

#8 Hero image website: experiment with texture

Anyone who’s into their Instagram filters will love this tip: texture. Texture is the best way to give a flat photo some depth, warmth and feeling. If you intend for your hero image to take center stage or differentiate it from other elements on the page, texture is the way to go.

Take a look at this example:

10-hero-image-website-ideas-to-inspire-you-8

We love the use of crashing waves beneath the header text, the granular texture of the sand, and brush strokes in this big background image. What a great way to introduce visitors to a beach resort website.

Learn more about designing the perfect image for your hero header here.

#9 Hero image website: the flowing full bleed hero

This is another example of an interactive hero image. Heco Partners, a Chicago-based design agency promise to “turn information into experiences that people care about”. When you arrive on their Homepage, these are the words you’re met with, above a rolling wave.

10-hero-image-website-ideas-to-inspire-you-9

This full bleed hero not only flows upon loading the page, but as you scroll down, you’ll see scroll-triggered parallax effects. Pretty cool! Learn more about designing with parallax here.

#10 Hero image website: think about space and layout

This one’s simple but effective: space. You can’t design your hero image without thinking about space. Space is what gives your design room to breathe, as well as create emphasis.

To make the content in your hero area stand out, set a margin on all sides of the canvas and center your content on top of the hero image. Just like that your visitors will automatically be drawn to the center of the hero, right where you want them to look. Told you it was simple!

10-hero-image-website-ideas-to-inspire-you-10

Learn more about designing with space in this post.

Designing hero image websites – the takeaway

Including a hero header in your website can be a great way to focus the user’s attention as soon as they land on your website. Large and oversized web banners come to life on screen and can help your users make sense of your content.

To take advantage of this web design trend, it’s important to take hero design best practices into account. We hope these ten examples have you given you some insight into what a strong hero image design looks like.

Now it’s time to create your own. We don’t mean to toot our own horn, but we think Justinmind is the best tool around for creating hero banners. If you haven’t tried us out, remember you can free here!download_free

Emily is Marketing Content Editor at Justinmind

2 comments

Your email address will not be published. Required fields are marked *

  • All of the sample website are great examples of why the hero background works so well, but we do need to proceed with some caution. This has to do with google and SEO, as we all know loading time is taken in consideration when I website is ranked, as such the video version of the hero background takes longer because it has to call the resources. Some websites use YouTube to host their video and other opto hosting the video file in the server. Either way your website takes longer to load which might affect your SEO. Great read though, thanks for the article

Download Free