So you need a new website, and you don’t know where to start? The fastest way to a website that actually works is a proper web design and development process, run in phases, with the right questions answered before anyone touches a design tool. Here at Mettro, we’ve established a process that guides both our clients and our team through the planning and building stages of a website. This ensures successful delivery and keeps everyone on the same page.
What Is the Web Design and Development Process?
A web design and development process is the structured sequence a team follows to plan, design, build, test and launch a website. It usually runs in six phases, from the initial brief through to post-launch support. The phases exist to surface decisions in the right order, so you are not redesigning the homepage because a content question was missed in week two.
Why does this matter for you? Because a website without a process tends to drift. The scope creeps. The timeline blows up. A real process protects the budget, the deadline and the outcome.
Three things sit at the centre of every good process. Clear goals. Honest scope. A shared understanding of what the site needs to do for the business.
Why a Structured Process Matters
A defined process keeps the project on the rails and the relationship working. It gives both sides a map.
For the team building the site, the process forces clarity on goals, audience, technical needs and timeframe before design starts.
For you, the process means no surprises. You know what is happening next, what your team needs to provide, and where the decision points sit. You get involved at the moments where your input actually changes the outcome, not at random points along the way.
The phases below are how we run it. Most decent agencies will follow something similar, even if the names differ.
Phase 1: Brief and Brainstorm
Your website needs to fit your business and your customers, not a template someone liked the look of. That means the project starts with a proper brief.
A brief is a written document that captures what your business does, who it serves, what the website needs to achieve, and the constraints around it. It is the single most useful thing you can prepare before talking to an agency. A good brief shortens the project, reduces rework, and gets you a better quote.
A useful website brief answers questions across business, audience, purpose, content and operations.
Business and positioning. What does your business do, and what makes it different? Who are your main competitors? What is the goal of your website in the context of the wider business?
Audience. Who is your ideal customer? What problem are they coming to your site to solve? Where do they spend time online? What devices are they using to get to you?
Purpose and goals. What is the site actually for? Sales, leads, phone calls, in-store visits, brand credibility, internal information? Be specific. A site built to drive online sales looks very different from one built to support a sales team.
Features. What do you think the site needs to do? Online booking, e-commerce, account logins, multi-language, integrations with other systems?
Budget and timeframe. A real number and a real date. Even a range is useful.
Brand assets. Logo, colours, fonts, photography, a style guide if you have one. Note what you have and what is missing.
Content. Who is writing the copy? Who is sourcing the images? “We will provide content” is the single most common reason website projects stall.
SEO and marketing. What is your plan after launch? Are you investing in SEO, paid advertising, and email? The site needs to support whatever you are running.
Maintenance. What level of ongoing support do you expect? Who is managing the site once it is live?
Analytics and tracking. What do you need to measure? Do you have existing accounts for Google Analytics, Search Console, Tag Manager?
Phase 2: Analysis and Specification
This is where everything you brought in the brief gets pressure-tested and turned into a plan.
In this phase, the team reviews the brief, looks at your existing site and systems, researches your audience and competitors, and runs additional workshops where needed. The goal is to spot gaps, challenge assumptions and lock in what the site actually needs to do.
The output is a blueprint. It is a document, sometimes a long one, that defines the project before anyone designs a screen.
A good blueprint typically includes:
- A summary of the workshops and the decisions made
- Wireframes for the key page templates and top-level navigation
- A content management specification, covering user roles, permissions and what your team will be able to edit
- Technical requirements, including hosting, integrations and security
- A clear scope statement, including what is in and what is out
Wireframes deserve a note of their own. A wireframe is a low-fidelity layout that shows where things sit on a page without committing to colours, fonts or imagery. It works by stripping the page back to structure so you can review the logic before the design conversation begins. Wireframes save weeks of arguing about hero images when the real issue is page hierarchy.
Once the blueprint is signed off, the spec is locked. Changes after this point are change requests.
Phase 3: Design and Development
Now the building starts.
Design and development run in parallel, not in sequence. The design team works on user experience, interface, layout and visual treatment. The development team builds the templates, integrations and content management setup. Content gets loaded as it is finalised.
What you should expect from this phase:
- Visual designs of key templates, reviewed against the wireframes and the brief
- A working development environment where pages can be reviewed in a browser
- Regular check-ins, not silence followed by a big reveal
- Honest conversations about anything in the spec that is not working in practice
This is also when user experience design decisions get tested. UX is not a stage that happens once. It runs through every screen, every form, every interaction.
Phase 4: Pre-Launch and User Acceptance Testing
The team tests the site before it goes live. Properly.
Quality assurance covers performance, usability, browser compatibility, mobile responsiveness, accessibility, forms, links, and any custom functionality. The QA team works from a checklist based on the blueprint.
You will get a chance to test the site, too. This is user acceptance testing, and it is your job. Click everything. Submit every form. Try to break it. Read the copy on every page like you are reading it for the first time.
The team collates feedback and works through it. Bug fixes are made. Content corrections are applied. Anything that falls outside the original spec gets flagged as a change request, scoped and quoted before it goes ahead.
Phase 5: Go Live and Handover
Launch day is not the end of the project. It is the start of the next phase.
When the site goes live, the team handles the technical cutover, including DNS, hosting, redirects from old URLs to new ones, and analytics. Anything that breaks gets fixed quickly, because the first few days post-launch are when the small issues surface.
Then comes training. Your team needs to know how to manage the site. We do this through a structured handover, with videos and written help documentation tailored to your site that your team can refer back to when someone new joins or someone forgets how to add a blog post.
Phase 6: Post-Launch Support and Maintenance
A website is not a one-off project. It needs to be maintained. Plugins update. Browsers change. Security patches come out. Hosting needs monitoring. Backups need running and, occasionally, restoring. Content needs adding.
You have two real options here. Run support and maintenance in-house, with someone on your team who knows what they are doing. Or use a provider, either the agency that built it or a specialist. Either way, decide before launch, not after the first thing breaks.
Our support and maintenance service covers monitoring, updates, backups, security and small content changes on retainer. You can also engage us ad hoc when something specific comes up.
The thing to avoid is the gap. Sites that go six months with no maintenance accumulate small problems that turn into big ones.
Your Next Step
If you are starting a website build, do the brief first. Sit down, work through the questions in Phase 1, and get your answers on paper before you talk to anyone. You will spot gaps in your own thinking before an agency does, and you will brief the project faster and better when the time comes. When you are ready to start, we can take it from there.
Let’s talk about your website project.
