Blog

The Website Design Process: An 8-Stage Breakdown

By Katherine Voss · Published 2026-01-25 · Updated 2026-08-20

Quick answer

A professional website design process has eight stages: discovery, content and messaging strategy, information architecture, wireframing, visual design, development, QA and launch, and post-launch iteration. A focused marketing site typically takes 6-10 weeks end to end; a larger multi-template site takes 12-16 weeks. Discovery and information architecture are the stages most often skipped under deadline pressure, and skipping them is the most common cause of a redesign that ships on time but does not move the metric it was meant to move.

The eight stages, at a glance

Every credible website design process, whether run in-house or by an outside agency, moves through the same eight stages in roughly the same order. Compressing or skipping a stage under deadline pressure is possible, but it transfers risk downstream: a skipped discovery phase usually surfaces as a stakeholder rejecting the visual design three weeks later because it does not reflect something a customer interview would have caught earlier.

StageTypical durationPrimary owner
1. Discovery1-2 weeksStrategist / project lead
2. Content & messaging strategy1 week (parallel with IA)Copywriter / strategist
3. Information architecture1 weekUX / product designer
4. Wireframing1 weekUX / product designer
5. Visual design2-4 weeksVisual / brand designer
6. Development2-4 weeksDeveloper / no-code specialist
7. QA & launch3-5 daysDeveloper / project lead
8. Post-launch iterationOngoingMarketing team / retainer agency

Stage 1: Discovery

Discovery answers a single question before any design work starts: what specifically is this website supposed to accomplish, and how will we know if it worked. A real discovery phase includes reviewing existing analytics (traffic sources, conversion funnels, drop-off points), interviewing several customers or sales staff about how they describe the product in their own words, auditing two or three direct competitors' sites for gaps and patterns, and setting one or two specific, measurable goals, for example raising trial-signup rate by a stated amount, rather than a vague goal like "look more modern."

Stage 2: Content and messaging strategy

Messaging strategy determines the actual argument the site is making, in what order, before any layout decisions happen. This stage typically produces a positioning statement, a homepage messaging hierarchy (what claim comes first, second, third), and draft copy for the highest-traffic pages. Running this in parallel with information architecture, rather than after visual design, avoids the common failure mode of a beautiful layout with no room for the sentence that actually needs to be there.

Stage 3: Information architecture

Information architecture defines the sitemap and the structure of each page template: what sections exist, in what order, and what each one needs to communicate. This is where the team decides, for example, whether pricing lives on its own page or as a homepage section, and whether case studies get individual pages or a single filterable index. Getting this wrong is expensive to fix later, since visual design and development both depend on a stable structure.

Stage 4: Wireframing

Wireframes are low-fidelity layouts, usually gray-scale boxes and placeholder text, that show structure and hierarchy without color, typography, or final imagery. Reviewing wireframes separately from visual design lets stakeholders evaluate the layout logic (does the most important claim come first, is the pricing CTA visible without scrolling) without getting distracted by whether they personally like a particular shade of blue. Skipping straight to high-fidelity design without a wireframe stage is one of the most common causes of late-stage rework.

Stage 5: Visual design

Visual design applies typography, color, imagery, and the brand system on top of the approved wireframes. This is usually the longest single stage and the one most people mean when they say "website design." A typical process includes an initial concept round (often two design directions to choose from), followed by 1-3 revision rounds on the selected direction before templates are finalized for every unique page type in the sitemap.

Stage 6: Development

Development turns the approved design files into a live, functioning website, whether that means building in a no-code platform like Webflow or Framer, or writing custom code. This stage also includes CMS setup so a marketing team can edit content without a developer, integrating analytics and tracking, and connecting any third-party tools (forms, chat, scheduling). No-code builds typically run faster than custom code for an equivalent design, which is why most agencies on this site's ranking, including Bricx Labs, Clay, Ramotion, and Halo Lab, offer Webflow or Framer development as a standard option.

Stage 7: QA and launch

Quality assurance covers cross-browser and cross-device testing, checking that every link and form works, verifying analytics fire correctly, and mapping 301 redirects from old URLs to new ones so existing search rankings and inbound links are not broken by the switch. A launch checklist should be written and signed off before go-live, since post-launch bugs found by real visitors instead of internal QA are far more costly to reputation than a short delay to catch them first.

Stage 8: Post-launch iteration

