Engineer above-fold hierarchy for direct-response pages: 5-second comprehension test, hero rhythm, primary CTA placement, and visual scaffolding for the Four-Layer Open. Produces a wireframe spec + paste-ready HTML/CSS for the first viewport.
Use when designing or rebuilding the top-of-page that must answer "what / who / next" in five seconds while seating Layer 1 (Nerve Strike) of the Open.
Not for full-page sales-page assembly (use /convert sales-page) and not for live-URL teardown (use /market landing).
Engineer above-fold hierarchy for direct-response pages: 5-second comprehension test, hero rhythm, primary CTA placement, and visual scaffolding for the Four-Layer Open. Produces a wireframe spec + paste-ready HTML/CSS for the first viewport.
Use when designing or rebuilding the top-of-page that must answer "what / who / next" in five seconds while seating Layer 1 (Nerve Strike) of the Open.
Not for full-page sales-page assembly (use /convert sales-page) and not for live-URL teardown (use /market landing).
triggers
["above the fold","above-fold hero","hero section design","first viewport","5 second test","five second test","hero hierarchy","donahoe above fold","what who next"]
negative_triggers
["audit my hero on this url","rewrite my full sales page","score my landing page"]
{"lineage":"The Donahoe Method (Wayland-owned operating system); Steve Krug's 5-second comprehension test (2000) and Nielsen Norman Group's Jakob's Law as supporting visual canon"}
Convert Above-Fold - Hero Hierarchy Engineered for the Four-Layer Open
"Your opening has one job: make them keep reading." - The Donahoe Method, Framework 1
The first viewport is where the Method either lands or dies. This skill engineers the above-fold zone so the visual hierarchy carries Layer 1 (Nerve Strike) of the Four-Layer Open and points the reader straight into Layer 2 (Side Door). Every pixel above the fold is in service of "make them keep reading."
When to Use
Trigger phrases: "above the fold", "above-fold hero", "hero section design", "first viewport", "5 second test", "donahoe above fold", "what who next", /convert above-fold <product>.
Use when:
Designing or rebuilding the hero zone of a sales page, VSL page, squeeze page, or lead-magnet page
The reader currently fails the 5-second test ("what is this / who is it for / what do I do")
The headline is right but the visual hierarchy is suffocating it
Mobile and desktop hero need to be specced together (this skill handles both)
Do NOT use for:
Full sales-page assembly - use /convert sales-page
Auditing an existing live page - use /market landing <url>
Generating only the headline copy - use /convert open (Layer 1 lives there)
Scroll mechanics below the fold - use /convert scroll-rhythm
The Five-Second Test (Krug, popularized 2000)
A first-time visitor must, within five seconds, be able to answer three questions cold:
What is this? - the product/offer/promise
Who is it for? - the one person we're writing to (Donahoe Voice Rule #1)
What do I do next? - the primary CTA
If any answer is missing or fuzzy, the hero fails. Test by showing the page to someone for five seconds, hiding it, and asking the three questions. Repeat with three different people. Cold answers only.
The 5-second comprehension test (popularized by Steve Krug, 2000) and Jakob's Law (Nielsen Norman Group) - users prefer pages that work the way other pages they know already work. Don't reinvent the hero.
Inputs
Required:
Product / offer name - what we're selling
The Nerve - the specific raw pain (same input as convert-open); pulled from the Four-Layer Open if convert-open ran upstream
Target reader - the one person (Donahoe Voice Rule #1)
Primary CTA - what action we're asking for ("Start my 14-day trial", "Get my free teardown", "Watch the 18-minute training")
Optional:
Asset type - sales page / VSL page / squeeze / lead-magnet / OTO (changes the hero pattern)
Brand context - colors, typeface, voice (informs the styling without overriding the Method)
Existing hero copy - if porting from an existing page; otherwise generated fresh
out_path - caller-controlled output. Defaults via build_report_path("business-conversion", instruction)
The Donahoe Above-Fold Anatomy
The hero serves the Open. Map each visual slot to a Method element.
Slot 1 - The Nerve Strike Headline (top, dominant)
The headline IS Layer 1 of the Four-Layer Open. Specifications:
One line on desktop, max two on mobile
Specific, sensory, names the pain they already feel
Type size: 48-72px desktop / 32-44px mobile (responsive clamp)
Type weight: 700-900
Line height: 1.05-1.15 (tight; this is a punch, not a paragraph)
Color: highest-contrast text color in the design system (WCAG AA 4.5:1 minimum)
The headline is the only element that gets to be loud. Everything else supports it.
Slot 2 - The Side Door Subhead (directly below)
The subhead lifts Layer 2 of the Open into the visual frame. This is the "I noticed something..." moment that signals "this is a conversation, not a pitch."
1-2 sentences, conversational tone
Type size: 18-22px desktop / 16-18px mobile
Type weight: 400-500
Line height: 1.4-1.5
Color: 70-80% opacity of the headline color (subordinate, not dim)
Slot 3 - The Primary CTA (above-fold, thumb-reachable on mobile)
One CTA. One. Above-fold visitors have one decision to make.
Button height: 56-64px desktop / 48-56px mobile (Apple HIG floor: 44pt; we exceed)
Width: hug content + 32-48px horizontal padding; full-width on mobile <600px
Color: brand accent with WCAG AA contrast (4.5:1) against background
Copy: first-person + value-loaded ("Start MY trial" not "Submit"; "Get my teardown" not "Send")
Microcopy underneath (12-14px, 60% opacity): handles the smallest objection ("No card required", "60-second video", "Used by 1,847 founders")
Slot 4 - The Skin-in-Game Anchor (right column or beneath CTA)
Visual evidence of Layer 3 of the Open - the "why this person is telling you this." Options:
Founder photo + 1-line credential drop ("I burned $84K figuring this out")
A single specific number ("$2.4M tracked through this exact funnel")
A single named testimonial fragment with photo (~80 chars max - full proof stack lives below the fold via convert-proof-stack)
The anchor is small. It's a wink, not a wall. Full proof comes below the fold.
Eyes track top-left → top-right → diagonal → bottom-right CTA. Place the CTA at the visual end of the Z. Source: NN-g eye-tracking studies; landing pages.
Pattern C - Asymmetric Hero (default for VSL, considered offers)
Left column carries the Open layers; right column carries the video or hero image. Asymmetry creates visual hierarchy that resolves into the CTA.
Workflow
Step 1 - Pull the Open inputs
If convert-open already ran on this product, lift Layers 1-3 from its output. The headline is Layer 1; the subhead is a compressed Layer 2; the founder anchor is a compressed Layer 3.
If convert-open has not run, ask: "Has the Four-Layer Open been generated for this product yet? If yes, paste it. If no, I'll run it first - the hero only works if the Open is locked." Don't proceed without the Open inputs.
Step 2 - Pick the layout pattern
Default rules:
Lead-magnet / squeeze / cold-traffic → Pattern A (Center Stack)
Long-form sales page (warm/hot traffic) → Pattern B (Z-Pattern)
VSL page or considered offer with hero video → Pattern C (Asymmetric)
User override allowed; warn if the override creates known friction (e.g., Pattern C without a video tends to feel hollow).
Step 3 - Spec the headline
Headline = Layer 1 of the Open compressed to one line. Test:
Reads in <2 seconds at 48px type
Names the pain the reader already feels
No hedging, no marketing-speak ("leverage", "optimize", "revolutionary", "unlock potential" - banned by Voice Rules)
Passes the Bullshit Filter: would I say this out loud to someone I'm trying to help?
Step 4 - Spec the subhead
Subhead = Layer 2 of the Open. The casual observation, the "I noticed something..." Conversational. Specific. 1-2 sentences max in 18-22px type.
Step 5 - Spec the CTA
One button. First-person. Value-loaded. Microcopy below to defuse the smallest objection.
CTA copy formula: [Verb] my [outcome] or [Get/Start/Watch] [the specific deliverable]
✓ "Start my 14-day trial"
✓ "Get my free funnel teardown"
✓ "Watch the 18-minute training"
✗ "Submit", "Click here", "Learn more", "Get started" (vague - what do I get?)
Step 6 - Spec the trust strip
3-5 elements. Grayscale or 60% opacity. Real items only - never invent press logos or stats.
Step 7 - Run the 5-second test (mentally)
Cover the rest of the page. Look at only the hero for 5 seconds. Answer:
What is this?
Who is it for?
What do I do next?
If any answer is fuzzy, return to Step 3-5 and tighten.
Step 8 - Mobile rendering check
The hero compresses on mobile. Single column. Headline shrinks to 32-44px. CTA goes full-width. Founder photo moves below the CTA or disappears. Trust strip wraps.
Test: at 375px viewport (iPhone SE baseline), can the user see headline + subhead + CTA without scrolling? If not, compress.
Step 9 - Emit the spec + HTML
Output the wireframe, the slot-by-slot spec, paste-ready HTML/CSS, and the 5-second-test result.
The Open's text continues immediately below the fold. The hero hands off to the body without breaking voice.
How to deploy
Drop the HTML/CSS into the page template.
Pair with convert-scroll-rhythm to architect what happens at scroll position 1, 2, 3+.
Pair with convert-proof-stack to design the proof zone that opens after the hero.
Pair with convert-mobile to compress the entire page (not just the hero) for mobile.
Run convert-audit on the full draft before shipping.
## Pitfalls
- **Headline drift.** The headline in the hero must equal Layer 1 of the Open. If the page body's Layer 1 reads different from the visual headline, the reader feels a seam. Lock them.
- **CTA crowding.** Two above-fold CTAs feels like indecision. One above-fold CTA, then a secondary CTA can appear *after* the proof stack.
- **Stock photo trap.** The founder anchor is only-you. A stock photo in that slot signals fake. If a real founder photo isn't available, drop the slot - don't fake it.
- **Trust strip lying.** "As seen in" with logos the brand has not actually appeared in is the fastest credibility-killer on the web. Real items only.
- **Mobile compression cheating.** Hiding the subhead on mobile to fit the CTA is a common move; it strips Layer 2 of the Open. Don't. Compress the headline instead.
- **The vanity hero.** Beautiful gradient backgrounds with no Method scaffolding is design that erased the message. The hero is in service of the Open, not in service of itself.
## Lineage
- Visual scaffolding for **The Donahoe Method's Four-Layer Open** (Wayland-owned operating system) - every slot serves a layer
- *The 5-second comprehension test* (popularized by Steve Krug, 2000)
- *Jakob's Law* (Nielsen Norman Group) - users prefer hero patterns they already know
- Z-pattern reading (Nielsen Norman eye-tracking, 2006/2020)
- Apple HIG touch-target floor (44pt) for CTA sizing
- WCAG AA contrast (4.5:1) for color pairs
## Notes
- This is the visual Open. Pair it with `convert-open` (which it derives from), `convert-scroll-rhythm` (what comes next), `convert-proof-stack` (what fills the proof zone), and `convert-mobile` (which compresses the whole page).
- Hero design is downstream of the Open. If the Open is wrong, no hero design fixes it. Run `convert-open` first.
- The 5-second test is a hard gate. A page that fails it on three different testers is not ready to ship. Iterate Steps 3-5 until it passes cold.
- This skill emits HTML/CSS as a reference implementation, not a framework-coupled component. Paste into Webflow / Framer / Wix / Carrd / static HTML.
