Hero images have become a common go-to design over the last few years. They are basically large photos that take up a large portion or all of the top fold part of a webpage. Hero images are designed to capture the user’s attention and present a visual presentation that’s relevant to the user and the business. What’s great about them is the fact that it feels like you’re adding negative space to the top fold of your website but that space is filled with striking imagery. If you’re thinking about using this popular design, here are some ideas on how to best use hero images.

1. Create a Slider Made with Hero Images

eCommerce sites and blogs can come up with a striking and useful design with hero images by using sliders. Instead of using regular sized sliders that take up a third of the space, try using full screen hero image sliders to create an immersive presentation. Make it clear that it’s clearly a slider by offering big navigation buttons at the bottom of the image. There are so many examples where the buttons are so small that users aren’t aware they can browse the slider.

This can also be a great way to break up technical content or sales presentations like the type you normally find in web hosting sites or IT service firms. You can break a long sales page into multiple sliders with each slider offering a different presentation. This will allow the user to consume the sales material in a way that’s easy to understand and follow.

2. Use It to Start the Navigation Path

Hero images are most commonly used as an introduction to the website on the main page. You can’t go wrong with this presentation but you probably want the visitor to take some kind of action. So instead of forcing users to scroll one more page down to get more details, provide a navigation path for them to take.

Present an introduction about your business or website with concise and straightforward copy. Then think about the main reasons visitors come to your site and offer two or three choices that lead them to their desired path. This helps users get value from your hero image presentation while also helping you get move towards your website goals. 

3. Set It as a Full Background

Another unique idea for using hero images is to set it as the entire background. Despite what you may have heard, you don’t always need a white background for your content. An attractive picture can really help set the tone for your content and marketing message. However, it still needs to be executed with a degree of balance.

You have to make sure that the font and font color stands out from the background hero image. You also have to avoid using hero images that draw too much attention. Hero images that use too many bright colors or have too many details can really clash with your content. The last thing you want is for your message to take a back seat to your hero image.

4. Tell a Story

What’s great about hero images is that they start off with a attention grabbing visual presentation that can lead into a story. Creating a story through text can be really difficult. But if you set a precedent with your hero images, there is a context to the story that you can build on. Many companies try to tell their audience their story but fail to pair it with the proper imagery.

There have been examples of great stories that have used multiple hero images divided into multiple page lengths. There are also great examples of designs that start out with a hero image then integrate parallax and transition effects to create an interactive experience. Be careful when you use extra effects like this as the visual awe can easily overwhelm the message.

5. Loop a Background Video as a Hero Image

One new trend that more websites are using is using a looping video in the background for their hero images. This allows them to tell a story without forcing the user to take any action. This presentation is very impressive and really grabs the user’s attention. The videos cannot be controlled, have no sound and is usually lo-fi. 

Some rules to follow when using hero images in this manner is to make sure you don’t autoplay audio, keep the hero video at a reasonable size and keep the loop relatively short. There’s also a reason why many websites use lo-fi. The blur effect creates an atmospheric effect, loading times remain low and using a high quality video would simply end up consuming too much web hosting bandwidth.

6. Highlight a Product

If you’re launching a new product, then it may be a good idea to design a full screen hero image for the product to promote it. This allows the page to clear all the other distractions like the navigation menu, other products and miscellaneous graphic design elements. It allows you to really feature the aesthetics of your product and highlight its unique features/benefits.

Apple has been known to use the large hero image for their product pages. It really helps potential customers focus on the one thing that’s clearly being presented to them. If you’re going to use a hero image for a single product, make sure you invest the time or money to taking a high quality picture of the product. Follow that up with proper lighting and edit out all the flaws to create the perfect presentation.

There are many different ways to use hero images. Don’t fall into the trap of using a hero image to create an image for your company or brand. As mentioned earlier, you want to use it in a way that adds value to your users while also helping you meet your toronto web design goals. Hero images are more flexible than you think and can help you get more value from your creative and marketing campaigns when used in the right manner.