Daniel David

How to Create Beautiful Hero Image

One of the most important trends nowadays in web design is hero images. These hero headers are often referred to as hero images, image sliders, banners, video headers or carousels. Because Smart Slider 3 is not just a slider plugin you will be able to create the perfect hero image for your website easily. No matter what type you need, they’re typically located at the top of a website and these are the first things that people see.

Making a good first impression is incredibly important!

You only get one shot with the first impression and you have only few seconds to grab your visitor’s attention. In this article I will introduce you to some of the best practices as well as provide incredible resources to help you create effective hero images for your sliders and blocks.

Create hero with Smart Slider 3
Smart Slider 3 is a perfect tool to create a hero section

What should a good hero image contain?

The right hero image can give your visitors context and help them to understand your purpose. If you want to create a hero image that is persuasive, informative and understandable, you should consider including the following components:

  • Call to Action: CTA is the action you want your visitor to take, so your goal with the hero image is to persuade visitors to take this action. It doesn’t matter if your goal is increasing sales or generating email leads. But don’t forget you have to be clear about what action you want the visitor to take and make it as easy as possible. Okay but how to start? Start with the CTA and work back. It will be so much easier if you know your goal exactly.
  • Quality background: Probably imagery is the most important part of the hero image. It’s a powerful tool to help you communicate and differentiate your website. Your hero image should contain images, videos or graphics that catch the eye and captivate your audience. Mostly contextual images convey your message more effectively, non-contextual images don’t supplement the message with any additional information.
  • Good copy: The first headline your visitor sees is the most important copy you’ll write on your website. Writing good web copy isn’t easy and it requires skill to get it right. Some of the best copywriters will spend weeks just crafting the headline. Your goal is to communicate your value and get the visitor to interact on your website.
  • Impact: It’s all about creating that WOW moment. The best hero images achieve a balance between capturing reader’s attention and providing an adequate amount of useful information. For example animations are great for making a website design unforgettable and grab your visitor’s attention. The key to animation as a design tool is moderation. There are many ways of using animation to improve the user experience in Smart Slider 3: layer animation, split text animation or memorable interaction.
Typical hero image
Typical hero image

Popular hero image techniques

Perhaps the biggest challenge for a non-design user is creating beautiful new hero image with Smart Slider 3 because there are an infinite amount of ways you can start. Below, I will show you the most popular examples and basic techniques how you can use imagery in the header of your website and make an awesome first impression.

Overlay

It’s really hard to make text stand out when it’s been laid over an image or video. The lack of contrast will cause readibility issues and the last thing a visitor wants is to guess what they are reading. Overlay is a really simple method to lighten or darken your background and get a higher contrast. In Smart Slider 3 simply pick a color and set the opacity for your background. Try to find a perfect color and balance with the overlay over and above don’t hide too much of the image!

On the left you can see the final result with overlay, on the right, you see the orignal image
On the left you can see the final result with overlay, on the right, you see (?) the orignal content
Background overlay
Background overlay in action

Text Background

If you don’t want to hide the background then you can add a background behind the text rather than the entire hero image. Basically you can pick the color of the background for every heading and text element with the style manager in Smart Slider 3.

Text background example with Ken Burns sample slider
Text background example with Ken Burns sample slider
Text background
Two other popular variant with text background

Blurred Background

Blurring is one of the best way to capture the essence of an image and improves the legibility of the copy. With the in-built image editor you can add blur and tilt-shift effect to your background.

Blurred background
Blurred background example on the second slide
In-built image editor
Tilt-shift effect in the in-built image editor

Composition

If you have a great photo which has a safe space for the text then you shouldn’t hide the background with an overlay. Try to find the best place for the text which doesn’t impede the visual flow. Don’t cover faces or busy parts of the image!

Layout composition technique
Layout composition technique

Solid Background Color

Sometimes less is more and your website can be better if you eliminate the background image entirely. This design technique allows typefaces to be dramatic and have a strong visual impact. It’s an ideal opportunity to experiment with typography, layout and colors!

Background color for hero image
Background color example for hero image

Video Background

Using background videos and animations can also add an interesting dimension to a hero image. When executed well, this method can enhance a page’s content. With Smart Slider 3 you can use background videos easily and enhance your hero image and make the user experience better. The quality and length of the video has to be top notch to convey the message because the video definitely slow down your site. Not every website can benefit from this technique but it can be an enormous benefit to an overall design and branding.

Hero header with video background
Hero header with video background

Where to find the best free resources for a hero header?

Good images are a key part of a great hero image but finding images can be difficult. Here is my collection of the best websites to find free photos and videos:

  • Unsplash – High-resolution photos
  • Pexels – Best free stock photos in one place
  • Picjumbo – Totally free photos stock images
  • Kaboompics – Great place to get breathtaking free pictures for business or personal projects
  • Death to the Stock Photo – Free photos by email every month
  • Coverr – Beautiful, free videos for your homepage
  • Mazwai – Free creative commons HD video clips & footages

Conclusion

There are many ways to design hero images with Smart Slider 3 and you can vary between lots of techniques and trends as well. Oftentimes, these hero images are the first things that people see on your website so try to help them to understand quickly what the value of your website. Good luck with your hero image and happy designing!

Our favorite links this week

We curate web design and development related content for you week by week. Useful, interesting and educational links that you might want to visit.