A visitor decides whether to keep reading before they scroll. Five elements on the first screen do most of that work.
Most visitors of a landing page see only the first screen. So it has one task: make clear what the product is and why it is worth one more scroll. Everything below supports a decision that starts here.
The five elements
- A headline that says what the product does and for whom. If it could sit on a competitor’s site unchanged, it is too general.
- A sub-headline that adds the how or the result. One or two lines, no slogans.
- One primary action. “Start free”, “Book a demo” — one, with a quiet secondary link at most.
- The product itself. A real interface, simplified if needed, instead of an abstract illustration.
- One piece of proof next to the action: client logos, a rating, a short number you can back up.
Common mistakes
- A clever headline that needs the rest of the page to be understood.
- Two equal buttons. The visitor has to choose before they know enough to choose.
- A screenshot too small to read. Show one part of the product large, not the whole dashboard small.
- Motion that delays the content. Animation should lead the eye to the action, not stand between the visitor and the text.
- A navigation bar with ten links on a page meant for one action.
How to check your own first screen
Show it to someone outside the team for five seconds and ask three things: what the product does, who it is for, and what they would click. If any answer is a guess, the screen needs work before the rest of the page does.
Then open it on a phone. The headline, the action and at least a part of the product visual should fit without scrolling — on mobile the first screen is even shorter.
Why we design it first
In our projects the first screen is approved before the rest of the page is drawn. It sets the tone, the type and the level of detail for everything below, and it is the cheapest moment to change direction. You can see the result of that approach in our work — for example the homepage for Heroes of Digital.
A strong first screen will not save a page that sends the wrong traffic to it. Match the headline to the ad or the search query that brings people in.
