How many times did the inspired title of an article made you “reward” the copywriter with a click and then: surprise, surprise! You landed on the website hosting it and you couldn't have found your way out of there any faster?
The photo/graphic/video in its header was so “dusty” and boring or, on the contrary, so flashy and annoying, stuffed with clumsily grouped elements, overloaded with information and showing off a totally uninspired color choice!
Now, answer to this question: how many times did you open a newsletter or landed on a new website and from that very moment time stopped? It captured your attention and you kept on scrolling and clicking, then did some more scrolling! It was the best “scientific” proof supporting time's relativity theory!
The hero image got to you, you wanted more and more of what that site had to offer and ended up spending more time there than you planned (maybe even buying something or subscribing to their “crafted” newsletter)!
If you want your own website visitors' experiences to be more like the one in the scenario no. 2, then you should learn to master these contrast-creating design subtitles:
Think Through Your Color Choice
Color sure isn't the element you should pick in a rush! It can either wow your users and propel your message to them or it can instantly drive them off.
Carefully consider the message you wish to convey (your whole's brand's identity) and then make your selection based on that and that only.
As a general rule of thumb: you don't need to go for a strong color if it doesn't represent your brand's personality, just to catch their attention. It will eventually be a major turn off.
Also, before you go ahead and add splashes of your “winning” color to your hero image, be sure that: it matches the rest of the design (preferably a simple one if you're going for a bold color).
With cohesion (with that stunning image or visually-engaging video that you're planning to use) and contrasting colors in mind, feel free to enhance your brand's message by simply adding the right color to your hero image: colored typography, colored user interface elements. Such a subtle, yet effective “trick” when you manage to make the right (color) choice!
But what if there's just no “match made in heaven” between the hero image and your brand colors?
In that case, you adapt:
- try a color overlay on the photo
- test a black and white solution for the text or image
- put the strong colored elements in your navigation bar
If you've tried all of these creative “fixes” and there's till no chemistry between image and colors, consider losing the mandated color.
Moreover, color alone can be “the hero” of your hero image, you don't need an image at all! Combine it with powerful text lines, featuring beautiful typography, and you have your hero image that impacts users just by its striking (crafted) simplicity.
And here we get to the “extreme minimalism” principle again! Such a powerful web design trend!
Wow Them With Bold Typography
Here's another way of using contrast to catch the eye: beautiful and bold lettering contrasting in size and (or) color!
Keep it simple, but carefully craft its simplicity!
Consider the typeface selection and get creative when it comes to choosing your words (that's right, meaningful, powerful words, not a whole paragraph). Go for the true emotions-triggering ones all while relying on:
- fonts that pop out (set against contrasting backgrounds)
- unusual font sizes (either undersized or oversized; the "out of the ordinary" will always catch attention)
Think About Light and Dark Spaces
After lots of mixes and matches, rearrangements and a whole dose of creativity you've finally managed to pull off a great “light vs dark spaces” contrast for your hero image and them boom: all your work is ruined when you try to make it responsive.
The text, images and buttons are all chaotically displayed now!
Does this work scenario sound familiar to you?
Then here are your options:
- go for another image (it's hard, I know, especially if that was “The” one and you've spent so much time scanning though hundreds of images to find the perfect one)
- go for color overlay
- go for another typeface, color and size
Do a Strategic Cropping
“It's a trap, don't go for it (like many other designers do)!”
We're referring to the widely accepted idea that the hero image should “fill in” the first screen!
Be better than that! Think outside the box:
- let the content therein determine how you should crop it
- accept and implement the idea that your hero header could be either smaller or larger than the browser
- give the other elements on the page their due importance, too
- dare going for an unusual shape (it will certainly intrigue and catch attention)
- consider an unusually deep image that will only incite visitors look for more
Make Your Call to Action Stand Out
Here's another trap that you get caught in: losing the whole purpose of your hero image!
You've worked so hard to make your header wow your users with a visually-arresting, engaging graphics, you've strategically picked your colors, your beautiful typography, too, you've added the perfect emotions-triggering/persuasive words: it's a true work of art!
And still: haven't you forgotten about the “main character” itself?
Yes, the call to action button! It should be there, right into the spotlight!
It should let your visitors know what you want them to do (besides staring and letting themselves be visually “spoiled” by your hero header).
How do you make your call to action stand out and grab their attention?
You rely on color or size contrast! It should strike a powerful contrast with the backing image and, moreover, you should empower it with clear, simple and readable words.
Let them know that they should “buy” or “subscribe” or maybe “read more” in just a few straightforward words!
Add Animation
Movement will always catch the eye!
Therefore, it makes a highly efficient attention-grabbing element for a hero image.
Now don't think that you'll have to pull off an entire cinematographic experience (you shouldn't go that way, you shouldn't make your hero image way too flashy and overwhelming).
Simplicity is key, remember?
Therefore consider going for subtle movements for your header, one that should aim at:
- surprising the users
- standing out (from the other “just” text or “just” video featuring ones)
How about you?
Are you making the most of contrast when you create your own winning hero images? Have you, maybe, discovered other ways of using this deign concept to engage your visitors and to make them “stick around”. “Other” than the ones we included in our list above, maybe? Feel free to share them with us in the comments below!
