Purpose of Hero Images
The photo of the typewriter above would have been great for a website selling typewriters in the 1940s. Or for lack of the internet, perhaps a newspaper ad for a typewriter shop. It may spark imagination in potential customers that would like to write.
The image may depict what’s in stock, or in other cases what services the company may offer. It’s simple, visual, and informative.
Fast forward to today and we are using Hero Images online to do the same thing. A high resolution picture is striking to new site visitors and demands their attention. They say an image speaks a thousand words.
Let’s be more specific
A hero image:
- Provides emotion and interest
- Displays company values or Unique Selling Point (USP)
- Empathizes with users
- Directs users to further site action
We really are visual and we should embrace that when designing websites. According to this study, we generally retain more information when there is a visual reference. It shows that retained information (after 3 days) went from 10% retention (taught through reading) to 65% (taught visually/verbally).
So visuals will stick with your viewers. Besides that, the internet should be enjoyable to surf around and there’s nothing like welcoming your site visitors with a wonderful photo or piece of art.
Here’s one from apple. This is the “Mac” homepage, so “everything computers” for Apple. Notice they are most interested in visitors seeing the MacBook Air. That’s what they impress on users the most and it’s likely one of their best selling computers.
Also notice that there’s a lot of emphasis on the typography in this Hero. There is 5 lines of text which also include links to “Buy” or “Learn More” about this computer model. These are “Calls to Action” and should be the most valuable links on the page.
The next example feels less like an advertisement, and displays more of a company's culture.
This is great design. A hero image from a (now offline) wellness-center/barbershop for the LGBTQ+ community called “You & Sundry”. The image says it all and it doesn’t need to be any more complicated than that. In this example, the company is advertising a service (haircuts/grooming) indirectly using culture to attract a customer base. LGBTQ+ customers will connect more with this business emotionally than with a competing hair salon that only attempts to advertise to the general public.
If you’d like to see some more inspiring examples of Hero Images, check out this dedicated blog post.
Evolution in Hero (Images/Video/Animation/Illustration)
It’s likely you will have some level of difficulty reading this section as your eyes will be drawn to the movement of the following example (which is the goal for the company). So let’s get it out of the way first.
This is another example from Apple’s website. This is the Hero Section for the MacBook Pro. Note that on the website itself you only experience the animation once before it ends and rests in an image of the computer itself with the words “MacBook Pro” above it.
Now that sure demands attention doesn’t it? Imagine a student opened this link inside a busy classroom during a lecture. It would grab the attention of everyone sitting behind them all at once, showing off Apple’s flashy new computer.
This is an amazing experience, short and sweet with a lot of attention to detail. Notice that the section navigation bar has a calculated animation that changes the text from a light colour to a dark colour half way through.
They could have surely just faded in a nav bar after the animation, but they choose to display a nav bar immediately and incorporate it the show. Could it be to celebrate their built in “Dark Mode/Light Mode” feature?
There are a couple of other pretty interesting forms of Hero Section that have gotten popular lately for good reason. Let’s have a look at some.
Illustration Based Hero Section
Atlassian uses illustrations throughout their website to give an idea of what their product offers. This is a great idea as these illustrations depict the connection that their products have to the teams that use their software. This solves a potentially difficult task, which is to capture this theme in a real life photo.
Demo Based Hero Section
Here Dropbox gives a brief demo of the product “Dropbox Backup” to portray its simplicity and adaptability for dropbox users. Obviously it’s not a complete instructional video of the product, just a short overview which generates a sense of simplicity for the feature/app.
Story Based Hero Section
This is another interesting design. Although this is pushing the limits of how we define a “Hero Section” with its full page length illustration. Nevertheless, it leaves an impression and demonstrates the complete process of creating the product which is for sale.
It’s very emotional as it connects the customer to the artist and what they create. Plus it’s a unique use of a web page and demonstrates what the artist is capable of bringing to life on the internet.
Parallax Hero Section
Parallax Designs come in many forms. Essentially they involve 2 or more layers of visual content that scroll at different rates on the page. This effect gives them separation and creates a sense of depth.
In this example we have more than 5 separate layers interacting with each other. It’s beautifully designed to give the illustration a 3D feel.
Some tips to make the most of your Hero Section
- Present links and buttons as Calls to Action
- Use Bright/Bold colours and consider your Brand Theme/Typography
- Show your Logo
- Use Strong Contrasts in text and buttons
Web site users are Human and are therefore very visual beings. This is why images have been used for a long time to capture attention and to illustrate messages. Now that we have a digital space to design within, images can be combined with links and call to action buttons.
This digital space also gives us the possibility to build more visceral experiences for users visiting our websites. Video, Animations, and Illustrations are becoming more popular in Hero Design. It’s even possible to give an experience to users via interactions like mouse movement or scroll (such as a parallax experience).
The possibilities are huge and they should be explored in context with a companies mission and brand to create a memorable/sharable experience.
If you're looking to start developing a fantastic looking website, but don't have the skills in place, or just want to offload a little bit of the work, contact Konverge. We can help with anything from simple web design, to full fledged custom software built from the ground up.