Design Pattern: Site Hero

Large Images & Banners

Website hero sections, also known as hero banners and hero images, are typically large, prominently placed images and text that are often times the first thing that a user sees and therefore an opportunity for web designers and content creators to communicate important messages to the user. Similar to advertisements, hero sections often times will contain targeted marketing material, visually powerful imagery, creative copywriting, and distinct calls to action (e.g. large buttons).

In web design, a hero image is a large web banner image, prominently placed on a web page, generally in the front and center. The hero image is often the first visual element a visitor encounters on the site; it presents an overview of the site’s most important content. A hero image often consists of image and text, and can be static or dynamic (e.g. a rotating list of images and/or topics).
The content presented varies with the purpose of the site: it can be relevant news about the site, specific site-links, or—in the case of e-commerce—the best-selling or strategically placed products or services.
Wikipedia

Hero Qualities

Prominently positioned at prime real estate locations of web pages: typically at the top and centered
Prominently sized often times with large imagery and large typography
Often times the first thing a user sees
Provides an opportunity to:
- highlight important content
- communicate an important message
- direct a users to important parts of a site

Hero Content Variations

The content for hero sections will vary from site to site, often times with a combination of the following:

Large Imagery
- Photography
- Illustration
- Product(s)
- Large Logos, Icons, & Infographics
Large Imagery + Text
- Photography as Background Image (CSS), Text on Top (HTML)
- Text + Call-to-Action (CTA) Button(s)
Large Videos + Text
- Promotional Videos
- Aesthetic Background Videos
- Motion Graphics
- Animated InfoGraphics

Hero Layout Variations

The layout and presentational style of hero sections will vary depending upon the content. Below are some common hero section layout variations:

Centered Vertically + Horizontally
Split Layouts (dual content)
- Vertical Split: E.g. Image Left, Text Right (and vice versa)
- Horizontal Split: E.g. Image Top, Text Bottom (and vice versa)
Extra Large
- Sometimes fullscreen (100vh)
- Sometimes blends with or includes the header (e.g. logo and navigation rendering on top)

Hero Related Disciplines & Topics

Web designers and developers often times rely on a collaborative team to design effective hero sections. Some of the following area disciplines might play overlapping roles in determining the content, style, and tone of hero messages

Advertisers
- Art Directors
- Copy Writers
Artists
- Photographers
- Illustrators
- Digital Artists (e.g. specialist in creating custom digital imagery and info graphics)
Marketers
Sales Team Members
Customer Relations Experts
UX Professionals