Hero Images in Web Design: When, Why, and How to Use

Don’t forget, you are the hero of your own story. (Greg Boyle)

With the growing attention to prominent visual details and diversity of graphics on modern websites, the approach of using a hero image seems to move from trends to well-established strategies. In today’s article, we’re going to discuss what is hero image, why it’s important in web design, and how to make it work for your goals.

What Is a Hero Image?

In web design, “hero image” is a term that is applied to a big eye-catching image that is usually seen in the above-the-fold zone of the webpage, right below the website header. This simple scheme from Balsamiq covers the basic idea.

As it’s seen from the wireframe above, a hero image usually takes almost all pre-scroll full-width space on the page. The other layout elements (call-to-action button, text, etc.) are located in the header and around the hero image to create a consistent, balanced visual composition.

Make no mistake, the term doesn’t require that all images of this kind should include only a human, animal, mascot, or any other kind of character. Don’t get stereotyped with that “hero” part. It can also be the theme image featuring a landscape, a device, a building, anything, even an abstract model or composition. The main idea is that the image instantly grabs attention and allows for setting a quick visual, emotional, and informative connection with the user.

Hero image on the home page of the KS Architectes website by AKIS Studio

Why Is Hero Image Important?

Why is it hero? There are several points to answer this question.

• Attention and impression. First, because it activates the power of visual perception from the first seconds, no secret that there is not much time to impress the first-time visitor to the website or to catch the attention of new offers. The hero image gives a chance to impress the users as fast as possible.
• Information. Most people perceive and decode images much faster than words. It means that the hero image is not only the element of attraction – it’s also an informative part of the page, providing a quick visual message about the content.
• Navigation. The correct composition of the hero image can strengthen navigation and bring more attention to the call-to-action button.
• Emotional appeal. No secret, the emotional background of user experience plays a big role and makes communication between the website and its visitor more human-like. Hero images are a well-proven way to transfer the needed emotions via images, shapes, and colors, and set the needed atmosphere from the first seconds of interaction.
• Aesthetic satisfaction. The offer and functionality of the website are a priority, sure. Still, people also expect to get their eyes pleased. Aesthetics means much in terms of high competition on the web and rising desirability as a part of a positive user experience. A hero image is one of the ways to activate aesthetics at once.

Hero transition for the artistic Renaissance Edition website by Shopify Design

What Types of Graphics Are Used for Hero Images?

The type of graphics for the hero image and the message they convey depend on the goals for this particular webpage and the type of website in general. It can be news that has to catch users immediately, the image reflecting the nature or the benefits of the offer or information, a fresh publication that deserves the most attention, and so on. E-commerce websites often use hero images to present bestselling products, sales, special offers, strategic services, or hot deals.

As for the type of graphics, the hero image may include the following.

Photos

The essential benefit of photos is that they connect the stuff which users see on the web page with a real world of physical things and live people. Photos have been a part of human reality for many decades, much before the Internet’s advent. That’s why we feel the visuals of this kind like intuitive, close, and clear. What’s more, with all those devices that let any of us capture something in a second, photography is really a part of everyday life. So, used on a website, it sets strong associations and may reflect the needed atmosphere in a style typical for the target audience.

What’s more, photography is also a kind of art. Photos let you set the balance of realism and aesthetics in your web user interface. You can keep the necessary style appealing to your target audience and creating the necessary emotional background. This is one of the reasons for choosing photos to support articles on blogs and media websites.

Furthermore, photos are the primary visual presentation tool for goods on e-commerce websites, where the principle “you get what you see” is vital to success.

Hero section of the Verity and Co Homes website by Adaptable

Hero section on the home page for Mason’s ecommerce website by Evolve

Hero section for Matthew Fisher website design by CUSP

Illustrations

A big web design trend now is using custom illustrations for a variety of website needs, including hero images. Made in various styles, custom graphics effectively support the quick perception of the information on the page or screen. They also set the solid foundation of visual originality and add aesthetics and beauty to landing pages, blogs, and websites.

