The modern web design guide — engineered, not decorated.

01Why web design still decides most of your conversion outcome

The website is not a marketing deliverable — it's the conversion layer that every other channel depends on. Paid, SEO, email, and social all push visitors to the site; the site decides whether they act. This is why an optimised site makes every other investment work harder.

Concrete numbers: a well-built site converts 2–3× better than a templated WordPress or Shopify default. On the same traffic, that's 2–3× cheaper CPA across every paid channel, 2–3× more demos booked from the same SEO traffic, 2–3× more sign-ups per email blast. The CFO asks “why are we spending on a website when we could put that money in ads?” The answer is that the website is the multiplier on the ads.

The website is the asset. Every other marketing channel is a traffic generator. Under-investing in the asset caps every investment in the channels.

The chart below shows the relationship between page load time and mobile conversion rate — the steepest curve in digital marketing. A sub-second site converts 4× better than a 5-second site. Performance is not a developer concern; it's a growth concern.

02The modern web stack — Next.js, headless, and the end of WordPress for anything serious

Technology choices define what's possible. The modern stack is remarkably settled at this point:

Frontend: Next.js (React)

Server-rendered, statically-generated where possible, React-based. Next.js is the default for any site with growth ambition. Outstanding performance, excellent DX, every CWV metric passes by default. The site you're reading is built in Next.js.

CMS: Headless (Sanity, Contentful, Prismic)

Content authors work in a clean UI; the front-end fetches content via API. Separates content from presentation. Massively easier to maintain than a monolithic CMS like WordPress.

Hosting: Vercel, Cloudflare, or AWS

Edge-deployed, auto-scaling, no ops team required for the happy path. Vercel is the default for Next.js; Cloudflare is cheaper at scale; AWS is for sites with specific compliance requirements.

What to skip

WordPress with page builders (Elementor, Divi) — slow, maintenance-heavy, plugin-sprawl prone, security-liability. Fine for a personal blog; not for a growth-stage business. Shopify default themes — fine for a simple store, limiting for any brand with custom requirements. No-code beyond SMB scale — Webflow and Framer are excellent for brochure sites under 20 pages; hit a ceiling quickly past that.

03Design systems — why every serious brand has one now

A design system is a documented library of reusable components (buttons, forms, cards, layouts) with rules for how they compose. Every brand with more than 10 pages effectively has one — the question is whether it's written down and reusable in code, or whether each page reinvents the wheel.

What a real design system includes

• Foundations. Typography scale, colour palette, spacing system, motion principles.
• Components. Buttons (primary / secondary / tertiary), form controls, cards, navigation, footers — coded once, composed everywhere.
• Patterns. Page templates, hero compositions, CTA arrangements — proven patterns rather than freestyle per page.
• Documentation. What to use when, why things are the way they are, how to extend.
• Design tools ↔ code parity. The Figma library matches the code library. Design system as code, not just as documentation.

The chart above shows the economics. Page build time drops 65%, cross-page consistency improves by 80%, bug rate drops 80%, engineer onboarding time drops 60%. The upfront cost is real (design system projects are 6–10 weeks to build properly), but amortises quickly on any site that keeps growing.

04Performance: Core Web Vitals decide your ranking and your conversion

Google's Core Web Vitals are the three metrics they publicly commit to using as ranking signals:

• LCP (Largest Contentful Paint) — when the main content becomes visible. Target: ≤ 2.5s on mobile.
• INP (Interaction to Next Paint) — responsiveness after user interaction. Target: ≤ 200ms.
• CLS (Cumulative Layout Shift) — how much the layout jumps around during load. Target: ≤ 0.1.

How to actually hit them

• Ship static HTML where possible. Static generation (SSG) or Incremental Static Regeneration (ISR) — no server rendering per request unless you need it.
• Optimise images aggressively. Next/Image handles format conversion (WebP, AVIF), sizing, and lazy loading automatically.
• Minimise client-side JavaScript. Every KB of JS costs parse time on mobile. Server components, route-level code splitting, and being intentional about where interactivity is actually needed.
• Reserve space for dynamic content. Skeleton loaders, fixed-size containers for images + ads. CLS is almost always fixable with stable layout decisions.
• Monitor in the field. Lab tools lie. Use Chrome User Experience Report (CrUX) data for real-world measurement.

The chart above shows the conversion impact of LCP buckets: the difference between “excellent” (≤ 1s) and “poor” (3.5s+) is 4× conversion rate on the same traffic.

05UX principles that outlast every trend

UX trends come and go. The principles that reliably correlate with conversion:

