Above the Fold That Works: One Job, One Proof, One Action

The hero is not a collage. It is the title card. If the first viewport has two jobs, it has none. Put brand, one point-of-view headline, one support line, one primary action, and one visual plane in that first screen — then cut everything that fights them. Brand sites convert when the fold creates recognition and offers a single obvious next step. Everything else is Act Two. This spoke deepens the fold rules inside Websites That Feel Like Films.

The short answer

• Put: brand mark, one headline with a point of view, one support sentence, one primary CTA, one dominant visual, optional quiet secondary, optional one specific proof.
• Cut: badge clusters, stats strips, two filled buttons, carousel slides, announcement-bar stacks, eight-field forms, autoplay sound, text burned into a photo with no HTML equivalent.
• Conversion at the fold is a three-beat chain: who this is, what they want me to do, why I should believe them enough to tap.
• Design the mobile fold as a first-class composition. Desktop balance that drops the CTA below the first phone screen is a failed fold.
• Measure primary CTA clicks, scroll past the fold, and completed actions downstream. A pretty fold nobody taps is a mood board.

What should be above the fold on a website?

The first screen has a hard inventory. If an element is not on this list, it does not start on the fold.

Slot	What goes there	What “done” looks like
Brand	Name or mark large enough to own the frame	Identifiable with the nav hidden
Headline	One line with a point of view or offer	Could not sit on a competitor unchanged
Support	One sentence: audience or outcome	Not a second headline, not a paragraph
Primary action	One filled button or tel: control	Visible on a 390px phone without scroll
Visual plane	One full-bleed still (or equivalent)	Brand world, not a generic gradient
Optional proof	One specific receipt	Named type, rating + count, or one outcome
Optional secondary	Ghost button or text link	Visually quieter than the primary

Inventory checklist before you open Figma:

• Brand mark is a hero-level signal, not a 24px favicon in the corner
• Headline states a point of view or an offer, not a category label
• Support line is one breath
• Primary CTA label names the next step (Book a sprint, Call now, Listen)
• Dominant visual shows the work, the place, the artist, or the craft
• Proof, if present, is a single line — not a logo row pretending to be a sponsorship wall

If removing the nav would make the fold look like it could belong to another company, strengthen the mark and the art direction before you rewrite the headline again. That brand test is harsh and useful.

Nielsen Norman Group still treats the homepage as an elevator pitch: say what the organization does and what a visitor can do, at a glance. Their homepage principles put the most important content in the first screen and treat that screen as the gatekeeper for whether anyone scrolls (Homepage Design: 5 Fundamental Principles).

What should you cut from above the fold?

Most broken folds are not missing a clever headline. They are overcrowded. Cut in this order.

Cut this	Why it fails on the fold	Put it here instead
Badge / award collage	Reads as a sponsorship wall; steals the title card	Proof scene, one row, no carousel
Stats strip (4–6 numbers)	Proof dumped as chrome; usually a symptom of an unclear offer	One number if it is the offer; else scene two
Second filled button	Two equal actions split attention	Ghost / text link, or pick one job
Homepage carousel	Later slides go unseen; first slide never settles	One directed still
Announcement bar + promo + hero CTA	Three screams, zero composition	Rewrite the fold job for the campaign, or kill the bar
Eight-field form	The fold becomes a tax form	Click-to-call, or two fields max, detail later
Autoplay sound	Hostile. Bounced.	Never
Floating promo stickers	Collage, not a title card	Campaign landing page
Hiring / webinar / podcast tiles	Bulletin board	Later scenes or separate URLs
Mega-menu as the real homepage	IA anxiety leaking into the first screen	Quiet nav; fold keeps the job

Cut procedure I run in reviews:

1. Screenshot the first phone screen and the first desktop screen.
2. Circle every tappable control. If you circle more than two (primary + quiet secondary), you have a fight.
3. Cover the nav with your hand. If the brand disappears, the mark is too small or the art direction is rented.
4. Read the headline out loud. If it could sit on a competitor, it is a category label — rewrite.
5. Delete one element. If the fold gets clearer, that element was the problem.

