The web design process, stage by stage
Last updated
The web design process is the order of stages a website moves through, from the first talk about goals to the day it goes live. For an agency, it's also how you show a client what happens next and when you'll need them. Name each stage, say what the client does in it, and close it with the client's yes.
What are the stages of the web design process?
Common stages include discovery, planning, design, content, build, review and launch. Your names for them can differ. What matters is that each stage ends with something the client can see and approve.
| Stage | What happens | What the client does |
|---|---|---|
| Discovery | You learn the goals, the audience and the must-have features | Answers your questions and shares brand files and logins |
| Planning | You map the pages and how a visitor moves through them | Approves the page list |
| Design | Mockups show the look of the key pages | Reviews them and sends notes |
| Content | The words and images are written or gathered | Supplies or approves the copy |
| Build | The approved design becomes a working site on a test link | Waits, then clicks through the test link |
| Review | You go through the site together and fix what's left | Signs off in writing |
| Launch | The site goes live on the client's domain | Tells their own customers |
Your team sees more steps than your client does. For the production stages inside the team, see the website development process.
What is the first step in the web design process?
The first step is discovery: finding out what the site has to do before anyone designs a page. Skip it, and every later stage rests on a guess.
Ask these questions before you plan a single page:
- What should a visitor do on the site: call, book, buy or fill out a form?
- Who visits, and what do they need to find fast?
- Which pages must be ready on launch day?
- What content exists today, and who writes what's missing?
- Who on the client's side gives the final yes?
Write the answers down and send them back to the client to confirm. That short summary is what the later stages are measured against.
DeskTeam360 gives away a template for handing off tasks. It's called the Ultimate Task Delegation Template, website builds are on its list, and you give your email to get it.
How do you explain your web design process to clients?
Explain it in the client's terms: what you'll do, what you need from them, and what they'll see at the end of each stage. Put it in writing before work starts, and point back to it when a question comes up.
- Name each stage in plain words. If you use a term like "wireframe", say what it means.
- Beside each stage, list what you need from the client.
- Mark the points where work stops until the client says yes.
- Say how the client sends feedback, and who collects it.
- Show the same stages on your "our process" page, in your proposal and on the kickoff call.
Once the stages are clear, write them down once and reuse them. For writing the process down as a template, see the web design process template.
A finished site shows a client where the stages lead. Before its new site, The Lands End School, a preschool, had a single landing page with its contact details. DeskTeam360 built the new website. The school liked how the plan was laid out from the start, the range of design ideas it could pick from, and that changes were made along the way. Now parents can apply online, schedule a tour or join the waitlist on the site.
"Just Do It! I’ve Been Extremely Pleased With The Work, And I’ve Had No Issues Or Complaints At All"
When you're ready to hand off the next build task, get DeskTeam360's free Ultimate Task Delegation Template. Website builds are among the tasks it fits, and it costs you an email address.
More on Planning the build
- The website development process, from plan to launch
- Web design process template: the stages an agency repeats
- Website development timeline template
- All guides
Sources
- DeskTeam360's case study on The Lands End School, deskteam360.com/case-studies/the-lands-end-school-deskteam360s-process-made-everything-so-easy
- DeskTeam360's page for the Ultimate Task Delegation Template, start.deskteam360.com/ultimate-task-delegation-template
- DeskTeam360's About page, deskteam360.com/about
What changed
- : Page first published.