• One clear primary action per page. Every page asks the visitor to do one thing. Competing CTAs split attention and halve response.
• Mobile-first design. 60–80% of most audiences are on mobile. Desktop is a scaling-up exercise; mobile is the canvas where decisions get made.
• Progressive disclosure. Show the most important information first. Detail reveals on scroll or on demand. Landing pages that dump everything above-the-fold lose.
• Trust signals where decisions happen. Testimonials, reviews, client logos placed near CTAs, not buried on an “About” page.
• Forms as short as they can be. Every additional field cuts completion ~7%. Only ask for what you actually need at this stage.
• Accessibility and good UX are the same thing. Screen-reader-friendly sites with clear semantic HTML tend to score higher on usability overall.

06Accessibility — not optional, also a growth lever

Accessibility has three angles: moral (excluding people with disabilities is wrong), legal (ADA, AODA, UK Equality Act — real lawsuits, real settlements), and commercial (accessible sites convert better for everyone).

Practical targets

• WCAG 2.2 Level AA compliance. The working standard. WCAG 2.2 covers colour contrast, keyboard navigation, focus management, alt text, form labels, and heading structure.
• Semantic HTML first. Use <button> for buttons, <nav> for nav, <h1>–<h6> in order. Good semantics solve 60% of accessibility for free.
• Keyboard-only usability. Tab through the whole site with a keyboard. Every interactive element reachable, focus visible, no traps.
• Screen-reader testing. VoiceOver on Mac/iOS, NVDA on Windows. Ten minutes of actual testing catches things automated tools miss.
• Colour contrast ≥ 4.5:1 for text. Tooling (axe, Lighthouse) checks this automatically in CI.

Accessibility work is better framed as “inclusive by default” than a tax. Sites built for keyboard users, screen readers, and low-vision users are almost always better for everyone.

07CMS choices: headless vs hosted vs custom

• Headless CMS (Sanity, Contentful, Prismic). Editor-friendly UI; decoupled front-end. The right choice for anything Next.js-based. Pricing varies; Sanity has a generous free tier.
• Hosted monoliths (WordPress, Drupal). Content + presentation + hosting bundled. Good for non-technical teams and simple sites; limiting for custom behaviour.
• Framework-native CMS (Next.js + Markdown/MDX). Content lives in your repo. Best for documentation-heavy sites, dev-authored content, or when developers are also the content team.
• Visual builders (Webflow, Framer). Content + design + hosting bundled. Excellent for brochure sites and design-led brands; ceilings appear at 50+ pages or complex logic.
• Custom-built CMS. Rarely justified any more. The specialist CMS platforms are now good enough that building your own is usually just re-inventing wheels.

08AI in the design + build workflow

Three places AI actually earns its keep in production web work:

• Design-to-code. Given a Figma file and a design system, tools generate the React components that implement the design. Cuts the hand-coding step 40–60%. Still needs human review for edge cases, accessibility, and responsive behaviour.
• Content + copy generation. Landing page copy variants, meta descriptions, alt text, form validation messages. LLMs draft to tight briefs; editors tighten. 3–5× faster than writing from scratch.
• QA and accessibility auditing. LLMs scan HTML + screenshots and flag contrast issues, missing alt text, unclear button labels, inconsistent heading hierarchy. Faster than running lighthouse audits per page.
• A/B test variant generation. Hero headline variants, CTA copy, visual layout variations — drafted in minutes, reviewed in hours. The velocity shift for CRO teams is material.

AI doesn't replace design judgement, brand consistency, or technical architecture. It compresses the production pieces — which means teams ship faster at equal quality, not that you can ship with fewer skilled humans.

09Measuring web performance — beyond pretty screenshots

Pretty screenshots don't pay. The numbers that do:

• Conversion rate by page. Session-to-goal completion for every landing page. Annually-reviewed baselines. Every page has a target.
• Core Web Vitals — field data. Monthly monitoring of LCP, INP, CLS from Chrome User Experience Report. Regressions triaged within a week.
• Scroll depth + heatmaps. Where do people stop reading? Where do they click that isn't clickable? Mismatched expectations you can fix.
• Mobile vs desktop conversion gap. Usually 30–50% lower on mobile; closing the gap is often the highest-value conversion project.
• Accessibility score. Lighthouse accessibility score in CI; regressions block deploy. Manual testing quarterly.
• Pipeline contribution. Opportunities influenced by site visits, tied via CRM. The only metric finance truly cares about.

That's how we run site builds at Axccelerate — engineers in the scoping call, design system as standard, CWV and accessibility as CI gates, pipeline attribution built into InsightAX. If that's the shape of operator you want, the next step is a 30-minute scoping call.