“Hero” is designer jargon for the big section at the top of your page — what visitors first see before they scroll down. Your hero consists of your header text, sub-header text, and often an image. You must put a lot of thought into each of these. Nailing header copy has the highest impact on whether people continue scrolling and reading. And it’s the first place we put our value props to work. But, before we do that, let’s explore the hero’s image.
Let’s start with hero’s image.
The purpose of your image is to visualize the value prop described in the header and sub-header. The imagery should always reinforce the copy. It doesn’t distract from it. Remember, messaging-first — not design-first. In practice, this means your image should typically show off the product.
Look at how the example above uses a literal screenshot of the product. That’s typically what you want. If you’re instead selling a physical good, show a picture of it. If you’re selling services, perhaps an illustration could be effective. As another example, here’s how Slack uses illustrations to show employees using their app:
In contrast, what you don’t want is random stock photography of, say, a smiling woman at her desk. There’s zero value in that. People reflexively ignore generic imagery. So it just takes up precious space in your hero. A wasted opportunity. Note that this isn’t just my subjective philosophy on page design. Extensive experimentation shows conversion increases when visitors have an immediate visual understanding of what you’re selling them. Only makes sense, right?
Then do what makes sense — instead of just copying others’ bad design habits. That’s actually the theme of this handbook: be literal, be specific, and be clear. There’s so much fluff on the web that you stand out simply by getting to the point. In advertising, the greatest thing to be achieved is believability, and nothing is more believable than the product itself.– Leo Burnett
Your hero section has two pieces of text: its header (the primary text) and its sub-header. Let’s start with the header. The header must be fully descriptive of what you’re selling. Because, if the visitor doesn’t understand exactly what you do immediately upon landing, they’ll either bounce out of laziness or skim-read the rest of the page until they get the gist. Once they get that gist, they’ll likely bounce anyway because they’re still too lazy to re-read the page from the beginning.
So, start with a good first impression. And that begins with the top of your page. Which means your header text must be fantastic.
Here’s the litmus test for whether your header is sufficiently descriptive: If the visitor reads only this text on your page, will they know exactly what you sell? The subheader, which I cover soon, must satisfy a related litmus test: If the visitor reads only the subheader, will they know why they should care about what you sell? Usually the best way to convey the “why” is to explain how you uniquely do things.
Bad headers — found all over the web — are those that read like slogans instead of descriptions. For example, “Improve your workflow!” or “Supercharge your collaboration!” are useless slogans. If that’s all I read on your page, I’d have no idea what the product actually is.
As in, I wouldn’t know how the product accomplishes those vague aspirations. And people critically want to know the how. And they want to know it immediately.
What does a good, descriptive header look like? Like this:
Ahh. Now those help me understand what you’re selling! I don’t have to dig deeper. And so I can immediately self-identify as someone who does in fact want this thing you’re advertising, which means I’ll have patience to read through the rest of the site to gleam the juicy details.
In summary, a header is written to hook visitors into your product through a description that explains how you solve a problem people care about. But you can’t just throw in a value prop and call it a day. There’s a specific way to write a great header.
Let’s introduce the two-step copywriting process for writing headers:
Find your product’s representative value prop that’s also the most compelling thing to talk about when pitched by itself.
For example, here are some value props a video chat app may have:
Most of these are standard to many video chat apps. And your header is too valuable of a place to highlight something generic. Instead, we’re looking for the value prop that’s the most compelling, yet still fairly represents our product’s core value. Personally, I think the auto-translate feature is amazing. Not only is that value prop differentiating the product within a saturated chat app market, but it’s also representing the app’s core purpose: the ability to chat with anyone.
Turning this value prop into a header may look like: “Have auto-translated video chats with absolutely anyone in the world.”
In contrast, a value prop that doesn’t represent the core purpose of the product would be “get emailed transcripts.” Is this a transcriptions service? No, it’s a chat app. So don’t put this value prop in your header.
One more example of a bad value prop to highlight: “Chat with anyone quickly.” A header for this may read as follows: “Find someone to video chat within less than 30 seconds.”
This is not a good header because the product quality of speed isn’t likely why people actually like one chat app over another. Meaning, it’s not compelling. So let’s revisit the good header examples from earlier. Notice how we highlight a representative value prop in the first sentence of each:
To summarize: Identify one product value prop that you can call out in your header to represent
This serves the dual purpose of generating intrigue while also being clear. In other words, it increases desire and decreases labor.
Let that soak in before you continue reading. Most people overlook their headers.
Now that we’ve intrigued visitors with a value prop, we need to finish the header text by also stating why the value prop even matters.
Here are two examples of extending a header with the why:
“Riley texts your real estate leads for you — to automatically qualify them.”
“Have auto-translated chats with foreigners — to have fun learning any language.”
Or, once again, our examples from earlier. Notice the purpose that the second sentence always serves: pointing out what makes the first sentence valuable.
Finally, for contrast, here are some bad header examples:
When I write an advertisement, I don’t want you to tell me that you find it ‘creative.’ I want you to find it so interesting that you buy the product.– David Ogilvy
Now that your header explains what you do, use your subheader to describe how. People really like to know the how. (Millions read Wikipedia for a reason.)
Specifically, how is critical to landing page conversion because it lifts the veil on what you do — to prove you have thoughtful solutions to the visitor’s real problems.
Plus, when someone learns the how, they become further invested in your solution.
There are two exceptions to this “explain the how” rule:
Off topic, to read handbooks (like the one you’re reading now) a few months before I publish them, you can provide your email below. I’m releasing how to write fiction, think critically, and play piano. I only email once every three months.You can see all my published handbooks here.
Now that you’ve succinctly described what you do and why, it’s time to convey the credibility of everything you do through social proof.
Your social proof section is a collage of logos showing off your press coverage and/or your most well-known customers. Or if you’re an ecommerce product, you can state how many customers you have (if it’s an impressive amount).
Your goal is to make it seem like everyone in the world already knows about you, and to make the visitor feel left out of all the excitement. Foster dat FOMO, am i rite.
Effectively, that’s the goal of social proof: creating intrigue by getting people wanting to be part of your elite club.