Designing a Hero that works

posted on 27 / 05 / 19


A hero within web design is the large image that is often located directly below the navigation bar and above the fold. It is essentially the part of the website users see first when a webpage loads. According to Time, the average reader or in this case user loses interest in 15 seconds or less. This can cause high bounce rates if your website does not generate interest in this time frame.

 

Therefore, it is essential the hero is impactful, captivating and a clear representation of your brand, product or service. In order to design a hero that works, there are several components to consider, however, hero design is very much dependent on your brand identity, target audience and the product or service you are offering.

 

Static vs Dynamic:

The choice between a static or dynamic hero can be dependent on your target audience, however, both have their advantages. A static image can be quick to deliver a message or lead users to their desired destination. Photographs or illustrations can bring a sense of personality to your webpage and create a certain tone surrounding your brand. Photography, in particular, can create a humanising and emotional tone for your web page. Video, on the other hand, can quickly engage your visitor by eliminating the need to read information. It can offer an exciting alternative ideal for a younger crowd. However, according to Conversion XL, sliders are not recommended as a hero feature. This can present several issues such as an overload of information, unfocused messaging and can often be confused with advertisements.

 

Regardless of which format you choose, it is essential all images and videos are high resolution. It is the first impression your client base will get of your company and it is key to seem professional and demonstrate your digital skills for an audience becoming more expectant of this from companies.

 

Hierarchy of Information:

The hero presents an opportunity to arrange the information on your website in terms of importance for the user. Call to actions and directional cues to support more convenient navigation are ideal additions to your hero banner. The aspects you foreground may be entirely dependent on the purpose of your website. Consider the key reason users visit your website (contact information, purchasing a product, signing up to a newsletter) and from this, you can assess what users would benefit from being included in the hero. It is worth noting that if what users are looking for is not immediately available, they may leave.

 

As an example, Abbey Masterbatch’s website hero includes an image of paint splatter and information about products. The website foregrounds this information as their extensive product range is seen as a key value for consumers. Users are able to quickly assess whether Abbey Masterbatch has the products to meet their requirements before losing interest. On the other hand, Connect Insolvency not only informs the user of the service they provide but foregrounds the value of their service when stating, ‘Making Insolvency Easier’. Highlighting why their service, in particular, is better than competitors is effective in immediately captivating interest.

 

Balance:

When designing your hero banner, it is imperative you remain focused on your messaging. As stated previously a hero can help establish a hierarchy of information. Although you may feel every aspect of your company is worth highlighting, it is recommended to only place the most valuable information in the hero. However, this has to work in unison with any imagery used. Design techniques such as colour overlay, gradients and bold buttons can help to create a hero which doesn’t appear too cluttered.

 

Final Thoughts

The hero is an opportunity to capture your brand’s core values, identity, personality and deliver your values with one click. The better the quality of your hero the more likely you are to engage with users and encourage them to explore the rest of your website, improving the conversion rate.