By Mehdi HassanWhat are the phases of a web design process?
A web design project moves through seven phases: kickoff and discovery, sitemap and structure, copy, visual design, build, QA and launch. Every phase should end with a clear deliverable you approve, so the next phase starts from a settled decision rather than an open question.
Agencies name these phases differently and sometimes merge them, but the work is the same. What varies is the order, especially where copy sits, and how much each phase overlaps the next. Both choices change the result and the schedule. For how the phases translate into dates, see our hub on how long it takes to build a website.
Kickoff and discovery
Goals, audience, offer, competitors and technical needs. Deliverable: a short brief everyone agrees with.
Sitemap and structure
Which pages exist and what each one must do. Deliverable: a sitemap and a section outline for key pages.
Copy
Messaging and final page text, written to the outline. Deliverable: approved copy for each page.
Visual design
Direction, then the homepage, then inner pages and mobile states. Deliverable: approved designs in Figma.
Build
Components, CMS, integrations and animation in the chosen platform. Deliverable: a staging site.
QA
Devices, browsers, forms, tracking, accessibility and speed. Deliverable: a fixed list of issues resolved.
Launch
Domain, redirects, analytics and search setup, then post-launch checks. Deliverable: the live site.
How is a copy-first web design process different from design-first?
A copy-first process writes and approves the words before any page is designed. A design-first process creates layouts first and fills them with text later, often lorem ipsum or rough drafts. The difference shows up in rework: copy-first designs fit the real message, while design-first designs often have to change once the real text arrives.
Factor | Copy-first | Design-first |
|---|---|---|
Starting point | Message, structure, final text | Visual direction and layouts |
What reviewers judge | Whether the page says the right thing, then how it looks | How it looks, then whether the text fits |
Rework risk | Lower: layouts built for real content | Higher: sections resized or cut when text changes |
Best for | New sites, repositioning, complex products | Visual refreshes where the message is settled |
Main risk | Slower first visuals, which can feel less exciting early | Pretty pages that don't explain the product |
We run a copy-first process because one team owns words, design and code. The writer and the designer are working on the same page at the same time, so a headline that needs more room changes the layout before anyone builds it. Design-first isn't wrong. It's the right call when you're refreshing the look of a site whose message already works.
What happens in discovery and sitemap planning?
Discovery turns your goals into a brief and the brief into a sitemap. The questions are simple: who is the site for, what should they do, what do they need to believe first, and what stops them today. The answers decide which pages you need and what goes on each one.
Good discovery uses evidence you already have. Sales call notes, support questions, customer interviews and win-loss reasons tell you which objections the site has to answer. If you have none of these, a few short calls with customers before kickoff pay for themselves.
The sitemap is where scope gets decided. Each page should have one job. Pages that exist only because a competitor has them, or because someone asked for them in a meeting, add design and build time without adding conversions. Cut them now, because they cost more to cut later.
Who writes the copy in an agency web design process?
It depends on the agency, and it's one of the most important questions to ask. Some agencies write all the copy, some edit what you supply, and many design around placeholder text and expect you to fill it in. The last option is the most common source of delay and rework.
If the agency writes the copy, expect it to ask for input: customer language, product details, proof you're allowed to use and the claims your legal team will accept. If you write it, plan for it as a real phase with a deadline. Our comparison of in-house vs agency web content covers who should own it.
Hypothetical example: the same homepage, design-first vs copy-first
For example, suppose a fintech startup's homepage is designed first with a short placeholder headline and three equal feature cards.
When the real copy arrives, the headline needs two lines to say what the product does, and compliance requires a disclosure under the hero. Two features need longer explanations than the third. The hero, the cards and the spacing all have to change, and the new layout no longer matches the approved inner pages.
In a copy-first version of the same project, the long headline, the disclosure and the uneven features are known before design starts, so the layout is built for them. This is an illustration of how the two orders behave, not a result from a real client.
What happens in the design and build phases?
Design starts with direction and the homepage, because the homepage sets the type, color, spacing and components every other page reuses. Once it's approved, inner pages and mobile layouts follow quickly. Build turns approved designs into reusable components, sets up the CMS and connects forms and analytics.
Motion belongs in both phases. Animation that's designed in Figma and then built later often gets simplified or dropped. Deciding what moves, and why, during design keeps it purposeful. Our guides to website animation and micro-interactions in web design explain where motion helps and where it slows a page down.
Platform choice shapes the build. Framer and Webflow are fast for marketing sites a team will edit visually. A coded stack like Next.js suits sites with custom components, heavier integrations or strict performance needs. We build in all three, and the choice comes from what the site needs to do, not from habit.
What do QA and launch involve?
QA checks that the site works for every visitor before it goes live, and launch makes sure nothing is lost on the way. QA covers browsers and devices, forms, tracking events, accessibility basics, page speed and broken links. Launch covers the domain, redirects from old URLs, analytics, search console and a check of the live site after go-live.
- Forms: every form submits, reaches the right inbox or CRM, and shows a confirmation.
- Tracking: conversion events fire once, with the right names, after consent where required.
- Redirects: every old URL that had traffic or links points to the right new page.
- Accessibility: keyboard navigation, contrast, alt text and form labels.
- Speed: images sized properly and third-party scripts kept to what's needed.
Redirects matter most on a redesign, because a missed redirect can drop pages out of search. Migration work is scoped on the intro call, and we include redirects and SEO checks in any migration we take on.
How do you choose an agency with a web design process that fits?
Choose the agency whose process matches your biggest risk. If your message isn't settled, you need a copy-first process with real writing. If your message is clear and you need a visual upgrade, a strong design-first studio is fine. If you need everything at once, look for one team that owns words, design and code, which our guide to a full-service web design agency explains.
Then check how the process is priced. A fixed scope makes each phase's deliverable explicit, which protects the schedule. Read fixed price vs time and materials for the trade-offs, and working with a design agency for what each week of the project should feel like.
