Website design process: the 7 steps from brief to launch

A website design process is the order of steps a designer follows from the first call to launch day. Most guides list the steps from the designer's side. This one also shows what you, the client, need to provide at each step, what you get back, and what you sign off before the project moves on, because that is where most projects speed up or stall.

The 7 steps at a glance

The names vary between studios, but almost every custom website goes through the same seven steps. Each step ends with a decision, and the next step builds on it. Changing an approved step later is possible, but it costs time because the work after it has to be redone.

Step 1: Brief and discovery

Everything starts with what the site needs to do. A designer asks about your business, your customers, the action you want visitors to take (call, book, buy, sign up) and the sites you like or dislike. For a redesign, this step also covers what works on the current site and what does not.

The output is a scope: a page list, the features you need (blog, booking, store, forms, languages), the platform and a price. Our guide on how to write a design brief walks through what to include, and the website cost guide explains what moves the price.

Step 2: Sitemap and content plan

The sitemap is the list of pages and how they connect in the menu. The content plan goes one level deeper and lists the sections each page needs, for example hero, services, proof, process, FAQ and contact.

This is the cheapest place to change your mind. Moving a page in a sitemap takes minutes. Moving it after the design is built takes days. If you are redesigning, this is also when old URLs get listed, so they can be mapped to new ones later.

Step 3: Wireframes

Wireframes are simple grey layouts without final colors, photos or fonts. They show the order of sections, the length of each page and where the buttons sit. Reviewing them answers one question: does this page tell the story in the right order?

Not every project needs full wireframes. A small brochure site with a clear brief can go straight to design. A site with many page types, complex forms or a store benefits from them, because structure problems show up before anyone spends time on visuals.

Step 4: Visual design

Design usually starts with the homepage, since it sets the style for everything else. Once the homepage is approved, the designer applies the same system to the inner pages, which goes much faster. Good studios design the mobile version too, not only desktop, and check text contrast against the WCAG minimum of 4.5:1 for body text.

Most design packages include a set number of revision rounds. Use them well: collect feedback from everyone first and send it as one list. Two people giving opposite comments in separate messages is the most common reason a design phase doubles in length.

From the studio: when we send a homepage design, we ask the client to answer three things before any color or font comments: is anything missing, is anything in the wrong order, and is the main button clear. Structure feedback first, styling feedback second, saves a full revision round on most projects.

Step 5: Development

Development turns the approved design into a working site on a staging link, a private address where you can click through it before launch. This includes the responsive build for tablet and phone, the CMS for blog posts or projects, forms, integrations and basic SEO settings such as page titles and meta descriptions.

The platform is chosen in step 1, not here. If you are still deciding, our Webflow vs WordPress comparison covers the trade-offs. If the design was made in Figma, this guide to Figma to Webflow explains how a design moves into a build.

Step 6: Content, testing and review

Real copy and images go into the site, and the layout gets checked with them in place. Placeholder text hides problems: a heading that fits in three words in the design might be nine words in reality.

Testing covers forms, links, mobile layouts, page speed, browsers and spelling. You get one review round on the staging link. This is the moment to click everything as a visitor would, fill in every form and read every page on your phone.

Step 7: Launch and handover

Launch means connecting the domain, setting up SSL, submitting the sitemap to Google Search Console and, for redesigns, adding redirects from old URLs to new ones. Google recommends permanent server-side redirects based on a URL mapping, kept for at least a year. Our website redesign SEO guide covers this step in detail.

Handover should include:

• Owner access to the platform account, hosting and domain, in your name
• A short guide or video on how to edit pages and add blog posts
• Design source files, if they were part of the agreement
• A list of tools and subscriptions the site depends on, with renewal dates

Where website projects usually stall

In our experience, delays rarely come from design or code. They come from waiting. The most common causes:

1. Missing copy and images. Design can start with placeholders, but launch cannot.
2. Too many reviewers. Pick one person who collects feedback and approves each step.
3. Reopening approved steps. Changing the sitemap during development means redesigning pages.
4. New features mid-project. Write them down for a phase two instead of adding them to the current scope.
5. Access. Domain, hosting and old site logins that nobody can find.

For typical durations of each project type, see how long it takes to build a website.

How the process changes by project type

The seven steps stay the same, but their weight shifts:

• Landing page: steps 2 and 3 merge into one section plan. Most of the time goes into copy and the main offer.
• Small business site: the full process, often without separate wireframes if the brief is clear.
• Redesign: discovery includes a review of the old site, and launch includes the URL mapping and redirects.
• Online store: extra time in development and testing for products, payments, shipping and tax settings.

Related guides

• How to write a design brief
• How long does it take to build a website?
• Our web design service