taste-landing-page
A landing page has one job: move the reader from curiosity to a decision. Structure is the copy; this skill is the structure.
1. THE 8-SECOND READ (Design the Top Third First)
In 8 seconds a visitor must answer three questions — without scrolling:
- What is this? — the H1 names the product/outcome, not the category ("Analytics that don't need a data team" > "Enterprise analytics platform").
- Who is it for? — the subline names the audience ("For indie founders and one-person SaaS").
- What do I do? — exactly one primary CTA, visible, contrasting, above the fold.
If the top third doesn't answer all three, the rest of the page is a discount.
2. SECTION ORDER (The Selling Sequence)
- Hero — promise + primary CTA (+ the product if it's visual evidence).
- Proof strip — logos, user count, or press. Trust before claims.
- The problem — one pain, named in the reader's words (not "modern teams need…"). Keep to 3 lines.
- The mechanism — 3 features max, each one sentence + one proof point. More than 3 features on a landing page = a spec sheet, not a pitch.
- The proof — metric callouts with numbers, customer quote with a name + title, or both. Claims without proof here die here.
- How it works — 3 steps only (for products that need explaining).
- Pricing — 3 tiers max; highlight the middle. Never 4+ tiers on a landing page.
- The close — one line of residual doubt ("No credit card. Set up in 4 minutes.") + the CTA again + a human touch ("Talk to a human →").
Every section earns its place by answering the objection a reader has at that moment. If a section doesn't answer a question, it's decoration.
3. HERO PATTERNS (Pick One, Per Audience)
| Audience | Pattern | Example H1 shape |
|---|---|---|
| Developer tool | Problem → mechanism | "Type less. Ship more." + terminal/product panel |
| B2B buyer | Outcome + qualification | "Cut support tickets 40% with self-serve onboarding" |
| Consumer | Desire + friction-removal | "Your photos, organized while you sleep" |
| Enterprise | Category + evidence | "Identity security for regulated industries" + compliance chips |
| Solo/passion | Identity + invitation | "Build the portfolio that gets you hired" |
Never combine two patterns (outcome AND identity in one H1 reads as confused). Never let the hero show a product screenshot before the promise is understood.
4. CTA DISCIPLINE
- One primary CTA per viewport. Secondary actions are text links or quiet buttons; two equal buttons = no button.
- The primary CTA label says the outcome or the action: "Start free trial" > "Get started" > "Submit". First-person labels ("Start my free trial") lift clicks on consumer pages.
- The CTA color is the accent — and the accent appears nowhere else within that viewport.
- The final CTA is the same label as the hero CTA. Never rename it mid-page.
- Form CTAs: minimize fields (email + password for trials; company name only when the offer is enterprise).
5. PROOF & TRUST PLACEMENT
- Logos: grayscale, before features; ≤ 6 logos (more reads as fake).
- Metric callouts: number + what it measures + source line. "18.4% trial→paid" means nothing; "18.4% trial→paid among 4,120 teams" means something.
- Quotes: attribution with name, title, company — never "John D. from California".
- Compliance chips (SOC 2, GDPR, ISO 27001) sit beside pricing and the form, where decisions happen — not buried in the footer.
- One guarantee where risk is highest: near the form ("14-day free trial. Cancel in two clicks.").
6. PRICING PSYCHOLOGY (Three Tiers, Anchored)
- Three tiers: entry (free or cheap), featured (most popular — visually distinct, one accent), top (premium or "contact us").
- The featured tier is the anchor: it's what comparison happens against; make it visually distinct but not aggressive.
- List the most valuable line item first in each tier. Convert $29/month to "≈ $1/day" for consumer audiences; annual billing with "2 months free" for B2B.
- Never display three price columns of equal visual weight — the eye must land on one.
7. MOBILE BEHAVIOR (The Second Page)
- Same section order on mobile; hero subline and proof strip reorder first (proof before features on small screens).
- CTAs: full-width, ≥ 48px tall, thumb-reachable at both ends of the scroll.
- Tables become stacked cards or horizontal scroll with a hint; pricing tiers stack with the featured tier FIRST on mobile.
8. CHECKLIST (Fail the Page If…)
- The top third doesn't answer what/who/do within 8 seconds.
- More than one primary CTA per viewport.
- Features listed without proof nearby.
- Any claim without a source line on the same viewport.
- Pricing with equal-weight columns or 4+ tiers.
- A section that answers no objection.
- Hero CTA label different from the final CTA label.