Seasonal overlays follow the same rule. A sale banner should not steal the primary CTA’s contrast or position. If a campaign needs fold presence, temporarily rewrite the fold job. Do not stack jobs. Remove expired campaigns on a calendar, not when someone notices in October.

Why does above the fold still matter?

People scroll more than they did in 1997. They still spend most of their viewing time at the top. Nielsen Norman Group’s later eyetracking put about 57% of page-viewing time above the fold, and 74% in the first two screenfuls (Scrolling and Attention). Their fold manifesto’s midpoint estimate: an 84% difference in how people treat information above versus below the fold (The Fold Manifesto).

That is not an argument for cramming the entire site into 700 pixels. It is an argument for ranking. The first screen decides whether the rest of the page gets a chance.

Claim you can defend	Source	What it means for the hero
First screen is the gatekeeper	NN/g homepage principles	Job + action must be visible without scroll
~57% of viewing time is above the fold	NN/g scrolling study	Do not spend the first screen on atmosphere alone
~84% treatment gap above vs below	NN/g fold manifesto	Proof and process can wait; orientation cannot
Aesthetic verdict in ~50ms	NN/g on first impressions	Art direction is not decoration; it is the first trust hit

False floors kill this. A full-bleed hero that looks like the end of the page — no peek of the next scene, no scroll cue, no reason to believe there is more — trains people to bounce. Continuity matters: a sliver of the next section, a crop that implies a world below, or a support line that promises proof if they keep going.

If visits are healthy and leads are not, the fold is often the first place the path dies. Diagnose intent and broken tap paths before you fund a redesign — that triage lives in Traffic But No Leads.

How should a website hero headline work?

Write headlines that state a point of view or an offer, not a category. “Websites” is a category. “Sites that feel like films and still convert” is a point of view. “HVAC” is a category. “Same-day AC repair in Tampa — call now” is a job.

Weak headline	Why it fails	Stronger rewrite
“Welcome to our studio”	Greeting, not a job	“Brand sites that feel like films — and still get booked”
“Creative digital solutions”	Could be anyone	Name the deliverable and the buyer
“Home of [Genre] music”	Category sticker	Artist name + the world + Listen
“Your trusted local experts”	Empty intensifier	Service + geography + Call
A paragraph wrapped as an H1	Cannot be grasped in one glance	Headline + one support sentence

Support lines clarify audience or outcome in one breath. They are not a second headline. If you need a paragraph, you need a later section.

Headline workshop — five people, five seconds, phone in hand:

1. Show the fold. Hide it.
2. Ask: what does this company do?
3. Ask: what did they want you to tap?
4. If answers diverge, fix messaging before polish.
5. Put the most important words first. Poetry can live in the support line or in scene two.

Nielsen Norman Group’s 5-second test is built for this: five seconds is too short to read body copy, long enough to form a first impression of style and prominence. Use it on the fold, not on the whole homepage scroll.

Avoid empty intensifiers. If the headline could sit on a competitor with no edits, it is too generic. I have shipped hundreds of production sites; the folds that convert are the ones a stranger can repeat out loud.

Should a website hero include stats?

One proof element can live near the fold if it is specific. Five logo blobs and three award seals turn the title card into a sponsorship wall.

Proof that earns a seat	Proof that does not
“Sites for touring artists” (named type)	Six gray client logos at 40% opacity
“4.9 from 180 Google reviews” (rating + count)	“Award-winning” with no award named
“Booked from the site, not the bio link” (one outcome)	A rotating logo carousel
One license or certification line (trades)	A collage of unverifiable seals

Placement rules:

• Proof is a caption, not a second hero.
• When legal or sales demand logos on the fold, negotiate a single static row with opacity control — or push to scene two.
• A single accurate license line for a trades business outperforms a pile of badges.
• Stats belong in a proof scene unless one number is the offer.

Heavier proof — case studies, before/after, tour history, process — belongs in the next scene. The fold’s job is orientation and action. The proof scene’s job is belief. Do not merge them into sludge.

How many CTAs should be above the fold?

Primary actions by site type:

