Hero images have been used in web design for over a decade and continue to be popular in 2018. Hero images are excellent for website banners, because they’re beautiful, simple, and real. Hero images are effective because they engage website visitors by adding beauty, context, and interest. The best examples tell stories and connect with the viewer.

Hero Images: What Are They?

A hero image is a very large banner image used in website design. It can be used alone, beneath an overlay, under a text heading, or in other creative ways.

The following is an example of a hero image. It is a large photograph with text on top of it.

Website design shows a dark skyline from a window.

Why Use Hero Images in Web Design?

Designers and marketers alike are drawn to hero images, and the reasons are many:

“Since vision is the strongest human sense, hero images are one of the fastest ways to grab a user’s attention. Bold, graphic, and intentional imagery helps to engage the user. It draws the user in immediately, and provide a perfect centerpiece for minimalist apps and sites.”  (From UX Planet: Best Practices for Hero Images)

Benefits of Hero Images

  • Capture Attention
  • Visual Appeal
  • Create Experience
  • Tell Story
  • Communicate Message

2018 Examples of Hero Images in Web Design

Currently in web design, hero images are a standard design element. The hero image usually consists of a photograph with text on top, button optional. Website navigation links are either placed on top of the image or placed in a solid-colored navigation bar.

Adidas Deerupt

homepage banner of the adidas website shows a hero image.

Catch Fish & Chips

A huge image of a fish is this website's hero image.

Too Young To Wed

Hero image on website is a little girl.

Neebo

A baby's face is used in the homepage banner.

Urgent

High contrast hero image

Examples of Video Hero Images

Instead of using an image, the following websites use video hero images in their banner designs.

High Performance Sports NZ

Kitelement

Examples of Graphic Hero Images

Another design alternative to using a photograph – use graphics.

Nike Air Max

cool graphic hero image

How to Use Hero Images Effectively in Web Design

Like the look of a hero image? Use one in your website design – here’s how:

  1. Keep Text Legible
  2. Use Relevant Images
  3. Professional Images Are Best

Keep Text Legible

The purpose of your website banner is to communicate with your website visitors. To get your message across clearly, make sure the text is easy to read. Text is more legible when there is a strong contrast between the color of the text and the color of the background. Black text on a white background is a good example of contrast. Text is also easier to read if the font is large.

Good Example

Ford’s website uses hero images effectively by paring a dark background with light text.

ford website hero image

Use Relevant Images

One way to communicate quickly with your website visitors is to use an image that connects your message to their lives in some way. Website visitors appreciate relevant images in your website design, because they make information easier to understand.

Good Example

The Belgium WWII website is a great example of how to use a relevant hero image in your banner design. The text is powerful, but the image really makes the message clear.

hero image of flag

Professional Images Are Best

This isn’t a hard-and-fast rule, it’s more of a guideline. Professional images are more likely to be beautiful and impactful, therefore they make the best hero images. Remember, this is the first thing website visitors will see upon arriving at your website, so it needs to resonate with them.

Good Example

Conti Ducco’s website uses professional images in its website banner to convey opulence and luxury.

professional hero image

History of the Hero Image

Online mentions of hero images started around 2010 – 2011. An article from envatotuts+ in March 2011 explores the hero image trend at that time.

“Apple’s current iPod site features a sliding hero image with three smaller ones positioned neatly below.” Here’s a screenshot of the image of Apple’s 2011 iPod website from the article:

apple ipod website 2011

Read How Apple Has Influenced Web Design Over the Years

In June 2011, DesignShack published an article about “rock solid website layouts” and included a simple layout with a hero image above two smaller images as one example. Here’s a screenshot of the image used in the article. (Read 3 Rock Solid Website Layout Examples: Coded)

three box layout

In 2012, the entry “Hero Image” was added to Wikipedia as a web design term. [Source] At that time, this was the definition on Wikipedia:

“Is a term used in web design for a specific type of banner image. A hero graphic is large banner image, prominently placed on a web page, generally front and center. The hero graphic is often the first visual a visitor encounters on the site and it’s [sic] purpose is to present an overview of the site’s most important content. A hero graphic often consists of image and text, 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.” [Source]

In 2013, the hero images web design trend was described as “the number 1 trend in Web design today” [Source] and “the most beautiful trend of them all” [Source].

Since then, hero images have become a staple in website design.

Let’s look back at examples of website designs that use hero images, starting in 2011.

2011 Hero Images in Web Design

In 2011, Apple’s influential design style was streamlined, clean, and flat. Hero images as a web design trend was just starting to catch on.

Tapbots

The website for Tapbots, below, showcases a product image against a dark background with white text. It’s simple and straightforward.

hero image of calculator

The image for Tapbot’s 2011 website design example is from How Apple Has Influenced Web Design Over the Years

2012 Hero Images in Web Design

In 2012, the hero images web design trend gained momentum. We saw the emergence of large photographs used in website banner design with simple typography.

The Great Discontent

This website design for The Great Discontent uses an interesting photograph as the hero image in its banner. The simplicity and scarcity of the white text is an excellent compliment to the dark photograph.

photography in banner

