My goal for this article is to show you examples of compelling and persuasive homepage headers, hero shots and headlines.
I want you to understand why they’re effective, so I’ll riff on what I believe is working.
I’ll tell you, composing the post was a chore. If instead, I chose to present weak homepages I would have been done in one-tenth the time. Sadly, most make you work hard to figure out if you’re in the right place.
But my sunny side’s up today. We’re going to focus on good ones.
Reality check: the number of people that woke up this morning intent on hanging out on your website is exactly zero. Unless they’re already loyal customers, they go here:
Then they type or say some version of what they need. If you’re good at search engine marketing (paid ads) or search engine optimization (organic search), what they’ll do next is:
(For this article, we’ll assume they landed on your homepage. If they landed elsewhere, they’re likely to visit your homepage if they’re interested in what you offer.)
Your website is now in service mode. It only succeeds if it makes a powerful first impression. It has to do so fast. Web wanderers are not known for their patience.
And so…. Some portion of the top of your homepage flashes before them. They take in what appears on their phone, computer, or tablet. The smaller the device, the less they see.
What you want them to see is your header, hero image, and headline.
And what you want them to understand is what your company can do for them.
Websites serve the needs of all kinds of companies, but they don’t serve the needs of first-time visitors unless they quickly and clearly establish the value of being there.
Your goal is to get them to stick around and click around. A successful homepage gets the visitor to dive deeper into your website. Their credit cards are not coming out otherwise.
This leads us back to the discussion of the first impression. What should you show and say atop the page?
There may be a million and one answers, but the correct ones include something that:
Header: Many describe the header as the narrow bar (or strip) that tops the page. Like this:
Websites that feature a distinct header bar often feature logos, navigational links, contact details, search prompts, offers, and more.
I don’t mean to dismiss this topic. Website navigation is extremely important, so dig into these seven best practices and tips to learn more. However, this post is really about the hero image and headline. Modern website design often seamlessly marries all three.
Upon landing on the Orbit Media homepage, there’s no delineation between the header and hero shot. However, when scrolling, the header is separated to give visitors easy access to the website’s main navigation.
Hero: The “space” atop the page may be referred to as the hero shot, hero image or even the header. On occasion, I also see it referred to as the “image banner” or “banner image.” Whatever you call it, it’s what we’re here to examine.
Headline: No rule states a headline must be imposed atop your hero image. Sometimes the headline is above or below it. Sometimes there’s no headline.
Most of the time the homepage headline is designed into the hero shot. Often, a sub-headline follows. Sometimes even more components are included.
This post means to examine the homepage header, hero and headline as one big, vitally important, and (usually) integrated thing. Okay? Again, the point is to learn how to keep people on your website.
Valuable lessons can be extracted from leading SaaS brands because they tend to believe strongly in testing what they do. As such, the companies will establish a specific objective, create a call to action (CTA) to prompt visitors to take action, analyze their results and revise accordingly.
The current hero shot on the FreshBooks homepage probably isn’t the prettiest example we’ll look at today, but may be the best. It works for so many reasons:
SignalVine makes their hero shot work with two calls to action.
ShortStack doesn’t fuss with screenshots, background video or any needless distractions.
I was hard on a slew of marketing automation vendors in a post on my website because so many failed to make their point clearly and fast. Act-On has got their act together here with a good homepage header, hero and headline because:
Here’s a winner from AdEspresso by Hootsuite.
You’ve probably gathered SaaS companies (or at least those with homepages I like) adhere to a certain style that encourages action—usually trials.
Not so with ecommerce companies. They experiment with a variety of approaches and update their homepages often, much like a physical retailer would change their displays throughout the year.
We’ll look at a few ideas I find compelling.
At Beardbrand products don’t spring forth atop the page. They take a completely different tact by offering a quiz.
I’m a big fan of interactive content and applaud a brand bold enough to present a quiz before anything else. Beardbrand seems to be telling me, “We’d like to get to know you.”
Yes, there’s a lot going on atop the NFLShop’s homepage. There often is at ecommerce sites. However, they’ve done several smart things with their layout.
PuraVida Bracelets wants you to have some fun at their online shop.
I love the simplicity of this ecommerce site and wanted to demonstrate having a store doesn’t preclude you from presenting a strong headline. Here’s what I found at Solo Stove:
What I didn’t find was any games, newsletter offers, or limited time offers (though an “Ends Soon” Valentine’s Day Sale served as a sticky footer). It’s refreshing to see an ecommerce company keep it simple.
I also didn’t find a slider or image carousel. Presenting multiple images/headlines/offers in a slideshow format remains a popular approach for ecommerce companies and though it’s often done elegantly, it’s not practical for mobile shoppers and therefore a bit risky.
Here’s a socially conscious approach from Kutoa much like the “purchase with purpose” approach Toms is known for. They could have made the headlines easier to read, but I made it through and feel good about doing business with the brand.
The web is wide. I didn’t get into publishing, restaurants, retail, and countless other business categories here and now. I’ll conclude the show-and-tell section with homepage heroes from a handful of various service companies and product providers.
Beautiful image. Beautiful design. Beautiful one-two, chop/chop headline. Beautiful subhead and CTA. Blurb gives us a wonderful lesson in minimalism.
I plucked the Agati homepage from the Orbit Media portfolio, where visual simplicity reigns. What do we have here?
I don’t love the “We” approach to headline writing and urge you to be careful if you go there. Enso Digital pulls if off well here.
I don’t want to like this extremely minimal header/hero from Perspective API.
And now for a quick look at a personal brand site, a fast-growing category. Chris Ducker’s site also happens to be about personal branding.
The bottom line for what goes atop your homepage is a combination of copy and design that assures the right type of customer he or she is in right place.
Your homework: put your hero shot and headline to the test. Review the points I’ve made above.
If your audience is largely mobile, review what you’ve published on a smartphone and ask yourself if what you see is…
Obviously, I didn’t get to every type of home page. Obviously I didn’t look at all of the web’s 1-billion-plus websites (though it feels like I did). However…
I’m game for looking at yours. Let me know if you’d like me to do so in the comment section below.