Hero Images On Websites – Difference Trends

At least since I have been making websites, hero images or hero scenes have been very popular and are genuinely a good fit for corporate or professional styled websites.

What is Hero Content?

I am not even sure if ‘Hero content’ is an actual thing but use ‘Hero Content’ to group both hero images and hero scenes together. Now, this article mainly focuses on hero images but the position of the hero content is important to understand before reading on.

Just like everything in the design world, there is a design name for a way of doing things. “Hero” really comes from the movie industry where there would be a hero shot of the male lead standing next to his car as the camera zooms or pans passed him, making a real impact on the audience. This is pretty much, what hero content is when it comes to a website.

Aaron Coventry, Canberra's beloved Web Designer explains hero images.The Location

Hero content is usually placed in the header, which is the top part of the website, basically, the first thing you see when you land on a website. You can have the menu overlayed on top of the image, or just on top of it or even below it but fundamentally the hero content is the first thing you see on the page. Because of its location, the hero content should give the audience pretty much all the little bits of information that it requires before they even scroll or go to the next page – it should contain;
1. The logo
2. A Slogan, Company Name or something that they instantly recognized that they have clicked on the right page. Example: “The Design Wizard”
3. Enough content for them to understand quickly what the website is all about. Example: “Canberra’s very own website designer”
4. Action to move forward. Example: A Button, indications to scroll etc

Different Hero Image Styles

As promised this is about the hero image, so below are list of hero image examples that follow popular trends;

The Full page Carousel (or slider)

This makes a huge impact to audiences as they land on the page because … its full screen. The Beautiful imagery would make or break this style but as you can see from the example below they have enough provided enough information for the audience to know what to do next (button) along with what the website is about (excuse the lipsum).

Azza.io explains the fullpage hero image web design.

Half Page Hero

As you can see that it only really covers half the screen which provides the benefit of display content on the bottom half of the screen which allows the audience to already start consuming the content without clicking or scrolling.

Azza.io breaks down different hero images used when designing websitesFeatured Hero

Another common Hero Style is the Featured Content or Featured Image style which incorporates a more ‘magazine’ design. It is mostly used on blog posts or articles which again provides a beautiful image that is applicable to the content but also allows the audience to start reading or consuming the content without really doing much. Example:

Azza.io explains a little further the basic use of hero images when designing a websiteIf your not sure which Hero design would suit your website then feel free to reach out to me, Imma friendly dude.