Hero Images: Purposes and Prevalence
Hero images have recently become a major trend in web design. Find out why they're so popular, and how best to use them in today's post.
2014 has seen the rise of hero images as a major trend in web design. Where whitespace once ruled the roost, more and more websites are using their most prominent real estate to display high resolution imagery to emphasize their products, services, and/or content. Needless to say, the resulting designs have been powerfully persuasive in their implementation as to why this is a viable technique.
The arguments for hero images as headers are well established. Photography/imagery holds a distinct advantage over text and whitespace as it can be used to quickly and effectively convey an emotion, meaning, or even subtle (or not so subtle) psychological suggestions.
Today’s article will examine the reasons behind, uses for, and examples of hero images at their best. Let’s get started by analyzing the purpose behind the pictures.
Who Needs a Hero?
The short answer is everybody. There aren’t many websites that couldn’t benefit from a radical redesign of their web presence. Certainly anyone who’s still got a slider above the fold, might decide that a full page carousel could better fit their needs, preserving prime web real estate, while still consolidating space for the most important content.
While the widespread use of hero images as homepage headers aren’t isolated to a single genre of website, they are most often associated with product pages, or even more specifically, with landing pages for mobile or web applications such as Spotify or Squarespace.
Such associations have become commonplace because a singular powerful image, is best paired with a singular powerful message. Thus one pagers featuring hero images hone focus, and that focus is brought into sharp contrast via the powerful imagery.
That being the case, it should be no surprise that many popular one page websites have gone the giant hero image route. This can be great for online portfolios, the aforementioned web/mobile applications, or even online stores.
So like I said, nearly any website can use a hero image to great effect. The important thing is to keep the imagery relevant to the site’s overarching theme, and even more so: it’s content. Slapping just any old stock photo on top of your prime web real estate is a big mistake. It’s vital that any featured image have a real connection to the purpose of the website.
What are the Hero’s Superpowers?
Beyond just being supremely attractive and applicable to most any kind of website, hero imagery adds to your web presence in a number of ways.
They say that a picture is worth a thousand words, and the results of usability tests concerning hero images certainly support that statement. According to a split test performed by the Crazyegg blog, in certain cases, hero images were shown to increase conversion rates by close to 40%. Additionally, these tests show that hero images had an effect in decreasing bounce rates by 27%. These were isolated case studies, but supporting results have been fairly widespread.
In addition to helping you move all of your backed up inventory, hero Images manage to do all of the following:
Save web real estate
By putting up a high quality background image, and overlaying it with text, CTAs, links, buttons, and all of your other favorite on page elements helps you add visual appeal while still conserving space.
Hero images induce a visceral reaction in your visitors. They allow users to imagine themselves in a destination, or to feel the sensations associated with using the product.
Enable visual storytelling
People react to stories. Putting a full page image in front of your visitor’s eyes allows them to immerse their senses in your brand’s story, helping them see where they fit into the tale you’re telling.
Speaking of branding, your imagery is an opportunity to reinforce yours. Match the imagery with the color scheme of your other marketing materials, include your logo, and illustrate something important about your service offering.
Open the door for animation/interactivity
Perhaps most exciting is the fact that hero images facilitate further forays into immersive web design. Combine your imagery with parallax scrolling animations, or even ambient video to really engage your users.
Allows for easy editing/customization
One really wonderful part of including a hero image on your website is the fact that it’s easy to change. All you have to do is switch pictures, or edit text elements over top. Really simple and really easy.
Though it’s perhaps the most obvious facet of hero imagery, adding visual appeal to your website is by far their most appealing feature. Everyone knows that sex sells, and there’s not much sexier than a screen full of high quality unique imagery. Moreover, because the full page images are such a hot trend right now, they give your website a sleek, slick, and extremely professional look overall.
In addition to making a connection with your audience, telling your story, and giving context to your textual content, having large, bold images adorning the hero section of your website not only makes your web presence more engaging, but more reliable, dependable, and downright trustworthy as well.
With fly by night designers and a outpouring of online web building applications flooding the internet with poorly designed page after poorly designed page, it’s nice to know that at least one trend has a proven record of drawing in user attention, increasing conversions, and appealing to intellect and emotions alike. Hero images are a powerful motivator and inspiring addition to almost any web presence imaginable. The only question remaining is: do you have one on your site yet?
Interested in picking up your own set of unique and interesting hero images to display across your website? Check out a few of the examples from these stunning collections by Vadim Sherbakov:
- Creative Market Vol. 1
- Creative Market Vol. 2
- Creative Market Vol. 3
- Custom Scene – Designer Ed. – Vol. 1
- MEGA BUNDLE – 87 Hero/Header images