Above the Fold: First-Screen Design Rules

DesignSeptember 2026

Above the fold describes everything a visitor sees before scrolling — and for a personal-brand page, that first screen decides whether they scroll at all. The rest of your page can be perfect; if the fold fails, almost nobody finds out.

## What the first screen must do

The fold has one job: earn the next second of attention. Three elements do the heavy lifting:

- A clear value proposition — one sentence that says who you are and what you deliver, not a slogan.

- One obvious action — a single button (contact, portfolio, newsletter) instead of five competing ones.

- Proof within view — a name, a face, a headline number, or a logo people already know you by.

If any of these needs a scroll to find, the page is asking for effort it has not earned.

## Common first-screen mistakes

- Hero copy that describes the industry instead of the person ('Creative solutions for modern businesses' says nothing about you).

- Navigation that crowds the fold. Every extra link is a small tax on the decision you actually want visitors to make.

- Animation that delays content. A two-second intro can lose the visitor who arrived with a question.

## Rules that hold up on any screen

Design the single-column mobile layout first, then widen it. Mobile forces you to keep the sequence tight, and desktop usually just needs spacing. Keep the headline under ten words where you can, and put the action button where the eye lands naturally — typically just under the headline, not buried in a menu.

## How to test your fold

Load the page, look at it for three seconds, then answer two questions: what does this person do, and what am I supposed to do next? If you cannot answer both, the fold needs work. A quick sanity check: run the same test on a phone, because the fold is much shorter there.

To see these rules applied, browse the layout examples on the [home page](/), or read how the magazine layout handles hierarchy.

·