The pros and cons of hero graphics

Designing a website that will make an impact on its viewers can be tricky. There are lots of ways to capture attention and engage your audience, and choosing the best method for your website can be a challenge. One increasingly popular attention-grabber is the hero graphic.

Designing a website that will make an impact on its viewers can be tricky. There are lots of ways to capture attention and engage your audience, and choosing the best method for your website can be a challenge. One increasingly popular attention-grabber is the hero graphic.

Examples

Pros & cons of hero graphics

As with any design element, the hero area has its pros and cons. Here are some things to take into consideration:

Hero graphic pros

• Focus viewer attention. A hero graphic creates one large focal point. This allows users to focus in on and connect with that particular piece of content, as opposed to multiple content areas competing for their attention. This makes hero areas great for displaying a call to action.
• Make a first impression. A hero area should contain a meaningful message. This will generally be the first bit of content a user encounters on your site and associates with your business.
• Encourage users to view more. A well-designed hero graphic will capture the attention of users. Once you’ve generated interest, users will be more likely to browse further into your site to find out more about your business.
• Flexible content. Hero graphics are a flexible design element. They can be used to put the focus on your most important content, whether that’s a marketing message, advertisement, or featured product.

Hero graphic cons

• Takes up space. Most hero areas are very large, taking up a good amount of screen real estate. This can be an issue if it would be pushing down important content that users need to find quickly.
• Hides additional content. Depending on how large your hero area is, it may be unclear to users that there is additional content below.
• Not as impactful for mobile devices. Another downside is that if your website is responsive, once your hero graphic is taken down to a size fit for mobile, it may lose it’s visual impact.
• Large loading time. If you’re using a large banner image in your hero area, this could increase the loading time of your site.

Want more hero graphic inspiration? Check out some creative examples in our unique hero graphic showcase.

TBH Creative can help you evaluate which trends are most appropriate for your audience, and avoid these possible downfalls if a hero graphic is selected to communicate your message.