Stage 1 Setup

Hero Section

Below is an example hero section.

Your Hero section is the first thing your website visitor sees when they land on your homepage, so it’s primary goal is to inform.

A perfect hero message should make clear what you do, for whom you do it, and why you exist.

What, Whom, Why

Your Hero Section Should:

  • Help your visitor quickly determine if your website, product, or service will be useful to them
  • Establish credibility and trust
  • Seize your user’s attention and convince them to explore further
  • Entice your visitor to perform your desired call to action (the “next step” you want users to take on your site)
  • Be crisp, clear and compelling
  • Be short, snappy, and memorable
  • Be related to what your client is trying to achieve

An Effective Hero Section

Here is a good example of a hero section from web-based list-making application Trello:

Why it works:

  • It explains what they do: Trello offers boards, lists, and cards its customers can use to organize and prioritize their projects
  • It explains how their service benefits their customer: Trello “lets you work more collaboratively and get more done.”
  • It focuses on the “you”: Trello “lets you work more collaboratively.” It “enables you to organize and prioritize your projects.”
  • It has a clear call to action: The bright green button stands out against the blue background and calls for the visitor to sign up for the service for free

Write Your Hero Section

Remember to frame this from the user's perspective. For example, a user might want to 'Get Started' - this implies excitement, motivation, energy. They might not want to 'Sign Up Now' - because this implies debt, servitude, obligation etc.
Use the text syling features to give an indication of the formatting