Click on almost any website these days, and you're likely to see a hero banner. No, this doesn't mean images of capes and hammers and a collection of super cool gadgets, but the idea is kind of the same. The hero banner is one of the first things that visitors see on your website, and when done well, it's intriguing enough to keep them on the site and get them to do something — or better yet, buy something.
Some people consider their home page to be a hero banner, but that's not technically correct. In some cases, a landing page can be a hero banner, but if the banner is on the home page, it's only a part of the page. Unlike a typical homepage, which may be packed with information and links, a hero banner is generally focused on one specific call to action.
Your homepage will likely have contact information, links to social media, primary and secondary calls to action, logos, and links to other pages on the site – all of which are important – but the hero banner is strictly focused on one key message. It leads visitors to another part of your site, perhaps your homepage or another landing page, according to your site's primary purpose.
Hero images have become so popular because they pop. They add interest to your site without a lot of clutter, while helping express your key messages and establish your brand. And unlike carousel images, they don't hide content on your site. Users don't have to go searching for the banner they just saw or wait for the carousel to come back around.
Your key content is located front and center — right where it needs to be. And thanks to easy-to-use banner maker tools, they aren't difficult to add to your site.
The Qualities of a Great Hero Banner
When you think of the qualities of a hero, you probably come up with traits like honesty, bravery, strength, and maybe even good looking. When it comes to hero banners for your website, that last quality is one of the most important, since the entire idea behind a hero banner is to attract attention.
Because hero banners are designed to be big, bold, and attention-getting, they rely heavily on imagery. Often, the banner includes a striking photograph that compliments the brand; a restaurant, for example, might build a hero banner around images of food or a stunning dining room, while a clothing designer might use a photo of a model in the latest styles.
However, the images don't necessarily have to be photographs. Animated drawings or even typography have been used to great effect in a hero banner.
Beyond imagery, your hero banner must have great content. What that is depends on the purpose of your hero banner. Do you want visitors to do something (buy, request more information, contact you, etc.) or are you just building your brand? The answer to that questions will determine the actual content of the banner, but as you develop the content, keep a few key points in mind:
- Stick to one key message. Focus on your unique selling point, what it is that visitors can gain from doing business with you.
- Embed the response mechanism into the banner. This could be a form, a search engine, or a special offer link.
- Include the ability to navigate to other parts of the site directly should they not want to respond to the call to action, or if you don't have a CTA. Once you've determined the purpose of your hero banner and what you want it to say, it's time to focus on the design.
Designing Your Banner
While the most common style of hero banner is the large header: An image or animation with text, and a response button when required. Other styles of hero banners include the full screen image, rotating image galleries, and featured content banners. The style you choose depends largely on the overall design of your site and your ultimate goal, but all can be effective.
Obviously, choosing a great image is important — this isn't the time for blurry or boring photos — but how you design the text can also make a difference. In general, if you follow a few general principles of typography when you design your banner, it will be attractive and effective.
- Create bold headlines. Ideally, a heavy-weight, sans serif font works best for headlines, especially short ones. Be sure to create plenty of space between individual letters to allow the headline to take up plenty of space.
- Use a serif or cursive font for subtitles. Combining serif with sans serif fonts is Design 101, but it works. Pair your headline font with something subtle to draw attention to your text.
- Change the color of some of the words. Highlight key words in your headline by changing them to a contrasting color.
- Use thin fonts for long headlines. If you have a longer headline or more text, use a thinner, taller font to avoid making it look too heavy and hard to read.
When you create your hero banner, think about it like the Avengers: Several different strengths coming together for one powerful team. With images and text, your banner can be a big part of meeting your website goals.