Blog · web design

web design field notes.

Practical, opinionated writing on web design from the team at Adfirm. 70 posts in total — 6 in this category.

THE HIERARCHY THAT CONVERTS EYEBROW LOGO · LOGO · LOGO · LOGO · LOGO PRIMARY CTA 1 Hero Outcome & CTA above the fold 2 Trust strip Logos, ratings, customer count 3 Mechanism 3 features framed as outcomes 4 Re-state the CTA Same primary action, no new asks
web design

Conversion rate optimization for SaaS landing pages: a 2026 framework

A practical CRO framework for SaaS landing pages — the hero structure that converts, the social proof patterns that work, and the tests worth running first.

Cluttered. No hierarchy. Focused. Hierarchy. CTA. CONVERTING HERO EYEBROW H1 · Outcome-led headline Subhead with mechanism Primary CTA Secondary TRUST STRIP 8+ Years 50+ Projects 1 wk Delivery 100% Senior
web design

Why most agency websites don't convert (and what to fix first)

A practical teardown of the conversion mistakes agency sites repeat. What to fix first, what to ignore, and how to think about the hierarchy of a marketing page.

PICKING A STACK FOR A MARKETING SITE Astro OUTPUT Static HTML JS BUNDLE ~0 KB by default LIGHTHOUSE 95-100 BEST FOR Marketing & content sites Chosen for adfirm.net Next.js OUTPUT React app + SSR JS BUNDLE ~80-200 KB LIGHTHOUSE 80-95 BEST FOR React-heavy products WordPress OUTPUT PHP + DB on request JS BUNDLE Theme-dependent LIGHTHOUSE 50-80 BEST FOR Non-technical authors
web design

Astro vs Next.js vs WordPress: which to choose in 2026

An honest comparison of the three stacks we use most for marketing sites and web apps. What each one is best at, what they cost long-term, and how to choose.

CORE WEB VITALS 1.1s LCP GOOD · < 2.5s 90ms INP GOOD · < 200ms 0.02 CLS GOOD · < 0.1
web design

Core Web Vitals 2026: a practical implementation guide

What Core Web Vitals actually measure, what passes today, and the specific implementation patterns that move the metrics for marketing sites and apps.

THE 2026 BENTO PATTERN DASHBOARD Real-time analytics Built into the product, not bolted on. Type-safe End to end 99.99% Uptime SLA SCROLL-TRIGGERED Motion explains, not decorates PERFORMANCE 100 LCP All routes, all devices ACCESSIBILITY WCAG 2.2 AA Including motion preferences RESULT Looks 2026. Loads like 2014.
web design

Bento grids and motion-first layouts: the 2026 web design language

Bento grids and choreographed motion are the dominant 2026 design pattern. How to ship them without trashing Core Web Vitals or losing accessibility.

AGENTIC EDIT → DIFF → REVIEW → SHIP src/pages/pricing.astro CLAUDE EDIT 1 <BaseLayout title="Pricing"> 2 <section class="hero"> 3 <h1>Pricing</h1> + 4 <p class="lead">Three tiers.</p> + 5 </section> + 6 <section class="plans"> + 7 {plans.map(p => <Plan {...p}/>)} + 8 </section> 9 </BaseLayout> AGENT "Add 3-tier pricing page matching /services design" Accept all Reject Revise adfirm.net/pricing Pricing Three tiers. No hidden fees. $49 $149 $499 QUALITY GATE · LIGHTHOUSE 96 Perf 100 A11y 100 SEO 100 Best Pr.
web design

Vibe coding for marketing sites: Cursor, Claude Code in 2026

Vibe coding flipped how agencies ship marketing sites. Here's the 2026 workflow with Cursor and Claude Code, what's gained, and the quality guardrails that matter.

Ready when you are

Let’s map out your next quarter.

Tell us what you’re trying to grow. We’ll send back a no-fluff audit and a plan within 48 hours.