Marketing / Microsite Design

Pair with design-system (foundations + premium checklist) and layout-interaction-design (CTA/ button placement §2, nav §3, scroll/entrance states §4). This skill = layout, conversion, and the marketing look. ✅ strong consensus · ◐ situational.

Hero — above the fold ✅ (element order)

1. Eyebrow/kicker — often a social-proof micro-line ("Used by 5,000+ traders").
2. Headline — one idea, <10 words, benefit not feature.
3. Subhead — 1–2 lines clarifying the headline.
4. Primary CTA + optional secondary (ghost) CTA.
5. Product visual (screenshot/loop) above the fold.
6. Trust strip (logos/rating) right under the fold line.

CTA hierarchy ✅

• One primary action, repeated identically at top, mid (after proof), and bottom; sticky CTA on mobile. Don't invent a new primary verb per section.
• Secondary CTA is visually subordinate (ghost/text), never a competing color.
• Place the CTA beside the value statement, not floating alone. ◐ On focused landing pages, strip the top nav to reduce exits.

Section rhythm ✅

Hero → value prop → how-it-works (3 steps) → benefits/features → social proof → pricing → FAQ → final CTA. One idea per section; alternate background shades (--bg / --surface) to segment.

Social proof ✅

Twice minimum: a logo/rating strip high (under hero) + testimonials/case studies near each CTA. Specific numbers ("5,000 users", "4.8★") beat vague praise.

Pricing tables ✅

• 3 tiers (anchoring; most pick tier 2). Highlight the recommended/middle plan — contrasting border + "Most Popular" badge is the single most reliable conversion lever.
• Checkmark feature grid for scanning; monthly/annual toggle; page must load <2s. ◐ A high "Enterprise / Contact us" tier anchors even if few choose it.

Conversion specifics ✅

Message-match the inbound ad/headline; remove distractions; benefit-first copy; speed = conversion (~7–10% drop per added second). Optimize the hero image; lazy-load below the fold.

Motion ✅

• Baseline: subtle fade-up on enter via IntersectionObserver (not scroll listeners); stagger cards 30–50ms; durations <700ms (micro <300ms). Animate transform + opacity only.
• Scroll-driven effects via CSS animation-timeline: view() where supported; graceful fallback.
• Always gate behind prefers-reduced-motion — reduced users get instant content, same function.

Type & look

• Fonts: characterful display + clean body. Pairs: Bricolage Grotesque + Geist · Fraunces (opsz) + Inter · Space Grotesk + IBM Plex Sans. Bigger ratio (1.333) for drama; tracking -0.02 to -0.03em on the hero headline; text-wrap: balance on headings.
• Style: ✅ Bento grid + Minimalism for the bones; ◐ one Aurora/mesh or Glassmorphism accent in the hero (≤3 complementary gradient stops) for a distinctive, non-templated moment. Neo-brutalism only if "bold challenger" is the explicit brief — it reads unserious for a fintech pitch.
• Light vs dark ◐: default light for broad B2B/consumer trust; dark fits dev-tools/crypto identity. Support both; keep contrast.

Pitfalls

Multiple competing CTAs · feature-listing instead of benefit copy · stock-photo heroes (use real product shots) · motion that delays content · pricing with >3 tiers · slow LCP from an unoptimized hero image.

Sources

goprimer.com (hero formula) · involve.me (landing structure) · saashero.net (CTA placement) · kinde.com & designstudiouiux.com (pricing that converts) · motion.dev & joshwcomeau.com (scroll motion).