Impressive digital art for the hero section of the Thorgal website by Caracal

Animated hero illustration for the website design by Habitat

3D Graphics

One more type of web visuals growing its presence this year is 3D graphics, visuals created by turning 3D wireframe models into 2D images. Many of them have photorealistic effects which are their big advantage for web design. 3D renders may serve well in cases when photo content you need is impossible to get or highly expensive. Although creating the images of this kind demands specific skills and is quite costly and time-consuming, well-done 3D graphics are highly attractive, trendy, and convincing, so they can have a great impact on web design looks and conversion rates. That’s why now they are also very popular in hero images.

Hero section for Modus Projects website design by Overflow Agency

Practices of Using Hero Images in Webpage Design

Now let’s discuss some strategies for hero images that work effectively.

Consider using a clear and laconic tagline and make it work together with the image

A tagline is a short and powerful line of text, a kind of slogan that sends a quick and clear message to the reader. It may inform about the core benefits or a problem solved with the product; it may call the reader to action or ask the question that is answered in the rest of the text on the page, etc. If you use a hero image, its harmonic combination with a tagline may be an effective idea: this way the image is supported with the power of words, while the words are made more expressive with the visual.

Hero section for the Language Explorer website by Hook

Play with fonts

Typography is not only a way to let users read the information in text. It’s also the part of the design, with its own mood and goals. The hero section of the webpage is a good reason to search for the fonts that will also visually reflect the style and mood of the hero image – or vice versa, will present a total contrast to it, this way attracting attention and rising interest. So, take your time to find the harmonic fonts, that will work together in one composition. However, keep your eye on the issue of readability: too much of the experiment can lead to unreadable copy and poor user experience as a result.

Hero section on the home page for the website for Kreisson by Spark Interact

Let navigation elements and hero image work together

Whatever stylish and harmonic is your webpage design, it’s not valuable if it doesn’t convert. One of the core conditions of easy conversion is making a call-to-action element quickly found and clear. So, in pursuit of beauty, don’t forget about the main goal behind the webpage and don’t let the hero image to overcome the CTA. Instead, make them work together and support each other. Let the hero image and navigation work together.

Elegant hero section for the Heimdall Power website by Refokus

Add animation

Another way to strengthen a hero image is by adding motion. Animation is an effective approach to add even more emotional and informational power to the visuals, enhance storytelling, and set more associations. As well, animation helps to add originality to design.

Catchy web animation on the Shader Development Studio website

Evoke emotions

As Aarron Walter said, “When you start your next design project, keep this principle in mind: people will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.” Sure, it doesn’t break the fact the functionality and simplicity of the product are the foundation of user experience. Yet, except for it, users also strive for the lovely facade and positive vibes. As visuals are a great tool for setting the needed mood, one of the primary goals designers set for hero images is evoking the emotional appeal of the design.

Wolverine Worldwide website by Locomotive

Mouthwatering hero section of the website for Fresha Restaurant by Wybe

Add artistic vibes

With more and more competition online, designers are looking for new tricks to win the battle for users’ attention. One of the popular trends now is the artistic, sometimes experimental digital illustration, often used in hero images. Creative experiments seem to combine traditions and innovations for the new circle of web design evolution.

Product animation on the home page of the Kettmeir website by Studio Idee Matteria

To sum up, hero images are a versatile tool in a web designer’s toolkit. They have great potential to amplify the usability and aesthetics of the web page, engaging users to learn more.

Useful Articles

Aesthetic Usability: How Beauty Improves User Experience

5 Basic Types of Images for Web Content

The Anatomy of a Web Page: Basic Elements

Guide to 6 Effective Types of Web Animation

Web Design: 18 Basic Types of Web Pages

How to Design an Effective Home Page and Let Users Feel Like Home

UX Practices on Product Page Design

How to Design Effective Search

10 Reasons to Apply Illustrations in UI Design

UX Design: How to Make Web Interface Scannable

Negative Space in Design: Tips and Best Practices