madebymustafa/design-taste/taste-landing-page

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:

1. What is this? — the H1 names the product/outcome, not the category ("Analytics that don't need a data team" > "Enterprise analytics platform").
2. Who is it for? — the subline names the audience ("For indie founders and one-person SaaS").
3. 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)

1. Hero — promise + primary CTA (+ the product if it's visual evidence).
2. Proof strip — logos, user count, or press. Trust before claims.
3. The problem — one pain, named in the reader's words (not "modern teams need…"). Keep to 3 lines.
4. 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.
5. The proof — metric callouts with numbers, customer quote with a name + title, or both. Claims without proof here die here.
6. How it works — 3 steps only (for products that need explaining).
7. Pricing — 3 tiers max; highlight the middle. Never 4+ tiers on a landing page.
8. 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)

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.