What are the main stages of the website design process?

Most frameworks cover discovery, information architecture, content, wireframing and visual design, development, quality assurance and launch. The names vary, but the logic is constant: settle goals and structure before investing in design and code, and test thoroughly before going live. Post-launch measurement and iteration should be planned as a stage in its own right.

How long does a website design process take?

It depends on scope, the number of page types, integrations and, above all, how quickly content and approvals arrive. A small brochure site and a multi-language ecommerce platform are different projects. Ask any team to show the sequence and dependencies rather than a single number, and treat content readiness as the main schedule risk.

Should content or design come first?

Content, at least in draft. Designing around placeholder text hides the real length and structure of the message and often leads to layouts that break when real copy arrives. You do not need every page written, but each key page type should have a real example before visual design begins.

Who should be involved in a website design project?

At minimum: a business owner who sets goals and approves stages, a content owner, a designer, a developer, and someone responsible for analytics and SEO. Sales and customer service colleagues are valuable in discovery because they hear customer questions daily. Keep the approval group small and name one decider.

What is the difference between UX design and web design?

UX design focuses on how people find information and complete tasks: structure, flows and usability. Web design is often used more broadly to include visual design and sometimes development. In practice a good website process includes both, with UX decisions made first and visual decisions built on top of them.

Website Design Process: A Seven-Stage Framework That Ships

Why process matters more than talent

Most website projects that go wrong do not fail at design. They fail because a question that belonged in week one was answered in week ten. Who is the site for? What must a visitor do? Who signs off the copy? When those answers arrive late, they arrive as rework.

A good process is therefore a sequence of closed decisions. Each stage produces an artefact that the next stage treats as fixed. Talent still matters, but talent working on unsettled questions produces beautiful pages that have to be thrown away.

The cheapest place to change a website is a sentence in a brief; the most expensive is a line of code on launch day.

The seven stages at a glance

The stages below are not novel. What is less common is treating each one as a gate with a named output and a named approver. Skip the gate and the stage leaks into the next one.

Fig. 01 · Process

Tap to explore

The website design process as seven gates

Each stage ends with an artefact the next stage treats as settled.

Stage 1: Discovery sets the scoring rules

Discovery answers three questions: what the business needs the site to do, for whom, and how anyone will know it worked. The last one is the one teams skip. Without an agreed success measure, every later debate becomes a matter of taste, and taste is decided by seniority.

Useful discovery inputs include analytics from the current site, sales-call notes, support tickets, search queries and a short round of interviews with real customers. The output is a one- or two-page brief that names primary audiences, priority actions and constraints such as CMS, budget, deadline and compliance. If you need help framing audiences, start with buyer personas and the value proposition before anyone opens a design tool.

Stage 2: Architecture before aesthetics

Information architecture decides what exists on the site and how it is grouped. The deliverables are a sitemap, a list of page types (home, service, product, article, case, contact) and two or three critical user journeys drawn end to end.

This is where scope is really set. Ten page types cost more to design, build and maintain than five, however many individual pages they hold. A disciplined architecture often reduces the project, because it reveals that several 'unique' pages are the same template with different content.

Stage 3: Content first, not lorem ipsum

The most contested position in this framework is that real content should exist before visual design begins. Designing around placeholder text produces layouts that break when the actual, longer, messier copy arrives. It also hides the fact that nobody has agreed what the company is saying.

Content-first does not mean every page is finished. It means each page type has at least one real example: a real headline, real proof, a real call to action. Designers then solve a real problem, and stakeholders review meaning rather than colour.

Stage 4: Design in two passes

Design should move from structure to surface. Low-fidelity wireframes settle hierarchy, order and calls to action. Only then does visual design add type, colour, imagery and motion. Mixing the two invites feedback on the shade of a button when the real issue is that the button is in the wrong place.

The modern output is not a set of page mock-ups but a component library: buttons, cards, forms, navigation, content blocks. Pages become assemblies of components, which makes the build faster and keeps the site consistent long after launch. Design for small screens first; mobile-first design forces the priority decisions that desktop layouts let you avoid.

