How to Write a Hero Section

Leopold's draft fills the meeting-room TV: "Your next chapter starts here," beside a soft illustration and a button labelled "Discover." A colleague from accounts leans over and asks what the product does. Leopold looks at the screen for something he can point to.

Leopold and Briarnote Reports are invented for this lesson. The tool turns a consultant's selected project notes into an editable weekly client report.

The colleague's question leaves Leopold with a specific revision to make. Someone arriving at this screen needs to recognise the reporting task and understand what they can inspect next. He opens the draft beside the product brief.

Decide what the first screen must establish

The product brief gives Leopold what the slogan left out: reporting software for independent consultants. He follows a selected note into a sample report and sees what the hero could show. A visitor could inspect that output before connecting project data.

The landing-page copywriting lesson explains how the traffic source sets expectations. Here, assume the visitor clicked an ad about weekly client reports. Keep that task visible while you write the first screen.

A slogan about better work may express the company's ambition. It leaves the product category unstated, as the colleague's question shows.

Google Ads describes landing-page experience in terms of relevance and usefulness to people clicking an ad. Apply that guidance by comparing the ad's invitation with the screen it opens. It supplies no evidence that a particular headline will lift conversion.

A hypothetical first-screen brief

Turn selected project notes into a weekly client status report.

Recognize the job

Explain the mechanism

Make inspection easy

Recognize the job

• Name weekly client reporting in the headline or immediate supporting line.

Explain the mechanism

• Show how selected notes become sections in an editable report.

Make inspection easy

• Offer a sample report before asking someone to connect live project data.

Give the headline one claim

Leopold tries "Make a client status report from the notes you already keep." The named output answers the colleague's question. Supporting text can explain the consultant's responsibility for selecting and reviewing the material.

You could lead with the audience instead: "Weekly status reports for independent consultants." Use headline-writing methods to explore alternatives, then choose the direction that fits the visitor's arrival context.

I wouldn't shorten the line just to fit a preferred word count. Put it in the actual layout and ask someone what the product does. If they describe a writing agency, you may need to make the software category more explicit nearby.

Use the subhead to add missing information

The new headline names the output, but says nothing about which notes reach the client. Leopold adds the selection and review steps to the supporting copy. Those details explain what the consultant controls before a report is shared.

Watch for a second headline dressed up as a paragraph. "A better way to keep clients informed" repeats the promise without explaining the process. Replace it with the consultant's next action: "Choose which notes to include."

Unbounce's anatomy guidance treats supporting copy as an extension of the main proposition. Use that relationship when dividing information between the headline and subhead. Leave out a second general promise about better work if it crowds out the process.

The complete hypothetical hero now gives each element its own job:

Headline

Make a client status report from the notes you already keep.

Supporting copy

Reporting software for independent consultants. Choose which notes to include and review the grouped sections before exporting an editable report.

Button

Open a sample report

Condition beside the button

No account needed for the sample.

Check the sample destination before approving the no-account condition.

Choose an action that fits the reader's readiness

The visitor has just learned what Briarnote does. Opening a sample report lets them inspect the output before committing their own material. Leopold replaces "Discover" with a label that names that destination.

Check the nearby condition as carefully as the button. If the sample requires no account, the click needs to open it without a registration wall. A trial with billing requirements would need its own accurate explanation next to the action.

Make the action that serves this visit the most prominent. For Briarnote's visitor, that means "Open a sample report"; account creation can sit behind a quieter link for someone ready to proceed.

The calls-to-action lesson explains this handover in more detail.

Make the visual answer a question

Leopold replaces the floating illustration with selected notes alongside an example report. He includes the selection checkbox and the review control so a visitor can follow one note into the report.

At phone size, check that the selected note and its report section can both be read.

Check what the screenshot implies

Use invented notes, with one selected and another left unchecked. Show only the selected note in the sample report, with the review control legible. Keep private client material out of the mock-up.

The illustration shows the lesson’s hypothetical hero section and claims no customer evidence or results.

W3C's informative-image guidance says text alternatives should convey the image's information or meaning. Describe what this comparison shows, and keep essential instructions in real page text too. A screenshot shouldn't become the only place the review requirement appears.

Try this text alternative: "A selected project note appears in the sample report beside a review control, while an unchecked note stays out."

Decorative art can set a distinctive mood, which is a fair design job. It still takes space and attention. When the offer is unfamiliar, I'd usually spend that space showing the actual object first.

Where is the fold on a landing page?

Leopold opens the revised layout on a phone next to the meeting-room screen. The notes-and-report visual takes much more of the phone's first view. He reduces its prominence so the offer can be read before it fills the screen.

Nielsen Norman Group's 2018 study found about 57% of page-viewing time above the fold and 74% within two screenfuls. Those attention findings give Leopold reason to check the top carefully; they establish no winning button position for this page.

The bottom edge of the first view changes with screen size and browser controls. Text scaling changes it too. Test the reading order at narrow widths and with larger text, keeping details such as account or billing requirements close to the action they explain.

Test comprehension before decoration

Show the revised hero to someone resembling the intended reader. Ask what the offer does and what they expect after clicking. Then let them follow the action while you record where their expectation matches or differs from the destination.

If they say "All my project notes go to the client," ask them to point to where they'd choose the notes. Check whether the selection line was unclear or the sample made that control hard to find.

A five-second review can reveal what someone notices under an artificial time limit. To check Briarnote's selection-and-review process, let the person read at their own pace and ask which notes a client would receive.

Review the first screen on a narrow viewport

Do

• Keep the product and intended job understandable before the illustration.
• Let supporting text wrap naturally and remain readable at larger text sizes.
• Keep commitment details next to the action they explain.

Avoid

• Shorten the headline until it loses the product category.
• Hide an account or billing requirement to make the button fit.
• Treat a desktop screenshot as proof that the mobile order works.

Review the whole first screen

Put a complete hero into your page draft, with a working sample destination. Compare it with the product brief and remove duplicated claims. Add a note naming the question the next section needs to answer; landing-page anatomy can help you place that section.

Use Landing Pages to continue developing the page around this first screen. Keep the narrow-screen view alongside the desktop version, with any misunderstanding and proposed revision attached.

Back at the TV in this invented scene, the colleague reads the new headline: "It makes client reports from my notes." Opening the sample, they point to the selection control and explain that they choose the notes and review the report. Leopold records those answers against the brief.