Toolkit: Web Template
Hero Banner
The hero banner area is the area of the page between the navigation and the start of your content. The hero banner is often an image, but it doesn't have to be. It serves as the starting point for your page and its contents should orient the user to the content on the rest of the page.
The overuse of image carousels and image banners in general across the entire web has led to banner blindness. In an effort to promote and help users find content, we've conditioned them to ignore it as they've learned it often isn't relevant to their goals. Even when it actually is. We highly discourage the use of carousel banners on most pages for content you want to ensure your users read or see. They come with a myriad of problems that are easily avoided by simply not using them. Even images that don't cycle through can often be ignored.
Suggested Banner Types and Styles
We suggest that you utilize the hero banner area for your level 1 heading and possibly one or two lines of content to introduce the page. Most pages can have a cohesive look across your site if a hero banner area of the same style, color, and height is used. Users will then know what to expect and how to orient themselves on a page quickly and easily.
Images can be used in place of color on this style of banner, however, it is recommended to only use images if the image serves a purpose. Making the page more visually interesting is not necessarily a valid purpose. Images should evoke emotion, convey context, reinforce content, or otherwise communicate. If they do not, they often only serve to distract, detract, and slow a page's loading time.
In some case, the text and the image do not have enough contrast. To make text legible on an image, an overlay is used to darken the image. If you do not want an overlay, you can choose to place your content in a partial overlay at the bottom of the image.
Image Only Banners
When using a single image as a banner, it is important to make sure the image content will be legible at smaller screen sizes when the image will be shrunk down. The difference from the above examples and an image only banner is that images will scale as the page gets more narrow. Jumbotrons will crop and all the content within them gets smaller. If you are going to use a full width image as your content, make sure to view it on mobile devices for legibility. If the image contains the content for your level 1 heading, wrap the image in a h1 tag and give it alt text.
Notice how this banner is very small on mobile devices, and the first line of text is no longer legible.