Site type	Primary action	Label that tells the truth	Secondary (quiet)
Studio / premium brand	Book or contact	Book a sprint / Start a project	View work (text link)
Artist	Listen or tour	Listen / Get tickets	Watch (ghost)
Trades / SMB	Call	Call now with a real tel:	Get a quote (ghost)
Productized service	Start or buy	Start / Buy	See pricing (text)

Button labels should be specific. Submit is weak. Book a sprint, Call now, Listen, Get a quote tell the user what happens. If the next step is a conversation, say so. If it is a hard buy, say so. Misleading CTAs increase bounce after click and train distrust.

Weight rules:

• One filled button. A second filled button is usually a fight.
• If stakeholders insist on two filled buttons, the offer is unclear. Styling will not fix it.
• Secondary actions get a text link or a ghost button — never equal contrast.

Thumb and target size:

• WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) sets a 24×24 CSS pixel floor for pointer targets (with spacing exceptions). That is the accessibility floor, not a craft target.
• On a phone, the primary CTA should sit in the first screen and be easy to hit with a thumb — closer to 44–48px tall in practice, with space around it so nav links and cookie buttons cannot steal the tap.
• tel: links must be real numbers, not images of numbers. Image phone numbers are a silent conversion failure; see Traffic But No Leads.

If the primary action is a form, the fold gets two fields or a single click that opens a short path. Collect detail after the intent is committed.

Should a homepage hero have a carousel?

The dominant visual should show the world of the brand: the work, the place, the artist, the craft. Abstract gradients alone are atmosphere, not the main idea. If you use generated imagery, it must still feel authored to the brand system.

Three patterns that still feel authored:

Pattern	What you put on screen	Where it fits	What you cut
Plate and type	Photographic plate + solid/gradient plate behind type + accent CTA	Studios, trades	Type floating on a busy photo
Full-bleed identity	Image is the message; type in safe zones; CTA as a cut into the world	Artists, fashion	Sticker CTAs and badge clusters
Product in environment	Product in real context, edge to edge; headline states outcome	Productized offers	Isolated packshot on a void plus a paragraph

Shared rules across patterns: one job, brand readable, LCP respected, mobile recomposed. Patterns are starting points, not templates that erase brand.

Carousel rule: Baymard’s homepage-carousel research found 46% of ecommerce homepage carousels have performance issues, and they list ten implementation requirements before a carousel is even defensible (10 UX Requirements for Homepage Carousels). On a brand or studio site I almost never start there. One directed still beats a slideshow that auto-advances the only job you had.

Video rule: a background loop is a privilege you earn, not a default. The poster still should carry Largest Contentful Paint, mobile should stay still or click-to-play, and autoplay stays muted. The full go/no-go lives in Hero Video Slowing Your Site. WCAG 2.2.2 Pause, Stop, Hide also requires a way to pause, stop, or hide moving content that starts automatically and lasts more than five seconds.

Decision list:

1. Do you have a still that already carries the world? Ship the still.
2. Do you have a short, muted loop and a poster that can be the LCP node? Consider desktop-only video.
3. Do you have three campaign messages fighting for the same pixel? That is not a carousel problem. That is a job problem.

How do you design the mobile fold first?

Desktop compositions that look balanced often fail when the logo shrinks and the CTA drops below the first screen. Design the mobile fold first, then open the frame for desktop — not the other way around.

Desktop lie	What happens on a 390px phone	Fix
Headline + support + CTA + logo row + announcement	CTA sits below the fold	Kill the bar or the logo row
Left type / right image split	Image stacks above type; CTA pushed down	Recompose: image crop + type plate + CTA in the first screen
Nav + utility links + language + cart	Half the viewport is chrome	Quiet header; one utility max
Video autoplay as the “design”	Decode tax + late type	Still poster; motion optional later

Mobile composition checklist:

• First screen on a real iPhone-class viewport shows brand, headline, and primary CTA
• Support line may wrap once; it may not become a paragraph
• Visual crop is recentered for the phone, not a letterboxed desktop plate
• Thumb can hit the primary action without a precision tap
• Cookie / consent UI has a planned safe zone so it does not cover the CTA
• Landscape and notch/safe-area insets do not clip the mark or the button

