Above the Fold: Designing What Visitors See First
When someone lands on your website, they make a snap judgement long before they read a sentence or scroll a single pixel. The part of the page that appears in the browser window before any scrolling happens is called the area "above the fold," and it carries a disproportionate share of the work your site has to do. It is where visitors decide whether they are in the right place, whether you understand their problem, and whether it is worth staying a few seconds longer.
The term comes from newspapers, where editors placed the most important story above the physical fold so it was visible on the newsstand. On the web there is no single fold anymore, because screens come in every size. But the idea still holds: the first screen a visitor sees sets the tone for everything that follows. This guide explains what belongs above the fold, how to design it for clarity rather than clutter, and the common mistakes that quietly cost businesses their best visitors.
Why the first screen matters so much
People browse the web quickly and impatiently. They scan rather than read, and they leave pages that fail to confirm their expectations within seconds. The first screen is your one reliable chance to answer three silent questions every visitor brings with them: What is this? Is it for me? What should I do next? If the area above the fold answers all three clearly, you have earned permission to keep the conversation going. If it answers none of them, the visitor reaches for the back button.
This does not mean visitors never scroll. They do, and good content below the fold keeps them moving. But attention is heavily front-loaded. Whatever sits in that first viewport gets seen by nearly everyone, while content lower down is seen by progressively fewer people. That makes the top of the page the most valuable real estate you own, and it deserves your most careful thinking.
The myth that nobody scrolls
For years a popular belief held that you had to cram everything important above the fold because visitors would not scroll at all. That belief is outdated. Modern visitors scroll naturally and expect to. The real goal is not to squeeze every detail into the first screen, but to make the first screen compelling enough that scrolling feels worthwhile. Think of it as the opening of a story, not the whole story.
What belongs above the fold
A strong above-the-fold area is built from a small number of elements working together. Each one has a job, and crowding the space with extras dilutes them all. Here are the components that earn their place.
A clear, specific headline
Your headline is the single most important piece of text on the page. It should say what you do and who you help in plain language. Avoid clever wordplay that requires a second read, and avoid vague slogans that could belong to any business. A visitor should be able to glance at your headline and immediately understand whether they are in the right place. Specific beats clever almost every time.
A supporting subheadline
Beneath the headline, a short supporting line adds the detail the headline left out. If the headline states the outcome, the subheadline can explain how you deliver it or for whom. Together they form a compact value proposition that a busy visitor can absorb in a couple of seconds.
One primary call to action
Every above-the-fold section should make the next step obvious. That usually means one clearly styled button with action-oriented text. Resist the urge to offer several competing buttons of equal weight, because a visitor faced with too many choices often makes none. Pick the single action you most want people to take and give it visual priority. A secondary, lower-emphasis option is fine, but the hierarchy should be unmistakable.
A relevant visual
An image, illustration, or short looping video can communicate context faster than words. The key word is relevant: the visual should reinforce your message, not just decorate the space. A generic stock photo of people shaking hands adds nothing, while a clear image of your product in use, or of the result you deliver, helps the visitor picture themselves benefiting.
| Include above the fold | Push below the fold |
|---|---|
| Clear headline and subheadline | Detailed feature lists |
| One primary call to action | Long-form explanations |
| A relevant supporting visual | Full testimonials and case studies |
| A simple trust signal | Pricing tables and FAQs |
A small trust signal
A single, honest trust signal can reassure a first-time visitor. That might be a short line noting how many customers you serve, a recognisable logo of a client or partner, or a brief rating. One is plenty. A wall of badges above the fold reads as anxious rather than confident, so choose the strongest signal and let it stand alone.
Designing for clarity, not clutter
The most common above-the-fold mistake is not too little, it is too much. When every element competes for attention, nothing wins. The discipline of good design above the fold is mostly the discipline of leaving things out. A few principles help.
Establish a clear visual hierarchy
Hierarchy is the order in which your eye notices things. Your headline should be the most prominent element, your call to action the most eye-catching interactive element, and everything else supporting. Use size, weight, colour, and spacing to guide attention deliberately. If you are unsure whether your hierarchy works, squint at the screen: the elements that remain visible are the ones carrying the message.
Give elements room to breathe
Generous spacing makes the important things stand out and signals quality. Cramped layouts feel stressful and cheap. Whitespace is not wasted space, it is the tool that gives your headline and button the prominence they need. When in doubt, remove an element rather than shrinking the gaps.
Respect different screen sizes
Because there is no fixed fold, you have to design for the range of devices your visitors actually use. A layout that looks balanced on a large desktop monitor can bury your call to action far below the first screen on a phone. On smaller screens the headline and primary button should still appear without scrolling, even if the supporting visual moves or shrinks. Always preview the top of your page on a phone, not just a laptop.
The encouragement to scroll
A subtle but powerful detail is the cue that there is more below. If your first screen looks like a complete, self-contained block with a hard edge at the bottom, some visitors assume that is all there is. You can invite scrolling by letting the next section peek into the bottom of the viewport, so a sliver of the following content or a partial image hints that the story continues. This small overlap nudges people downward without any instruction.
Avoid the opposite problem too. A first screen so tall that it fills the entire viewport with a single image and nothing else can leave visitors unsure what to do. The aim is a complete thought above the fold paired with a gentle promise of more.
Common mistakes to avoid
Even well-intentioned designs fall into a few recurring traps. Watching for these will save you from the most expensive errors.
Leading with a vague headline
If your headline could belong to any company in any industry, it is not pulling its weight. Phrases that sound impressive but say nothing specific waste your most valuable moment. Replace them with language that names the visitor's problem or the outcome they want.
Hiding the call to action
Sometimes the most important button is styled so quietly that it blends into the background, or it sits so low that it never appears in the first screen on common devices. If a visitor cannot find the next step quickly, many will not look for it. Make the primary action visible and inviting.
Slow-loading hero images
A large, beautiful image above the fold is worthless if it takes several seconds to appear. While it loads, visitors stare at a blank or broken space and form a poor impression. Optimise images carefully so the top of your page renders fast, and consider how the layout looks before the visual finishes loading.
Trying to say everything
The instinct to prove your full value in the first screen leads to cluttered, overwhelming designs. Trust the rest of the page to do its job. The fold is the headline of your story, not the entire chapter.
A practical checklist
Before you call an above-the-fold section finished, walk through a short test. Can a stranger tell what you do within a few seconds? Is there one obvious next step? Does the layout hold up on a phone? Is the most important text the most prominent? Does anything load slowly enough to frustrate a visitor? If you can answer those honestly and fix what falls short, your first screen will already be doing far more than most.
The space above the fold is small, but its influence is large. Treating it as the most important design decision on your site, rather than an afterthought, pays off in visitors who stay, understand, and act. For a broader view of how this fits into a complete project, see our custom web design guide, and explore how the first screen connects to what makes a website convert and the closely related craft of designing a great hero section.
Frequently asked questions
Is the fold still relevant now that everyone scrolls?+
How tall should the above-the-fold section be?+
Should I put more than one button above the fold?+
Does the fold matter on mobile?+
References
- Nielsen Norman Group, "Scrolling and Attention" β nngroup.com
- Nielsen Norman Group, "First Impressions Form Quickly on the Web" β nngroup.com
Ready to make your first screen work harder? Learn more about our approach to web design, or get in touch to talk through your project.