A hero banner is a large banner prominently placed at the top of a website. It’s the first element users see when visiting a site and will heavily impact their first impression. For this reason, it’s important that banners are crafted to have the desired positive effect. This article from UX Planet lists eight tips on the best practices for using hero images. The key things to remember are: use high quality, interesting and relevant images, and ensure text and call to actions are clear and visible.

With this information in mind and my own experience as a digital developer, I’ve put together some tips, split into the three key elements that make a hero: Image, call to action, and copy.

Image

When selecting an image, be sure that it’s high definition and that it’ll crop or scale well on different screens. Consider using an illustration as well as a photo, since an illustration can give you more personality and control over your image. However, the most important tip for selecting an image is that it’s relevant and that it creates emotional impact.

According to Conversion XL, there are only four types of hero images:

• Product shots
• Contextual images that complement the message or create clarity
• Famous founders
• Non-contextual images, essentially random images that looks cool and trendy

Consider each one of these carefully and be sure to use the right one for your brand, and avoid non-contextual images.

Call to action

The call to action should be emphasised and stand out. To achieve this, you should use a well contrasted colour and a strong font. The wording of the call to action should be clear and give a strong indication of what clicking it will achieve. For example, ‘click here now’ doesn’t work at all, whereas ‘sign up now’ gives a clear idea of what’s going to happen next.

Text

Copy should be short to increase the chances of users reading it and avoids mobile screens from being overloaded. The banner copy should also communicate the key message clearly and effortlessly. Finally, the copy should use keywords that contribute to search engine optimisation.

Lastly, from a visual point of view, it’s important for the text to be in an eligible font and to be well contrasted against the background so it’s easily readable and attention grabbing.