Categories / Tutorials

3 Secrets to Design an Incredible Hero Image

Daniel Schwarz March 31, 2021 · 4 min read

It’s my worst annoyance in web design trends. Not the trend itself, but the incorrect usage of it. We’ve become so obsessed with free stock images and their fullscreen beauty that we forget to even consider the user experience of it all. But I’m not here to rant; lets look at some of the ways that we can explore this trend without subjecting the user to intensive eye strain.

By eye strain, I mean this:

Thierry Ambraisse Website Design DreamTeam Website Design Oleg Chulakov Studio Website Design

How Did We Even Get Here?

Simple: internet speeds improved and that of course means more images, but sadly the average webpage now exceeds 2MB, and while that might be alright for most of us, 70% of the world does in fact not have internet at all, let alone fast internet.

So while there are issues relating to the user experience of combining text with large images, you should first consider where your users are visiting from and debate whether a large background image even adds any value to the design at all.

1. Don’t Center Everything, Explore Other Layouts

In the design of big headers the content is often centered, which despite being a little too overdone, is quite simple in nature and I believe the first experience with the user should be one of simplicity. That being said, when a website needs to tap into the user’s emotion (and by that I mean strong imagery) it’s sad to see many designers still opting for that centralization when the fullscreen image often drowns the text.

Here are a few examples of website designs that explored the big image trend, but used alternative and/or creative layouts.

Karim Rashid Website Design Karim Rashid Website Design Christopher Ireland Website Design Christopher Ireland Webydo Website Design Webydo Website Design

2. Find the Right Contrast

It’s extremely hard to make text stand out when it’s been laid over the top of a fullscreen image, but luckily there are many ways that we can increase the contrast between the two.

Single Colour Infusions

So this is where blending modes come in. Photoshop’s “Soft Light” is a wonderful blending mode to start with. First, open the image in question and turn down the saturation by about 50-70%. Create a new layer, “Fill” it with the color of your choice, and make sure that it appears underneath your image.

Now set the blending mode of the image to Soft Light, so that it fades gracefully into the background color. It’s now up to you to decide on the opacity of the image, where the more vivid it is, the less impact the text has. A fine balance between legibility and emotional impact is what we’re going for here.

Spotify Rewind Website Design Spotify Rewind Website Design

Super-Gradients

Super-gradients are another trend in big headers that can also be combined with blending modes. Super-gradients involve the transitioning between two or more colors, rather than only one.

Erik Zuuring Website Design Erik Zuuring

Blurred Backgrounds

Blurring is one way to capture the color and emotion of an image without displaying it in full-quality. It not only takes less of a central focus this way, but improves the legibility of the copy in moderate doses as well.

Blurred backgrounds are often confused with gradients because gradients are sometimes created by applying a huge blur radius to an image until the image becomes unrecognizable. A real blurred background retains the features of the original image. Therefore they’re sometimes called “natural” blurred backgrounds.

Polygon and Motion Backgrounds

Polygon vector backgrounds are a splendid way of introducing depth and colour to a design without having to awkwardly fine-tune a balance between photography and text. Possibly because of their higher download times, motion backgrounds aren’t as common though, but with the right optimizations they can serve as a beautiful atmospheric alternative to polygon backgrounds.

3. Don’t Have a Background Image At All

I’m a massive sucker for bold colors, so maybe I’m a little biased here, but there’s nothing wrong with eliminating a background image entirely and opting for a single color combined with a direct, strong statement. It’s an ideal opportunity to experiment with typography and layout!

Conclusion

While big hero images are a trend in themselves, the many ways that we can design them vary between different types of sub-trends as well. So next time you need to design a fullscreen header, consider using blurred backgrounds, motion backgrounds, super-gradients, blending modes or even a simple, single color.


Products Seen In This Post:

Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
About the Author
Author
Daniel Schwarz

Designer & writer

View More Posts
Go to My Shop
Related Articles
8 Comments
  • good stuff. 6 years ago
  • Too bad you didn't give credit to any of the sites you pulled the examples from? 6 years ago
  • @EGFS Manager Each referencing image has a link directly underneath it. 6 years ago
  • Thanks for adding those. :-) 6 years ago
  • Most designers are quick to point out problems, but never offer solutions. This was a great set of examples. 6 years ago
  • Awesome, thank you @Ericca Jo, that's exactly what I was going for. 6 years ago
  • Wonderful tips 6 years ago
  • Excellent tips and images, I use to build hero images for my portfolio themes and follow this tips https://creativemarket.com/visualmodo/shop 4 years ago