As we explore trends in website design, the first trend we’ll examine is the hero image. A hero image isn’t a picture wearing a cape; instead, it’s a large, immersive image that covers most of the screen of a website. If you choose to implement the hero image trend on your site, use our tips on choosing the perfect hero image to help you select one that will work well.
Here’s a look at how hero images are used across the web:
Full-screen hero images
Hero images have been heavily used across the internet over the past 4-5 years, and as such, this design trend is perhaps the most widely used of the trends we’ll cover. While some trends are mainly tied to small, cutting-edge companies, hero images can be found on smaller company websites and Fortune 500 companies alike.
Canon
As one might expect from a company specializing in cameras, Canon’s website is extremely visual in nature. Unsurprisingly, it features a large hero image. The company’s site has a small menu bar at the top and the rest of the screen is covered in the immersive image with a small link to a photo gallery at the bottom-right corner.
Hammerhead
Hammerhead, a bicycle company, also features a series of images that span the width of the page. Oftentimes hero images have text and call-to-action buttons displayed on top of the text, and Hammerhead’s website follows suit here.
Partial-screen hero images
A hero image doesn’t have to cover the entire screen. Oftentimes, hero images cover about half to two-thirds of the vertical space available and contain text or other elements below.
Apple
Apple’s website has typically lagged slightly behind in design trends. For example, their site featured a slider long after many experts called for the trend to end. However, Apple has now embraced the hero image trend fully, featuring a large image at the top of the screen and smaller videos and images below featuring other products in a grid layout.
Kate Upton
Model/actress Kate Upton’s website features a slider of 5 images covering the majority of the screen. While sliders aren’t common anymore and are typically not recommended, a slider still makes sense for a website focusing on visuals — like that of a model.
Coca-Cola
Coca-Cola’s website also has a large hero image covering about half of the vertical space on the screen. Notice that they place more content right at the fold (in journalism, the fold is the point on the page where the newspaper folds; in websites, it refers to the lowest element on the screen that can be seen without scrolling down). This encourages visitors to keep scrolling as it’s easy to tell more content is available below.
Taco Bell
Taco Bell features a menu on the left side of the website, enabling the image to begin higher on the screen. Similar to Coca-Cola, more content begins right at the fold, encouraging visitors to keep scrolling.
Visa
Visa’s website is somewhat of a hybrid of a hero image and a more traditional site. The top half of the screen features a large image but the bottom features several buttons to provide more options for visitors.
Hero video
The latest trend connected to hero images is the use of a video in place of an image. This provides more visual stimulation while still offering the immersive look of a hero image.
HP
HP’s website features a large hero video spanning about three-fourths of the screen. Visit HP.com to see the video in action.
Elevation Church
The Elevation Church website features a video of the previous Sunday’s message playing in the background. This hero video is updated every week. Visit elevationchurch.org to see the video in action.
Fireworx
Perhaps the most unique take on a hero video is Fireworx, a British branding company. At first glance, the Fireworx home page appears as a video traveling through space, but as you move your mouse across the screen, the video changes. The rest of the site also contains other hero images and video. Visit fwx.co.uk to try the interactive video yourself.
Want to see more website design trends? Visit mpwrdesign.com/trends for more ideas.
