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:
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
Christopher Ireland
Webydo Website Design2. 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 DesignSuper-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 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:
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
8 Comments