A website's first live version is a starting point, not a finished product. A 30-day post-launch window should compare real analytics against pre-launch benchmarks from the discovery stage, and any material gap (a page converting worse than the version it replaced) should trigger a fast follow-up fix rather than waiting for the next full redesign cycle. This is the stage most companies underinvest in, and it is the reason several agencies on this list offer an ongoing monthly retainer rather than pricing every website only as a one-time project. See the website redesign guide for the signs that indicate it's time for more than incremental iteration.

What to prepare before the process starts

A project moves faster and cheaper when the client comes in prepared. Before kickoff, gather: existing brand assets (logo files, brand guidelines if any exist), access to current analytics, three to five competitor or aspirational sites with notes on what specifically you like about each, any existing customer research or sales call recordings, and a single named decision-maker with authority to approve each stage without needing to loop in additional stakeholders after the fact. Projects that start without a clear decision-maker consistently take longer than the original timeline, regardless of which agency or freelancer is doing the work.

Common pitfalls that delay a website launch

  • Too many parallel decision-makers. Every additional stakeholder who can request changes independently adds review cycles that were not in the original timeline.
  • Content not ready when development starts. Development teams building around placeholder text often have to rebuild layouts once real copy, which is almost always a different length, is dropped in.
  • Scope added mid-project without a timeline or budget adjustment. A new page or feature added after kickoff either extends the timeline or forces cuts elsewhere; treating it as free additional work is the fastest way to blow both budget and deadline.
  • No launch checklist. Redirect mapping, analytics verification, and cross-browser testing are easy to skip under deadline pressure and expensive to fix after a public launch.

When to run this process in-house versus with an agency

Running this process in-house works when a company already has a designer (or design-literate marketer), a developer with bandwidth, and someone able to write clear copy, and when the project is a single, well-defined scope. An outside agency is the better fit when any of those roles are missing internally, when multiple disciplines need to be coordinated on a fixed deadline, or when the company lacks a design-literate internal reviewer who can tell the difference between competent and exceptional work. See the full ranking of top website design agencies for agencies that run this exact process end to end.

Frequently asked questions

How long does the website design process take?+
A focused B2B SaaS marketing site typically takes 6-10 weeks from kickoff to launch when working with a specialized agency. A larger multi-template enterprise site takes 12-16 weeks or longer, primarily due to stakeholder review cycles rather than the design or build work itself.
What is the first step in the website design process?+
Discovery is the first step: reviewing existing analytics, interviewing customers or sales staff, auditing competitors, and setting specific, measurable goals for the redesign. Skipping discovery and moving straight to visual design is the most common reason a redesign ships without moving the business metric it was meant to improve.
Who is involved in a typical website design project?+
A typical project team includes a project or account manager, a UX or product designer responsible for information architecture and wireframes, a visual designer, a developer (or a no-code specialist for Webflow/Framer builds), and a copywriter, either dedicated or combined with the designer role. On the client side, a single decision-maker with authority to approve each stage keeps the timeline on track; multiple co-equal approvers is the most common cause of schedule slippage.
What is the difference between wireframes and visual design?+
A wireframe is a low-fidelity layout that shows the structure, content hierarchy, and placement of elements on a page without color, typography, or imagery. Visual design applies the actual brand system, typography, color, and imagery on top of an approved wireframe. Reviewing structure and color/typography as separate steps prevents stakeholders from rejecting a wireframe over a color preference rather than the actual layout logic.
Should I write the copy before or after the design?+
Copy should be drafted before or alongside wireframing, not after visual design is complete. Designing a layout first and then trying to fit copy into a fixed space produces either truncated messaging or a layout that has to be rebuilt around the actual words, both of which cost more time than writing copy early in the process.
What happens after a website launches?+
After launch, the process should include a 30-day monitoring window to check analytics against pre-launch benchmarks, a fix list for any bugs found post-launch, and a plan for ongoing iteration, new landing pages, copy updates, seasonal campaigns, since a website's first version is rarely its final version.
Should a website design process follow Agile or Waterfall?+
Most website design projects run a modified Waterfall process (discovery, then IA, then design, then build, roughly in sequence) because the deliverables depend on each other and stakeholder sign-off happens at defined checkpoints, unlike ongoing product development where Agile sprints suit continuously changing requirements. Post-launch iteration, by contrast, works well as an Agile, sprint-based process, since it involves many small, independent changes rather than one large interdependent deliverable.
What tools do agencies typically use during the process?+
Common tools include Figma for wireframing and visual design, Notion or Asana for project management, and Webflow or Framer for no-code development, with custom-coded projects using a framework like Next.js instead. Analytics setup typically uses Google Analytics or a privacy-focused alternative like Plausible, paired with a heatmapping tool such as Hotjar for post-launch behavioral analysis.