Element — Hero

“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.

Hero — 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

Hero — Header

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 pagewill they know exactly what you sell? The subheader, which I cover soon, must satisfy a related litmus test: If the visitor reads only the subheaderwill 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.

Hero — Header — Be specific

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:

  • For a website design tool — “Visually design and develop sites from scratch. No coding.”
  • For a grocery delivery service — “Groceries delivered in 1 hour. Say goodbye to traffic, parking, and long lines.”
  • For a home rental service — “Rent people’s homes. So you can experience a city like a true local.”

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.

Hero — Header — Writing it out

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:

I. Identify a value prop that conveys the product’s core purpose

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:

  • ‍Chat with anyone quickly
  • Chat on your phone, tablet, or desktop
  • Auto-translate real-time conversations regardless of language
  • Get transcripts for every conversation — emailed to you

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:

  • For a website design tool — “Visually design and develop sites from scratch. No coding.”
  • For a grocery delivery service — “Groceries delivered in 1 hour. Say goodbye to traffic, parking, and long lines.”
  • For a home rental service — “Rent people’s homes. So you can experience a city like a true local.”

To summarize: Identify one product value prop that you can call out in your header to represent

  1.  what makes you unique and
  2.  what you fundamentally offer.

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.

II. State the high-level purpose

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.

  • For a website design tool — “Visually design and develop sites from scratch. No coding.”
  • For a grocery delivery service — “Groceries delivered in 1 hour. Say goodbye to traffic, parking, and long lines.”
  • For a home rental service — “Rent real people’s homes. So you can experience a city like a true local.”

Finally, for contrast, here are some bad header examples: 

  • Bad — “Forest App: Stay focused, be present.” This is too much of a slogan.
    Better — “Forest is an app that prevents phone addiction. So you can focus on what’s more important in life.”
  • Bad — “Payments made simple.” There are tons of payment processing services. And this text doesn’t explain why yours is better or even who it’s uniquely for — companies, freelancers, buyers, ecommerce sites? 
    Better — “Start accepting payments in one click. No coding knowledge required.”
  • Bad — “Extend your software development team.”
    Better — “Add senior remote devs to your team. Get higher quality for less cost.”

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

Hero — Subheader

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.
For example:

  • Real estate app subheader — “Our network of remote concierges monitor your email inbox and respond to leads when you’re too busy to.”
  • Video chat app subheader — “In real-time, our on-call team transcribes and translates your words into over 20 languages.”

There are two exceptions to this “explain the how” rule: 

  1. Self-evident products — If your product’s how is truly self-evident (e.g. your header is “We are a photography agency” or “We sell mattresses”), use your subheader to proactively address visitors’ major concerns or to differentiate yourself from competitors. Do this in a single, concise sentence.
  2. Obscure products — If people don’t yet know much about your product category, use your subheader to explain why what you sell is valuable to begin with.
Tip — Keep subheaders within 10-13 words. Otherwise they turn into paragraphs.

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 fictionthink critically, and play piano. I only email once every three months.You can see all my published handbooks here.

Element — Social proof

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.

Tip — If you don’t yet have noteworthy customers, provide your product for free to people at well-known companies. Then place their company logos on your site if they wind up using you.