I compose artist folds the same way I compose trades folds: name, world, action, in that first phone screen. Arkayla and Foxtide need Listen (or tickets) in the first tap path. A Tampa HVAC site needs Call. The industries differ. The discipline does not.

Starting sizes I actually use on a 390px-wide first screen — not as a brand system, as a fold budget:

Element	Mobile first screen	Desktop first screen	If it overflows
Header height	56–64px quiet	64–80px quiet	You stole the title card
Brand mark	Large enough to read at arm’s length	Hero-level, not a favicon	Increase mark before rewriting type
Headline	32–40px, 1–2 lines	48–72px, 1–2 lines	Split into headline + support
Support	16–18px, one sentence	18–20px, one sentence	Move the extra clause below the fold
Primary CTA	48px tall, full-width or ~200px+	48–56px, not a text-sized pill	You are hiding the job
Consent reserve	72–96px planned empty	Same, or a corner that misses the CTA	The banner will cover the only action
Image crop	Center on the face / product / stage	Wider plate; keep the quiet third	Recrop; do not letterbox

If the header plus consent reserve plus type plus CTA cannot fit, you do not have a type-scale problem. You have too many jobs. Cut chrome before you shrink the headline.

How do you keep hero type readable on a photo?

Headline under a translucent slab on a busy photo is the most common craft failure I see on “premium” comps. The type looks cinematic in Figma and dies on a phone in daylight.

WCAG 2.2 1.4.3 Contrast (Minimum) requires 4.5:1 for normal text and 3:1 for large text (roughly 18pt / 14pt bold). That is the floor. Fold type often needs a plate, a grade, or a crop — not a 40% black overlay and hope.

Failure	What to do instead
White type on a bright sky or skin	Crop, grade darker, or put type on a solid plate
Text burned into the JPEG	HTML text + CSS. Always. Accessibility, SEO, and redesigns all suffer otherwise
Headline weight too thin on a photo	Heavier cut, or plate
CTA the same color as the image accent	Recolor the button so it is the only loud object
Support line at 14px on a busy plate	Larger, shorter, or move it below the fold

Procedure for a photo-led fold:

1. Place the image. Find the quietest third. That is where type lives.
2. If no quiet third exists, add a plate. Do not “see if the overlay works.”
3. Check contrast on the actual crop at 390px and 1440px, not on a zoomed artboard.
4. Confirm the headline is live HTML, not pixels in the asset.
5. Confirm the CTA still wins the contrast contest against the image and against the secondary link.

Logotypes have a contrast exemption in WCAG. Body and headline type do not. Do not hide behind the logo exception.

Why is a late hero a conversion bug?

A beautiful hero that arrives late is not a performance footnote. It is a conversion bug. Google’s Core Web Vitals target for Largest Contentful Paint is 2.5 seconds or less for at least 75% of visits (Web Vitals). On most brand homepages the LCP node is the hero image or the headline block.

Optimize LCP and Chrome’s LCP request discovery guidance is specific:

Do	Do not
Put the hero img in the initial HTML	Inject the hero with client-side JavaScript
fetchpriority="high" on the LCP image	fetchpriority="high" on a pile of images
Omit loading="lazy" on the fold image	Lazy-load the hero because a plugin said so
Preload only if the image is CSS-backgrounded	CSS-background the LCP image for “flexibility”
Size and compress the actual LCP file	Ship a 4000px fashion TIFF resized in the browser

LCP checklist I run before launch:

• LCP element identified in Lighthouse / Performance panel on mobile
• That element is in the HTML (or preloaded with fetchpriority="high")
• Hero is not loading="lazy"
• Poster still — not the video decode — is the LCP candidate if video exists
• Fonts do not swap the headline late enough to shift the composition (watch CLS; good is 0.1 or less per Web Vitals)
• Consent banners do not push the LCP node after a late layout

If the fold depends on a 12MB loop to “feel premium,” you are paying conversion tax for a portfolio clip. Details and file-size discipline: Hero Video Slowing Your Site.

When should motion start on a website hero?