Review design against the brief, not against preference. A useful discipline is to ask of every screen: which audience is this for, what is their task, and what is the one action we want next? If a reviewer cannot answer those three questions from the design, the design is not finished, however polished it looks. If they can, debates about colour and imagery become much shorter.

Stages 5 to 7: Build, QA and launch

Build turns components into templates, models the content in the CMS so editors can work without a developer, and wires up integrations: CRM, forms, payment, analytics, consent. Tracking is part of the build, not a post-launch task, because a site launched without measurement cannot prove anything.

QA covers more than broken links. Test real devices, keyboard navigation, form submissions end to end, page speed, and that every tracked event fires. Launch then includes redirects from old URLs, search-console checks and a planned 30-day window for fixes. The website launch checklist covers that final stretch in detail.

Two build decisions deserve attention early because they are hard to reverse. The first is the CMS and its content model, which determine how easily marketers can publish without a developer. The second is performance budget: agreeing upfront how heavy pages may be keeps website speed from becoming a post-launch emergency.

Fig. 02 · Timeline

Tap to explore

An illustrative sequence for a mid-sized marketing site

Illustration only: durations vary widely with scope, content readiness and approvals.

Agile, waterfall or something in between

Pure waterfall breaks down because people cannot judge a website from documents. Pure agile breaks down because brand, architecture and content need a stable base before sprints make sense. Most effective teams run a gated front end (discovery, architecture, content direction) and an iterative back end (design and build in short cycles, page type by page type).

Compare scenarios

Choosing a delivery model

Best when scope is fixed, stakeholders are many and approvals are formal.

Clear sign-offs and budgets
Risk: feedback arrives late, when change is costly
Works for regulated sectors and public bodies

Where projects go wrong

The homepage-first trap. Teams spend weeks on the homepage, which is rarely where most visitors land. Design the highest-traffic and highest-intent templates first.
Approval by committee. Feedback from ten people without a decider produces averaged design. Name one approver per stage.
No migration plan. A redesign that changes URLs without redirects can wipe out search visibility built over years.
Launch as the end. The first version of a site is a hypothesis. Budget for conversion rate optimisation after launch rather than spending everything before it.

Checklist

0/8

Gate check before visual design starts

Key takeaways

01A website design process is a sequence of closed decisions, each with an output and an approver.
02Agree the success measure in discovery or every later debate becomes a matter of taste.
03Real content should exist before visual design, at least one example per page type.
04Design structure before surface and deliver a component library rather than isolated mock-ups.
05Treat launch as the start of measurement and optimisation, not the end of the project.

Frequently asked

What are the main stages of the website design process?: Most frameworks cover discovery, information architecture, content, wireframing and visual design, development, quality assurance and launch. The names vary, but the logic is constant: settle goals and structure before investing in design and code, and test thoroughly before going live. Post-launch measurement and iteration should be planned as a stage in its own right.
How long does a website design process take?: It depends on scope, the number of page types, integrations and, above all, how quickly content and approvals arrive. A small brochure site and a multi-language ecommerce platform are different projects. Ask any team to show the sequence and dependencies rather than a single number, and treat content readiness as the main schedule risk.
Should content or design come first?: Content, at least in draft. Designing around placeholder text hides the real length and structure of the message and often leads to layouts that break when real copy arrives. You do not need every page written, but each key page type should have a real example before visual design begins.
Who should be involved in a website design project?: At minimum: a business owner who sets goals and approves stages, a content owner, a designer, a developer, and someone responsible for analytics and SEO. Sales and customer service colleagues are valuable in discovery because they hear customer questions daily. Keep the approval group small and name one decider.
What is the difference between UX design and web design?: UX design focuses on how people find information and complete tasks: structure, flows and usability. Web design is often used more broadly to include visual design and sometimes development. In practice a good website process includes both, with UX decisions made first and visual decisions built on top of them.

Published by Fabulous.Media, a network of specialist marketing agencies. Updated 9 October 2026. Platform features change often; check current official documentation before acting on platform-specific detail.