The hero section in web design: visitors decide on the first screen
The first area you see when you land on a website is called the hero section. A headline, a short line of copy, an image or some motion, and usually a button. It sounds simple, but this area does more work than the rest of the site: in a few seconds it tells visitors where they are, who they're dealing with and why they should stay.
The decision takes milliseconds, not seconds
In research published in 2006 by Gitte Lindgaard and colleagues at Carleton University, participants rated web pages after seeing them for only 50 milliseconds, and those first ratings largely matched the ones they gave after looking for much longer. A study Google shared in 2012 narrowed the window to 17 to 50 milliseconds and showed two things stood out: users prefer designs that are simple and that feel familiar for their category.
In other words, visitors decide on their overall impression of your site before they read a word. The area that creates that impression is the hero.
Attention gathers on the first screen
According to Nielsen Norman Group's 2018 eye-tracking research, users spend 57% of their page-viewing time on the first screen and 74% within the first two screens. People do scroll, but only once they're convinced it's worth it. That convincing happens on the first screen.
Five parts of a strong hero section
- A clear value proposition: Say what you do, who you do it for and why you, in one sentence. Lines like "Welcome" or "Designing the future together" fit every brand and say nothing.
- One primary action: Get a quote, see the menu, book an appointment. Offering four options at once often means visitors choose none. A secondary link is fine, but there should be one main button.
- Visuals or motion that carry the brand: Show your product, your work or your space instead of stock photography. If you use motion, keep it calm and purposeful, never distracting.
- A trust signal: Logos of brands you've worked with, a short client quote or a concrete number such as "300 brands in 8 years". Visitors don't know you yet; these small signals close that gap.
- A cue to keep going: An arrow, a section peeking in from below or a "scroll" label that suggests there's more. If the first screen feels self-contained, visitors may assume the page ends there.
The mistakes we see most often
A slider with five different messages. When each slide says something different, none of them sticks; most visitors see the first slide and move on. Choose one message and say it well.
Heavy video and slow loading. Largest Contentful Paint (LCP), one of Google's page experience metrics, measures how long the largest element on screen takes to load, and that element is very often the hero image. Google recommends keeping it under 2.5 seconds for a good experience. Serving the image at the right size and in a modern format (WebP, AVIF) makes a difference for both users and search rankings.
Designing for desktop only. Most visitors arrive on their phones. A headline that feels spacious on desktop can fill a phone screen and push the button out of view. The hero needs to be considered separately for every screen size.
A first screen disconnected from the brand. If your logo, colours and tone of voice point one way and your hero points another, visitors sense the inconsistency in the first second. The first screen is the brand identity's first application online.
What we did on our own site
On the Dada Studio homepage we show our work instead of a slogan: as you scroll, a ring opens and 16 of our projects take the stage in turn, each card leading to its project. There is one primary action: the Get a quote button in the menu. For a studio, the strongest value proposition is the work itself, so we built the hero as a showcase.
A quick checklist
- Can someone seeing your site for the first time say what you do after 5 seconds?
- Is there a single, clear primary button on the first screen?
- Is the image yours, or a stock photo another brand could use too?
- Do visitors need to scroll on a phone to see the button?
- Does the hero image load in under 2.5 seconds?
If you'd like to rethink your site's first screen together, take a look at our web design service or request a quote.
Source: Nature, Lindgaard et al., January 2006
Source: Google Research, August 2012
Source: Nielsen Norman Group, Scrolling and Attention, April 2018