Motion may enter after meaning is visible. Never hide the headline behind a loader choreography. Prefer short transform/opacity entrances. If motion delays the primary CTA by more than a blink, cut it.

prefers-reduced-motion: reduce is not optional polish. MDN documents the media feature as the signal that the user wants non-essential motion minimized (prefers-reduced-motion). web.dev’s guidance is the same: ship a motion-reduced variant when the OS asks (prefers-reduced-motion). Reduced-motion users get the final composition immediately — brand, type, CTA, no entrance tax.

Motion that can stay	Motion that has to go
200–400ms opacity/transform on type after it is already readable	Headline that is invisible until a 1.2s timeline completes
A still Ken-Burns on desktop only	Parallax that moves the CTA out from under a thumb
A pause-able loop behind a settled title card	Auto-advancing carousel of the only job
Hover on desktop secondary links	Continuous background motion with no pause control

Sequence:

1. Brand and action paint.
2. Then ornament.
3. Then, maybe, a loop — if the poster already carried LCP.

Autoplay sound is never part of this sequence.

How should nav and consent chrome treat the fold?

Nav should not compete with the fold CTA. Keep it quiet: brand, a few links, optional small secondary control. Mega-menus on brand sites often signal IA anxiety. If everything is in the nav, the fold never had a job.

Chrome	Allowed on the fold	Not allowed
Header	Brand + 4–6 links + one small utility	Utility bar + promo + language + cart + search all visible
Announcement	Only if it is the fold job this week	A third voice on top of headline + CTA
Consent	Planned safe zone; reject/accept that do not cover the CTA	A modal that eats the first screen on every new session
Chat widget	Below the fold or after a delay	Covering the primary button on mobile
Social icons	Footer or a later scene	A vertical rail through the hero

Consent is a composition problem, not just a legal one. If the banner covers the only action, you measured a fold that users never saw. Design the banner height into the mobile comp. Do not discover it in production.

Announcement bars get one honest use: a time-boxed campaign that replaces the fold job. “Fall tour on sale” can be the headline. It cannot be a 36px strip above a different headline about the album and a third CTA about merch.

What belongs above the fold for artists, trades, and studios?

Different industries. Same inventory. The recipe changes the nouns, not the discipline.

Lane	Put in the first screen	Cut from the first screen	Primary label
Artist	Name, world image, Listen or tickets	Bio paragraph, merch grid, six platform icons as equal buttons	Listen / Get tickets
Trades / SMB	Name, service + city, Call	Badge wall, 12-service icon grid, embedded map	Call now
Studio	Name, point of view, Start a sprint	Case-study mosaic, every service tile, podcast CTA	Book a sprint
Productized	Outcome headline, product in context, Start	Feature matrix, pricing table, logo salad	Start / Buy

Artist fold — concrete:

• Put: wordmark or lockup, one still from the world of the record, Listen (or Get tickets in a cycle).
• Cut: Spotify/Apple/YouTube/Bandcamp as four equal filled buttons. One listen path; the rest live in a later row or a footer.
• Optional proof: one press line or one tour city — not a quote carousel.

Trades fold — concrete:

• Put: business name, “AC repair in [city] — same-day” (or the true offer), Call now with tel:.
• Cut: six stock “service” icons, a form asking for square footage, a map that eats the viewport.
• Optional proof: rating + review count, or one license line.

Studio fold — concrete:

• Put: studio name, point-of-view headline, Book a sprint.
• Cut: a mosaic of every project fighting the title card, a second filled See our process.
• Optional proof: one named client type (“touring artists,” “local service brands”), not a logo racetrack.

When stakeholders demand the webinar, hiring banner, and podcast on the fold, schedule those into later scenes or separate campaigns. The fold is not a bulletin board.

How do you improve above the fold conversion?

Guerrilla tests beat opinions. Paid labs are useful later. Early clarity tests are mandatory.

Five-second stranger test (from NN/g’s visual-design testing and their first-impression work):

1. Five people who do not work on the project.
2. Phone in hand, first screen only.
3. Five seconds. Hide it.
4. What does the company do? What should you tap?
5. If answers diverge wildly, fix the job before you argue corner radius.

