Why hero Images are as popular as superheroes - List of reasons

The main concept is to use a large full screen background image as a focus, then select proper color contours that blends in nicely into the layout. The technique to make the background outstanding is the “oversized” header design, to portrait the bread and butter concept (as small headings are almost unlocatable at any corner).

The advantage of applying such concept is that it is usable in single page designs with ease. Even when there is more than one section in a page, careful contour selection can allow viewers to differentiate between sections of the content.

Figure 1: Hero Image Design

From Figure 1, notice the huge header compared to an article write-up style, next focus on the top and bottom of the picture. You will notice that these sections have been styled up using contour. Lastly, look at the position of the navigation part. It is placed under the title, where people can notice after glancing from top-to-bottom. This makes the viewer able to understand the main concept of the website even without the navigation part of it.However, it is sometimes best to use an illustrated picture when we are presenting charts of possibilities (such as stock market), and even graphic purposes (a picture of Tom and Jerry to capture the children’s attention. For example, the August service design below.

Figure 2: August Service

What differs this from Figure 1 is mainly the concept of main idea of business to be brought out to the viewers. Besides that, it imposes a colorful background with slanted, cropped state. This makes creating a navigation menu almost impossible when it itself also acts as a slider 9where background transition into another one after some time). You can have a look at how August website on how they use Hero Images for their website.

Creating a navigation part with dark font text might work with this background; however it does not blend in when dark pictures come into place. Hence, the solution is to use a large-sized icon to divert the attention. Notice how icons come into our mind without words mentioning what it is? The reason is because how it stands out from the rest of the content, making the hamburger icon for menu will be the next thing for viewers to explore the website as there are possibly no other methods to navigate around.

When it comes to reading, forget all about how navigation directs the users’ attention. Look at the picture below, adapted from DIYMag. We shall agree to disagree, not everyone will have the same interest and there are different articles to capture the interest of each reader group. Still, there is one common thing about human behaviour on how human accepts a thing.

The large heading will be used to give the big picture of what the article is all about whereas the short summary will be giving an idea of what the article will be mentioning. Lastly, the picture will be used to highlight certain part of event or to capture the reader’s attention. In the end, the viewer will have a few seconds to decide whether they want to become a reader instead of a viewer.

Figure 3: Website with a playing video as a background

Next, there is a video playing behind the scenes, taking the viewer to look at the actual scene, Matter of Form. The purpose is to provide an actual culture that is happening and will continue to happen inside the company. This enables outsiders to grab the concept if they are going to deal with this company. This sort of focus is mainly targeted on business prospects.

To summarize about Hero Image, lets take a look by an article written by Brian Childers on why and how to use Hero Images on our website.

Advatages of Hero Images

1. It builds your brand
   Hero Image can easily tell a story about your brand and build your brand by just being there because a picture has a lot of meaning behind it.


2. It gives answers to customer questions
   A great example for this point is by adding information such as "100% organic" to your Hero Image so that when people visit your site, they will know that this is 100% organic product without even browsing around much.


3. It can highlight your value proposition
   With Hero Images, we can show poeple the value of the service or product that we provide to them. With Hero Images, you can show the differences of yourself from the competition.


4. To make an announcement
   Hero Images are big and gets the most visibiliy from people that visit your website. Thus, an annoucement made via Hero Image will have more exposure and people will notice about the annoucement you are trying to deliver.

Tips to use Hero Images

1. Make your visitors feel welcome
   A Hero Image can be consider the doormat of your home which is the first thing people notice when they visit your home. Hence, with a simple play in color and saturation of any photo to produce a warm and inviting Hero Image which would make people to stay longer to browse through your website.

2. Don't be afraid to add some action
   Hero Images is becoming a trend and more and more people will use it. Hence, more website will have "static" Hero Images. Thus, you can add some animation or video to your Hero Images to make it interesting but do not overdo it as a image that is too distracting will make your layout seem messy.

3. Get it going with grids
   Grid is one web design element that is getting popular these days. Don't be afraid to use both elements to create a good design for your website. A proper use of grid will help people notice what is important in your website.

4. Don't limit yourself
   Most website will also settle for Hero Images being rectangle or box-shaped but do think out of the box by desining a good Hero Image by adding shapes to it. A good hero image will attract people, so it's wise to be creative about it.

Essential Elements of Hero Images

1. Use an Eye Catching Image
   Hero Image are the first thing people notice in your websit. Make sure you use an image with high resolution and that is easily caught attention people.


2. Compelling Copy
   Make sure you have an intersting copy ready of a Hero Image to ensure that people get the message you are trying to deliver.


3. Effective Call to Action
   A simple button or link to tell people what is their next step after viewing your Hero Image. An example would be directing to somewhere about the products that is displayed in the Hero Image or a "call us" to lead them to a Contact Us page.

Source: Web Design Book of Trends 2017 by UXPin and The Long and

Arduous Epic Story of the Hero Image by Brian Childers, Foxxr