| name | elite-frontend-ux-above-the-fold-essentials |
| description | Sub-skill of elite-frontend-ux: Above-the-Fold Essentials (+4). |
| version | 1.0.0 |
| category | development |
| type | reference |
| scripts_exempt | true |
Above-the-Fold Essentials (+4)
Above-the-Fold Essentials
Must fit within one viewport:
- Headline (5–10 words)
- Supporting subheadline (value proposition)
- Single primary CTA
- Hero visual
Section Flow
1. Hero (headline + CTA + visual)
2. Social proof (logos, snippet)
3. Problem / Solution
4. Features / Benefits (3–4 max)
5. Testimonials
6. Pricing (if applicable)
7. FAQ
8. Final CTA
9. Footer
CTA Design
- Height: min 44px; padding: 2× font size
- Copy: action verbs, first-person ("Get my free trial" > "Sign up")
- Length: 2–5 words max
- One primary CTA per viewport
Pricing Tables
- 3–4 tiers max (more causes paralysis)
- Highlight recommended tier
- Annual/monthly toggle showing savings
- CTA button on every tier
Form Optimization
- Single column (120% fewer errors vs multi-column)
- Minimize fields (4 vs 11 fields = 120% more conversions)
- Never ask for phone unless essential (58% abandon)
- Labels above inputs; validate on blur, not while typing