How to design large, full-width images like a hero
The oversized, full-width hero image is everywhere these days. You’ve seen it used to introduce apps, publications, portfolios, and, of course, online stores. And it makes sense, doesn't it? Not only does this site-spanning, larger-than-life image appeal to our visual sensibilities, but done right, it can be a powerful way to establish a brand, highlight promotions, and bring products to life.
But a truly “heroic” hero image is more than a big photo with some text and a button on it. According to conversion optimization expert Angie Schottmuller, a good hero image is “a credible photo or video of a solution that encompasses relevance, context, value, and emotion to support, educate, or persuade the customer.” In other words, it’s a big picture with an even bigger purpose.
In this post, we’ll discuss the power of hero images, break down the components of a good one, and give you some practical tips and techniques for creating beautiful and compelling hero images for your online store.
What a good hero image can do
A picture is worth a thousand words. You only get one chance to make a first impression. Opportunity doesn’t knock twice. It’s hard to steer clear of clichés when you’re talking about your homepage's most coveted piece of real estate (shoot, did we do it again?), but the fact is, it’s hard to overstate the impact a good hero image can have on how visitors perceive your brand.
Why? Because although there are many things you can do with your homepage, the true power of hero images—as Karol K points out—is that they impose limitations. They allow you to convey one single idea really well. “It’s not that we’re limited by the technology or the screen size,” Karol writes. “The real problem is our brains, or rather the brains of our visitors. Two ideas, two goals, two things that we want from a visitor… it’s twice as confusing as one idea/goal/thing.”
Task Rabbit wants one thing: for you to tell them what you need help with.
Unlike rotating image carousels and multi-image homepage layouts—which allow stores multiple opportunities to capture visitors’ attention and get a point across—with a hero image, you get just one. According to the Nielsen Norman Group, this disrupts the “false sense of security” many web designers and store owners have, and forces them to be more thoughtful about their image choices: “If designers knew they had to choose just one image and a sentiment for it, they may be more likely to choose something that’s powerful and demonstrative.”
So if you only get one kick at the can, one idea, one goal, one action you want your visitor to take, which do you prioritize? Is it more important to educate visitors about your company ethos, or to let them know you’re having a sale? Ultimately, that will depend on your business and your customers, but if you ask us, one of the most powerful uses of the hero area is highlighting your brand’s unique value proposition.
You can read all about how to develop a value proposition here, here and here, but basically what you should be trying to convey is how your company solves a customer problem or satisfies a customer need better than any other brand out there. It’s a tall order, sure, and it might not work for every brand every time, but it’s a great place to start. Here are a couple examples of businesses that have met the challenge.
RideTap's headline insinuates that the “transportation ecosystem” can be a fragmented and disorienting place. It positions the app as a simple, accessible alternative “just a tap away."
Trunk Club does a great job of communicating their three-pronged value proposition in their headline, while their hero image conveys the type and quality of service they offer.
What should a hero image include?
At its core, a successful hero area combines three elements: a striking, high-quality image; clear, concise copy; and a persuasive call-to-action. Thoughtfully considering each of these will result in a better, more informative hero that compels visitors into action.
Humans are visual creatures. We love big, beautiful images flashed against our retinas. But more than that, we love big, beautiful images that make sense and give us context. Your hero can include anything from lookbook photography to illustrated artwork to video, but if it’s “just pretty,” it isn’t going to resonate. Instead, choose something meaningful that says something about who you are and the experience you want your customers to have.
“Show, don’t tell” is good policy when it comes to selecting a hero image (among many other things), but there are some things you just can’t convey with a single, static image. That’s where copy comes in. The headline on your hero image will be the first and sometimes only words a visitor reads on your site, so it’s worth investing the time to get it right. Copywriter Gene Schwartz says he often spends an entire week just crafting the first 50 words of a sales piece—and he’s a pro. Your goal with hero copy is to communicate your value succinctly and to get the visitor to engage with you. Achieving that takes time.
Your CTA is the action you want your visitor to take, and your entire hero image should be geared towards persuading them to take that action. Typically, a CTA takes the form of a prominent link or button that explains what you want the visitor to do. “SHOP NOW”, “LEARN MORE”, and the dead simple “BUY” are examples you’ve no doubt seen before. There’s no definitive answer for which phrase, colour or size works best, but keeping things simple, bold, and “above the fold” have all been proven to increase conversions. It’s also crucial that you test and optimize your CTAs to make sure they’re working as hard as possible.
No Sriracha fan could say no to this rousing Sriracha2Go CTA.
Tips for creating your own hero images
Looking at online storefronts today, you’d be forgiven for thinking that every business has a professional designer in their corner. But the truth is that in the past few years, a number of beginner-friendly design tools have cropped up, making it possible for even the least design-savvy merchant to create beautiful hero images for their store.
Finding the perfect imageIt isn’t hard to find good imagery on the internet. There seems to be an infinite supply of stock photos of powered-down MacBooks, jaunty telemarketers, and firm handshakes—none of which any store owner in their right mind would use in a hero image. Fortunately, it's also possible to find beautiful, uncontrived stock photography—you just need to know where to look. Here are a few of our faves:
- Stocksy - With tens of thousands of outstanding images and a first-rate search, this local stock shop delivers distinctive, pixel-perfect images every time.
- Death to Stock Photo - Founded by two “rogue photographers” fed up with conventional stock photography, DTSP sends subscribers 10 free stock images from a category of their choosing every month. It’s a great way to build up a collection of images for future use.
- Life of Pix - Life of Pix is home to some of the web’s best stock imagery. Want to take your hero to the next level with a video? Check out Life of Vid, which serves up fresh video content several times a month.
Of course, no one’s saying you have to use stock photography for your hero images. If you have the time and the budget, shooting your own images is definitely worth considering. You might be surprised at how easily and inexpensively it can be done—rather than hiring a professional photographer, plenty of merchants these days are using their smartphones and getting great results. Give it a go!
Grovemade could have gone the stock photography route, but by using their own products and creating their own images, they've taken their site design—and likely their conversions—to the next level.
Finding the perfect fontGetting the headline and copy right is incredibly important in hero design, but just as important is the font used by that copy. Designers routinely test out dozens of fonts before settling on one, because they know what a difference it can make. The right font can go a long way toward capturing peoples' attention. The wrong one can obscure and distract from everything else on the page. Here are some of our favourite resources:
- Google Fonts - Once a tangled repository of every open-source font on the web, Google has recently refreshed its user interface and is focusing more on curation and quality. You can filter by categories like Sans Serif and Handwriting, sort through recent and trending fonts, and toggle between different degrees of thickness, slant and width.
- Typewolf - Pairing fonts isn’t easy, but Typewolf makes it easier by highlighting attractive, workable couplings on its gallery homepage. It’s also got some super helpful font recommendations, lists and collections, including "Top 10 1970s Album Cover Fonts" and "Top 10 Most Popular Humanist Sans-Serifs."
- Font Squirrel - With more than 264 fonts ranging from blocky to calligraphic to retro, Font Squirrel is a great spot to snag high-quality free web fonts. It also has a new font identification tool—Font Matcherator—so if you see something you like and want to replicate it, you’re in luck.
Can’t find the perfect font? Make your own! Squarespace's designers hand-crafted type for the hero area of Jeff Bridges' Sleeping Tapes—the perfect fit for the site's mysterious, slightly creepy vibe.
Pulling it all togetherAt this point you’ve got your image, your copy, your font, and your CTA. Now it’s time to pull it all together with a unified, beautiful hero section. Many store owners use Photoshop to accomplish this, taking advantage of the program’s powerful image adjustment tools, but its daunting price tag and steep learning curve can turn off non-designers. The good news is that several alternatives exist that are much more reasonable and beginner-friendly. We recommend these bad boys:
- Canva - Billing itself as “amazingly simple graphic design software,” Canva does pretty much everything an image editor would do, and more. The web app makes it easy to upload your image and copy, plus it has thousands of templates and stock photography in case you need to create something on the fly.
- PicMonkey - Like Canva, PicMonkey has all the image editing tools you could ask for, plus loads of design resources, including cool backgrounds, magnifiable overlays, and fonts. You can do a lot with the free version, but for just $3.50 a month you can double your fun with two times the effects and filters, 1,100 graphic overlays, and no ads!
- Free mockup templates - If you really don’t want to make your own, there are tons of pre-made hero images floating around the internet available to download. A quick Google search should guide you where you need to go, or you can find roundups here, here and here. Most of them allow you to add your own images, branding and copy, or you can use them as-is.