First-click test, same people: “You want to [book / call / listen]. Tap once.” If the first tap is the announcement bar, the chat bubble, or a secondary ghost, the weights are wrong.

Events to wire before you A/B anything:

Event	Why
Primary CTA click	The only fold metric that matters on day one
Secondary CTA click	Detects a fight
tel: click	Trades truth
Hero video play (if any)	Tells you whether the loop is used or just paid for
Scroll past fold	Flee vs continue

Do not A/B ten variables at once on low traffic. Change job clarity first. Without events, teams argue from screenshots.

Stakeholder workshop that protects the fold:

1. Write the one job on a whiteboard. If leadership cannot pick a job, pause design.
2. Capture every other request in a backlog labeled by scene (proof, work, offer, process).
3. Bring three fold options that share the same job and vary art direction — photography, type, CTA labeling. Not three jobs.
4. Run the five-second test on the winner before you open motion.

QA checklist for the first viewport — run this before you debate radius:

• Five-second comprehension test with someone outside the project
• Brand identifiable without nav
• One primary tap target obvious on a small phone
• No overlapping text on critical imagery at common breakpoints
• LCP element identified and not lazy-loaded
• Secondary links do not out-scream the primary CTA
• Consent UI planned so it does not destroy the composition
• Reduced-motion users see the final composition immediately
• No autoplay sound
• Campaign / announcement either is the job or is gone

Failure modes I keep seeing:

Failure: four CTAs. Fix: one primary. Failure: carousel hero. Fix: one directed still; if you must rotate, pause control and no auto-trap — and read Baymard’s ten requirements before you insist. Failure: headline under a translucent slab on a busy photo. Fix: crop, grade, or solid plate. Failure: nav + announcement + promo + hero CTA all screaming. Fix: kill the announcement or integrate its message into the hero job. Failure: form with eight fields on the fold. Fix: short path or click-to-call. Failure: hero image lazy-loaded by a theme. Fix: fetchpriority="high", no loading="lazy" on the LCP node (optimize LCP). Failure: video that hides type for a second. Fix: poster first; see Hero Video Slowing Your Site.

A strong fold with a chaotic page still underperforms. Each following section needs one job: proof, work, offer, process, FAQ, contact. The fold sets the promise; the page keeps it. That is the spine of Websites That Feel Like Films. Radius debates are how teams avoid admitting the fold has two jobs.

FAQ

What are website hero best practices for brand sites?

One composition: brand, one headline, one support line, one primary CTA, one dominant visual. No sticker clusters, no stats strip, no second filled button. Make the brand unmistakable even with the nav covered. If a stranger cannot say who you are and what to tap after five seconds, rewrite the fold before you polish motion.

How do you improve above the fold conversion?

Clarify the single action, remove competing CTAs, place one specific proof only if it earns a seat, and make sure the primary tap is on the first phone screen. Measure clicks on that action and completed steps downstream — not vibes. If traffic is fine and leads are not, check intent and broken tel: / form paths before you redesign; start with Traffic But No Leads.

Should heroes include stats?

Rarely on the fold. Stats belong in a proof scene unless one number is the entire offer. A four-up stats strip is usually a symptom of an unclear promise. If you need a receipt in the first screen, use one specific line: a named client type, a rating with a count, or a single outcome.

Is a video background a good hero?

Only when a poster still carries LCP, mobile stays still or click-to-play, the loop is muted, and reduced-motion users get a static composition. Many brand sites convert better with a directed still and light motion. Autoplay video often taxes phones and delays the title card; the full rule set is in Hero Video Slowing Your Site.

How long should the headline be?

Short enough to grasp in one glance on a 390px screen. If it wraps into a paragraph, split it into a headline plus one support sentence. Put the offer or point of view in the first few words. Category labels and greetings waste the only line most people will actually read.

Can the fold have two CTAs?

One primary, one quiet secondary at most. Two equal filled buttons split attention and usually reduce action rates on both. If the team cannot pick a primary, the offer is unclear — pause design until someone owns the job.

CTA

Ship the title card, not the collage. If the first screen still has two jobs, we should look at it together.

Explore custom brand sites or book a website sprint.