Hero Banners

A hero banner, or hero image, is a large banner image placed prominently on a web page. With the rise in responsive design these kind of banners have become even more popular, because a responsive design allows the banner to be full width and therefore even more prominant than in a non-responsive design.

Often these banners can cover the entire screen of the home page of a site.  They can also have content embedded within them, from simple text headlines to input forms. We love hero banners at Webfuel, as they can generate a real impact on visitors from the second they arrive on a website.

An impactful landing page is a vital component of any website. Research has shown that the first few seconds on a website are crucial in grabbing the attention of visitors. Most visitors leave websites with the first 20 seconds of a visit.  So making sure you present something visually stunning to grab those visitors in that initial glance is key to reducing your bounce rate.

So what makes a good hero banner and an impactful landing page experience? Here's what we think:

1. Grab your visitors attention. This is key of course. The landing page should be visually appealing so visitors want to look around.
2. Push your USPs. Once you have their attention you need to keep it. So put your business USPs front and centre within the hero banner. Animated text, or messages woven into the image are great for keeping that visitor for the first vital 20 seconds.
3. Navigation. One common failing with hero banners is that they obscure or hide the site navigation. It has to remain clear to the visitor how to navigate around  the site.
4. Other functionality. A hero banner takes up a lot of space so there should be room for sneaking in some other functionality. Social media, customer service and sign-in areas should be artfully woven into the landing page experience.

 If your site's landing page experience is looking a bit dated then why not speak to Webfuel about having a redesign based around a stunning hero banner?