A hero image is a term used to describe an oversize image placed at the top of a website, or on its home page. It is typically a high-resolution photo or a graphic, although a more recent trend is to use videos or animations.
The use of a hero image is a popular web design trend because of its ability to quickly capture and engage users. It can provide an initial glimpse of what a business is or does, or what a website is all about.
A hero image typically covers the full width of a page. It may be accompanied with a unique value proposition (UVP), a brief summary of information or services offered, or a call to action. A call to action on a home page may be nothing more than an “Enter” button that invites the user to discover how the hero image relates to the site’s offerings.
To choose the best hero image for your website, you must first decide on the function(s) it is to perform.
Factors to consider:
Pre-built websites are becoming increasingly popular. They present web designers with working concepts that allow them to focus on what really matters in web design.
The 12 Be home pages featured here should give you a good idea of how you might customize any one of them to fulfill your design requirements. These pre-built websites also demonstrate how effective hero images can be in engaging site visitors.
This hero header conveys a sense of elegance and luxury. It gives a hint and a promise of what the website’s content will reveal.
This hero image is filled with action. It clearly communicates who the intended audience is.
For a pizza lover, this hero image is indeed powerful. Notice how the transparent image overlay helps the message to stand out.
Here, the hero image is in perfect conceptual consensus with the text (the movie’s title). Note how the dreamy atmosphere places the protagonist in a position of prominence.
This hero image is cool, minimalist, and impressive. It reflects several popular design trends; including an effective use of white space.
This home page promises fun and laughter. The hero image is darkened, but powerful. The human element builds up a relationship with the user.
This cool, beautifully organized image that shows the print shop’s products, points to a professionally-run business that sells quality products.
This hero image, with its distinctly minimalist design, is clean, to the point, and conveys a feeling of luxury.
This home page illustrates how an otherwise formal corporate image can include a touch of lighthearted humor. A glass of juice does not look out of place at all.
This pre-built website is intended for a tea shop. Note how the elegant, vintage typography perfectly fits in with the message the image imparts.
This pre-built website for weddings offers another example of how it is possible to achieve an excellent image and typography match.
The hero image conveys the ecological initiative behind this website. This high-resolution picture of a forest provides an excellent path to connect the user with nature.