Vision is the strongest human sense. It’s also the fastest way to grab a user’s attention when visiting your site. The use of hero images has become very popular in website design. These are not superhero images, but more represent an idea or brand how a superhero is represented: big, powerful, and sending a message without needing to do anything other than exist.
History of Hero Images
Hero images have been used in sending a message long before they were used in website design. Think of the layout of the front page of a newspaper. Lois Lane™ could have written a story about Professor X™ opening his school and used a picture that was taken by Peter Parker™. That image of him opening the doors would send a powerful message without the use of text.
Hero Images Online
A hero image on a website is usually a large banner that immediately draws attention to what your website does or represents without the use of a lot of text. Images used are powerful and will connect to personal values of the user in some way. Hero images are usually full-width, professional photos that are set in the background with an overlay of text. They work very well with minimalist websites because they are able to portray an extensive amount of information in a single image.
Uses of Hero Images
There are different types of uses for hero images besides the initial capturing of the users attention. The use of a hero image on a personal site could display a photo of the person with a personal quote that represents who they are and what they do. Blog posts could use hero images to give a sense of what the article is about. A hero image could promote other areas of the website by giving directives of where to go next.
Variations of Hero Images
Usually hero images are just a static image, however the use of videos, carousels, or slideshows is not unheard of. The use of hero slideshows uses multiple hero images, each focusing on a different area of a site. These are used when the site wants to reach the user quickly on a site that has multiple focuses. Hero carousels are less common and used to promote all things on the site. Some sites use a dramatic video for their hero images. If using a video, it should be easy to loop, set on auto play, and have no audio.
Hero images are usually a fail safe way to grab your visitors’ attention on your site if implemented correctly. No matter what type of website you are designing, a hero image could always be used to save the day. For more information on the use of hero images in web design, contact tekRESCUE, a San Marcos Web Services and IT Provide, to speak to a professional.
Image by Tammy Duggan-Herd from Pixabay
*Lois Lane is a trademark of DC Comics
**Professor X and Peter Parker are trademarks of Marvel Entertainment
