Skip to content
Prashant Kumar Singh
Book a call

Freelance project · Websites

Hero Section Explorations

Exploring how the first screen of a website earns attention

A set of website hero section explorations across layout, type and imagery. Every variant answers the same brief, so the trade-offs between patterns are easy to compare. I designed the set as a reference for choosing a hero on future sites.

Role
Product design
Type
Freelance
Platforms
Web
Scope
Visual design, Layout

01The problem

What needed solving

The hero carries more weight than any other part of a website: it has to say what the product is, who it’s for and what to do next before the visitor scrolls. Heroes are often chosen by taste or trend, without comparing patterns against the message they need to carry.

Who it’s for

  • Founders launching a site

    A hero that explains the product at first glance.

  • Marketing teams

    Patterns they can compare, test and reuse.

  • Designers and developers

    Layouts that hold up across screen sizes.

02The main flow

What a visitor does in the hero

The moment in blue is the one the whole design is built around.

  1. 01

    Reads the headline

  2. 02

    Scans the visual

  3. 03

    Checks the proof

  4. 04

    Clicks the main action

  5. 05

    Scrolls for detail

03Structure

How Hero explorations is organised

Everything has one home. Getting this right first keeps every screen simpler.

Type-led

  • Oversized headline
  • Split headline and detail

Image-led

  • Product screenshot
  • Full-bleed photo
  • Line illustration

Interactive

  • Short product motion
  • Live demo

Proof-first

  • Proof under the action
  • Separate proof band

Mobile

  • Stacked layout
  • Sticky action

04Key decisions

Choices that shaped it

What I considered, what I chose, and why.

Decision 01

Type-led or image-led, by product

Image-led heroes look rich but can bury the message, while type-led heroes are clear but can feel bare.

Considered

Default to a large product screenshot on every site.

Chosen

A rule of thumb: type-led when the product is new or abstract and needs explaining, image-led when the product is visual and the image itself explains it.

Why it works

The choice follows what the visitor must understand first, not the current trend. Type-led heroes then need stronger copy, which I noted for each variant.

Decision 02

One primary action, one quiet link

Two equally weighted buttons split attention and make visitors hesitate.

Considered

Two filled buttons side by side, such as Get started and Book a demo.

Chosen

One filled primary button, with a secondary action as a text link, and only when it serves a different kind of visitor.

Why it works

A clear hierarchy speeds up the decision, while the link still catches visitors who aren’t ready to commit.

Decision 03

Motion that explains, not decorates

Animated heroes catch the eye but can delay reading, distract and slow pages on mobile.

Considered

A background video or looping decorative animation.

Chosen

Motion only where it shows the product working, starting after the headline is readable and turned off for people who prefer reduced motion.

Why it works

Motion has to earn its place by explaining something. Respecting reduced-motion settings keeps the hero accessible.

05What’s inside

Key features

Layout variants

Centred, split and asymmetric grids tested against the same message.

Headline type scales

Type sizes and line lengths tuned so the headline reads at a glance.

Proof placement

A short line of proof under the action compared with a separate proof band.

Purposeful motion

Short product sequences that start after the headline and respect reduced motion.

Mobile checks

Every variant redrawn for small screens with the action kept in view.

06Outcome

What was delivered

Delivered

  • A set of hero variants built from one fixed brief
  • Desktop and mobile versions of each variant
  • Notes on when each pattern fits and what it costs
  • Reusable hero components with type and spacing tokens

What I learned

  1. 01

    Fixing the message and changing only the pattern made the comparison fair and the lessons clear.

  2. 02

    Most heroes improved when I removed something rather than added it.

More work

All work

Freelance project · Websites

Coaching Landing Page

From visitor to booked call

Freelance project · Websites

Educational Institution Landing Page

Admissions-first website

Freelance project · Websites

Executive Search Website

Recruiting firm website

Next step

Tell me what you're building.
I'll tell you how I'd ship it.

Pick a time that suits you. You'll leave the call with a clear next step, whether we work together or not.

Book a free call

Free · 30 minutes · No commitment

Prefer email? prashantkumarsingh.work@gmail.com

Book a free 30-min call