The image for this 2012 website design example is from Death to the Hero Slider

2013 Hero Images in Web Design

In 2013, the hero images trend was going strong. We saw more and more beautiful, large photographs used in web banners with minimal text.

Eye Am

The Eye Am website design makes excellent use of a hero image in its homepage banner, shown below. The photo is emotionally engaging and professionally shot, two components of great hero images. This banner places sans serif text on top of the photo, similar to the design for The Great Discontent (from 2011 above).

eye am hero images

The image for this 2013 website design example is from The Best of 2013: Top 10 Web Design Trends

Al Taglio

The banner design for Al Taglio uses a shadowed photograph and white sans serif text to catch visitors’ attention.

restaurant homepage

The image for this 2013 website design example is from Modern Food-Related Website Designs – Best Examples

Student Guide

This website design uses a colorized photograph as the backdrop to a rotating, mini text-only banner to create interest and promote events. Again the design is simple and uses a white, sans serif font. The white navigation bar stands out against the saturated image and balances the darker colors.

website banner image

The image for this 2013 website design example is from Flat Web Design: Beautiful Examples of Websites

Rebel8

The photograph used in the banner design for Rebel8’s 2014 website is striking. Not only is it visually appealing, it also personifies the brand in an authentic way. (Oh, the power of authentic photography in web design!)

man in sweatshirt

The image for this 2013 website design example is from 30 Beautiful and Creative Ecommerce Website Designs

2014 Hero Images in Web Design

In 2014, website design continued to be simple and clean. Elegant imagery and plain text was used widely in web banner designs, as shown in the two 2014 website design examples below.

Pencil 53

This website’s banner is very large. The image is simple and works perfectly in the banner. Colors are neutral with a hot orange accent that compliments the woodgrain in the photograph.

pencil image

The image for this 2014 website design example is from 30 Beautiful and Creative Ecommerce Website Designs

2015 Hero Images in Web Design

By 2015, hero images were common in website design. Most were used with text overlaid on top. Balancing a colorful banner with a neutral palette and clean content areas was the norm.

Mint

Mint’s website design from 2015 uses a hero image effectively in its banner. As per usual, the banner uses a sans serif font on top.

mint banner

The image for this 2015 website design example is from 15 Examples of Brilliant Website Homepage Design

Jova

This website design from Jova goes against the norms by placing its navigation front and center. A clean, neautral photograph with a shot of leaf green creates a lovely background for the navigation menu. A dusky overlay mutes the photograph to allow the navigation menu to take center stage.

website banner

Visit Brazil

This inviting website banner design uses the hero image to add texture, interest, and content. A vibrant yellow door contrasts nicely with squat white text.

door image hero

The images for the two 2015 website design examples above are from Interesting Navigation Examples in Website Design

2016 Hero Images in Web Design

In 2016, hero images continued to be on trend in web design. In the examples below, breathtaking photography adds not only beauty, but context as well. In the best examples of hero images, the photography and text tell a story.

Bucketlistly

This website banner uses a hero image as a background to important text, buttons, and logos. The beautiful photograph pulls the website visitor into the experience and creates context for the banner message.

bucketlistly hero images

The image for this 2016 website design example is from 28 outstanding examples of CSS

2017 Hero Images in Web Design

Designed To Move

This website is an engaging example of an effective hero image used in banner design. The image creates a dark backdrop for white text and green buttons. It also adds context to the message and makes it more authentic.

banner image hero images

The image for this 2017 website design example is from 50 Perfect Examples of Flat Web Design for Inspiration

Controversy with Hero Images

The large, full-page hero images common on today’s websites were not universally welcomed when they first became a trend. Why not? Because many people questioned whether website visitors would scroll past the large image.

It may seem silly now, but there was quite some debate about scrolling past the fold on websites. (Read Below the fold if you’d like more information about what “the fold” and “below the fold” means.)

In 2011, one agency wondered: “The concept of designing for the fold has always been a focus for web designers, but as technology continues to grow and diversify, is it an outdated principle?” (Read Above the Fold vs. Below the Fold: Everyone Scrolls)

Here’s some insight from UX Myths: “Although people weren’t used to scrolling in the mid-nineties, nowadays it’s absolutely natural to scroll.” (Read Myth #3: people don’t scroll for tons of stats and studies.)

The Future of Hero Images in Web Design

Looking back on the website design examples from the last ten years or so shows that the hero image has changed very little in terms of web design.

Variations include the size of the hero image – you may see very large images or you may see images that stop before hitting the bottom of your screen.

apple website hero images

Another design variation is the website navigation bars – they are frequently removed to show even more of the hero image. The website below uses a hamburger menu on its desktop website design.

toso hero images

For now, hero images are here to stay and you’re likely to see them used in website banner designs for years to come.

Learn More About Responsive Design

Interested in a website design for your business, corporation, or e-commerce store? You’ll want to check out our free e-book all about Responsive Design:

Say Hello!

Give Artonic a call or email us if you’re interested in website design, development, or marketing.

517-902-7851

info@artonicweb.com

Michigan, USA

Subscribe to Artonic's Blog Stay on top of the topics that are important to your business!

Email Address