The Hero section plays a key role in a website’s design. It’s the first thing users see in a website they land on. It’s the starting point of a curious exploration or some quick skimming of a website.
But what gives a Hero image the power to make or break a website?
What’s the role of a Hero image in a website?
The Hero image is the first (and prominent) element users see when they come to a website. So, due to its positioning and size, the Hero image is more than just a design item among others, it’s a powerful communication tool.
We’ll see some examples of websites where the HERO image makes that website a success. And which drives to the intended goals.
So, in a few words, a Hero image:
- Captures users’ attention
- Involves emotionally persuasive items that get people engaged with the website content
- Welcomes visitors with a message that’s tightly related to the brand personality
- It sums up what the website is all about
- The image announces what content will be displayed to visitors in the sections below
- It showcases the unique value proposition of the company
What exactly is a Hero?
Let’s see what exactly a Hero is, and what it contains.
A website Hero is the introductory image in the upper part of a website pages. It usually refers to an image, but it’s also connected with text (title, subtitle and call-to-action). In arranging the elements into this part of the website pages, you have to consider some best practices for website HERO images.
Top 10 hero images in successful websites
In the following lines, we’ll make a list of the top 15 most attractive Hero sections in websites:
This Hero is in line with the theme of the website: Nordic destinations. It shows images in a carousel, one slide for each destination included in the 66Nord offers. The images are relevant and expressive, and they invite to further exploration of the website. They’re a quick summary of the company’s selection of destinations that are worth being considered for a trip. The text (title and subtitle) is centered, concentrating attention towards the main message. Also, at the bottom of those HERO images, a search bar invites readers to launch a search for the type of trip they want.
This is a more unusual Hero, with little to no text applied on top of it. All text is represented by a short menu and a logo of the company. In the lower part of the Hero, the list of social share icons makes it possible to spread the word about Poco People. The Hero is simple, yet powerful, and it leaves a lasting impression upon readers. It welcomes users with an out-of-the-ordinary image, while it implies a brand personality that’s hard to be forgotten. The colors are in line with the brand and logo, and they create the perfect contrast between image and the bit of text that’s placed on it.
This Hero is suggestive of the restaurant website. It also includes texture, that gives a particular feel to this upper section in the page. It seems to be expressly created to increase orders and reservations at the restaurant. All the other content in the website is developed in accordance with the HERO image, and it is deemed to increase conversions.
The text includes the brand name and a short informative subtitle that’s useful for people who want to try the Michi Ramen experience.
This pizzeria “shows off” its products: wood fired pizza, which is eloquently rendered in the HERO of the website, by a fire in the background. The text creates good contrast with the background image, and the CTA is clearly defined into the page, as inviting to click on the link.
Another stunning Hero image is that of Tom Cole Architect website. It’s rendered as a window towards a specific landscape, all by bringing to the front architecture and design. The color scheme is created so that it gives contrast as compared to the text. Text is what drives users’ attention to the message of the website and down to other sections in the website pages. The Tom Cole Architect Hero image is an impressing one, with great persuasive force. The logo occupies the central part of the HERO, focusing attention upon the brand and its iconic representation.
This HERO image features a flowers bouquet in lively colors. It brings special gifts to the attention of potential buyers, in an enticing manner. When being welcomed in website with such a bouquet, you cannot but buy some flowers. With online delivery. The text accompanying the image is only a simple summary of the company offers. It’s accompanied by a CTA that invites you to shop from the website. It has strongly visible colors, that are easy to notice from the very beginning, from the very first visit to the website. One click, and you turn the main image into a real bouquet…
This hero image belongs to a constructions website, as expected. It relevantly speaks about residential buildings, and the way they are built according to a plan. The text at the center of the HERO image focuses attention onto a striking message: the residential complex is being built together with buyers, not for them. That way, constructions services are customized according to people’s needs. The home of their dreams becomes a reality once it’s being built together with the Harper construction company.
This Hero involves a carousel of images, all related to Prince Hotels and Resorts. The color schemes position the brand as a luxury one, from the very beginning. They transmit wellness and comfort, and convey the power of the brand. Some slides involve a certain luminosity, that’s all the more exquisite as it falls over a luxury aspect of the hotel in the photo. The text is marked in white, creating clear contrast with the dark shiny brown in the image background. Viewing this Hero image gives a lasting impression of comfort, luxury and well-being that’s hard to resist to.
Another Hero image that belongs to a pet clinic: the image inspires trust in their care for animals, and the professionalism of the pet clinic services. Only, the central message is not visible enough to create the intended effect upon readers. Anyway, the message is continued in the lower part of the Hero image, where visitors have details about the clinic services. The color scheme uses neutral hues, as compared with those in the Hero image. Thus, the Hero image fulfils its role, and it emotionally connects users with the company (the pet clinic).
As compared with the previous examples, this one focuses more on text than the image in the website Hero. It’s a business site (an SEO company, to be clearer), so it addresses more to the logic of users than their feelings. It’s designed to convince, both through the image and the text, which largely explains why it’s a good idea to choose Woorank. In the Hero section of the website, text is marked in white, which contrasts with the blue of the background image. The design is minimalist, implying analysis with Woorank is laser-focused onto companies’ surpassing their competition.
What makes the examples above a good basis for crafting your own hero image?
There are 4 distinct types of hero images:
- Product images
- Contextual images
- Non-contextual images
Example no. 1 has a contextual image as Hero image for the website.
Example no. 6 has a product image as Hero image for florists.com.
Example no. 2 uses a non-contextual image for the website Hero. It can also be relevant for a Hero that features its author in the first image of the website.
Depending on what type of Hero image is deemed appropriate for your website, you can further nail down your search for best practices related to that HERO type.
Best practices for product images in the Hero of a website
If you decide a product image works at its best in the Hero of your website, here’s a list of what to consider for that image:
- The image should be clear enough for people to see the product in its details
- The image should bring to light the high quality of that product (in our example above, flowers are fresh and in vivid colors)
- The image should be clear (not blurred or pixelated)
- The image should be accompanied by a salient CTA (if you feature your product right in the website Hero, it’s needless to say, you want people to buy it)
- The product should be presented as if users cannot miss its benefits
- The product image should be customized to represent your company (it’s recommended you use a unique image of your own)
Example you can customize for yourself:
Best practices for contextual images in a website Hero
In case a contextual image is the best fit for your website Hero, you should take these best practices into consideration:
- The image should engage readers and have relevance for them at an emotional level
- The image should be clear, giving exactly the context you want to add to your message
- The selected image should bring to front the advantages of your company’s services, or those of subscribing to particular services (depending on the website’s niche)
- You should select the image carefully, so it should be relevant and meaningful for the whole website
- The contextual image should perfectly integrate into the company’s brand identity and eloquently express that brand identity
Example you can customize for yourself:
Best practices for non-contextual images/illustrations in a website Hero
In the case a non-contextual image, you can think of including an out-of-the-ordinary image or some illustrations.
Take a look at the best practices you need to know when inserting a non-contextual image/illustration to your website Hero:
- You can feel free to experiment with illustrations
- Make sure the illustrations are visible enough through graphics and colors, so they cannot be missed by users
- Ensure that an illustration you’ve selected is easy to connect with the main text of the website Hero, so there’s no disruption in transmitting the message to users
- You might feel free to include elements that appeal to readers at an emotional level
- Be innovative enough to capture users’ attention with the illustration
- Create a coherence between the illustration and the whole design of the website Hero (e.g. through color scheme)
Here’s an example you can try to customize for yourself:
Best practices for author photos in a website Hero
In some cases, such as portfolio websites or resume websites, it might be fit to insert a photo of the author into the site Hero.
Best practices in this case:
- The photo should be clear, and have optimal size for a Hero image
- The photo should show a smiling person, and a trusting one
- The background should serve only to better bring to the forefront the person in the photo
- The description in the resume/portfolio website should follow immediately after the Hero, so, there’s no disconnection between the person’s photo and the description of their skills
Example (from a resume site) you can customize with your own photo:
Generic principles that ensure your Hero image is appropriate for your website
For all of the Hero types above, there’s a short list of principles you should take into consideration for designing the perfect Hero of a new website:
- Make sure to use high-quality images (images that are blurred or pixelated are not a good choice – they prove lack of professionalism and don’t contribute to building users’ trust).
- Ensure your Hero image is displayed well on all devices (desktop and mobile devices), without any changes in the image quality.
- You can test with different versions of Hero images, to see which one converts best. A/B testing might help you find the best choice for your website Hero, and guarantees maximal efficiency of the Hero image.
- Use accompanying text (title and tagline) that suits the Hero section of your website, and the image you’ve selected.
- Use prominent calls-to-action. The message that welcomes visitors should drive to some action from their part: include a visible Call-to-Action button that makes users take the action you want them to take.
- Design the Hero with contrast between text and the background image, so that the text should be visible enough and easy to read. If the contrast you create by choosing a certain color for the text is not enough, you can also modify the image (e.g. apply an overlay to it).
- Design with authenticity in mind: the Hero image should be representative of the brand, in a credible way.
- The text should include the unique value proposition for the company in a few concise words.
- Avoid stock photos, they’re not suited for authenticity and trust. It’s recommended you insert your own image in the Hero section of the website, this will increase authentic communication with readers.
Now, once you’ve got acquainted with the generic principles for Hero sections in websites, you can go back to the top 10 successful Hero sections we listed in the first part of the article. Try to understand what principles they observe, and what exactly makes them convert. Then, apply the same rules to your own Hero, and see what results you get.
Take a look at the techniques used for this website Hero:
The example shows contrast at its best. In fact, the design went monochrome, and created a special Hero for the Jonesssnowboards.com website.
In fact, this is the first slide in a series of special slides all contributing to raising interest in the website’s content. They announce valuable content users cannot miss. This is already visible through the synergy between text and images (see the role the logo plays in building the text message, in the first slide of the Hero section).
If you want to use a technique at its best, it’s time to review the rules that make a good Hero section and select the one you think you can perfectly master. Then go one step further, and use that rule for excellence in designing your Hero section.
It’s a wrap
If you want some inspiration for your website Hero, please refer to the 10 examples above that boost conversions. One element or another will serve you well in unlocking your design capabilities and customizing your Hero as you wish.
For more guidelines on how to create your own Hero, and websites where you can replace a default Hero with your own, you can refer to the sections related to best practices for the type of Hero you’ve chosen for your website.
Regardless of your method in crafting the perfect Hero section for your website, you should test two or more variants and see which works best. In this way, you maximize conversions and make sure your message is well perceived by the users you’re targeting.