The website development process runs in eight stages: discovery and brief, sitemap and content plan, wireframes, visual design, development, content entry, testing, then launch and post-launch support. Each stage ends with a sign-off, and you supply content, feedback and account access along the way. A typical small-business site takes a few months from proposal to launch.
This guide is written from the agency’s side of the table. For each stage you’ll see what happens, what you need to supply and approve, and what tends to go wrong. It also covers the quality checks that separate a site that merely launches from one that performs: Core Web Vitals, WCAG 2.2 accessibility and SEO at launch.
Key takeaways
- The eight stages are discovery, sitemap and content plan, wireframes, visual design, development, content entry, testing, and launch with support.
- A sign-off at the end of each stage prevents late changes, which cost the most to make.
- Clients supply goals, content, brand assets, account access and timely feedback; missing any one of them stalls the project.
- Test against published standards before launch: Core Web Vitals thresholds, WCAG 2.2 level AA and a tested redirect map.
- Plan post-launch support from the start: updates, backups, monitoring and fixes keep the site working after handover.
What are the stages of the website development process?
There are eight, and each produces something you approve before the next begins. Developers sometimes call this the web development life cycle, because the last stage, support, feeds improvements back into the first.
| # | Stage | What happens | You approve | Typical planning range |
|---|---|---|---|---|
| 1 | Discovery and brief | Goals, audience, scope and technical choices are agreed | The written proposal | 1 to 2 weeks |
| 2 | Sitemap and content plan | Every page, the navigation and what each page must say | Sitemap and content plan | 1 to 2 weeks |
| 3 | Wireframes | Grey-box layouts for each page template | Wireframes for every template | 1 to 2 weeks |
| 4 | Visual design | Brand, typography, color and components applied to key templates | Designs for key templates | 2 to 3 weeks |
| 5 | Development | Templates, CMS, features and integrations built on a private staging site | The working staging site | 2 to 6 weeks |
| 6 | Content entry | Final copy, images and SEO fields loaded | Every page’s content | 1 to 2 weeks, often overlapping stage 5 |
| 7 | Testing and QA | Devices, speed, forms, accessibility and SEO checked and fixed | Launch readiness | 1 to 2 weeks |
| 8 | Launch and support | Go-live, redirects, monitoring, training and maintenance | Go-live | Launch day, then ongoing |
Treat these ranges as typical planning figures for a small-business site of about 10 to 25 pages on WordPress or Shopify with prompt feedback, not as promises. Custom features, large product catalogs, several languages and late content all stretch them.
Stage 1: What happens in discovery and the brief?
Discovery turns your goals into a written scope. The agency learns what the business sells, to whom and what the site must achieve, and you come away with a proposal that fixes scope, timeline and cost before any design work starts.
- A kickoff call with the decision-maker to go through the brief, goals and audience.
- A review of the current site, if there is one: analytics, content, URLs and what works.
- A look at competitors and reference sites, to agree what buyers in your market expect.
- Technical choices: platform, hosting, integrations, and whether a theme or custom design fits the budget.
- A written proposal listing deliverables, exclusions, milestones and the payment schedule.
The better your brief, the shorter discovery takes; our website brief template lists the 12 sections agencies need to quote accurately. For the theme-or-custom decision, see custom website vs template. If you’re replacing an existing site, work through the website redesign checklist first, because its benchmarks and content inventory feed straight into discovery.
Stages 2 to 4: Sitemap, wireframes and visual design
These three stages decide what the site contains and how it looks, in that order. Structure comes before styling, so feedback at each step is about the right thing.
Stage 2: Sitemap and content plan
The sitemap lists every page and how the navigation connects them. The content plan says what each page must cover, which customer question or search it answers, and who writes it by when. Page and template counts are fixed here, which is why this stage comes before design. If you’re unsure what a business site needs, start from our checklist of essential pages and features for small business websites.
Stage 3: Wireframes
Wireframes are grey-box layouts of each template, showing where the headline, proof, calls to action and forms sit, on mobile first and then desktop. Reviewing structure without colors keeps feedback on what matters: can a visitor find the answer and take the next step? Approve a wireframe for every template before visual design starts.
Stage 4: Visual design
Visual design applies your brand to the approved wireframes: typography, color, imagery, icons, buttons and form styles. A common approach is to design the home page and one or two key templates first, then extend the same system to the rest once you approve the direction.
Accessibility starts in the design file, not at testing. At level AA, WCAG 2.2 requires normal text to reach a 4.5:1 contrast ratio against its background and most click or tap targets to measure at least 24 by 24 CSS pixels. Both are far cheaper to get right in a design than to fix in code.
Tip
Review designs as clickable prototypes on your own phone, not as flat images on a large monitor. Most of your visitors will see the site on a small screen, and problems with text size, spacing and button placement only show up there.
Stages 5 and 6: Development and content entry
Development turns the approved designs into a working site on a private staging server, and content entry fills it with final copy, images and SEO fields. The two usually overlap: content goes in as templates are finished.
Stage 5: Development
- Front end: templates built from the design system and tested at phone, tablet and desktop widths.
- Back end: the CMS set up, whether WordPress, Shopify or a custom stack, with page types, product structure and user roles.
- Features and integrations: forms, booking, payments, CRM, email marketing, maps and analytics.
- Staging protection: a password on the staging site. Google says password protection keeps content out of Search, while a page blocked by robots.txt can still appear in results, because Google can’t see a noindex rule on a page it isn’t allowed to crawl.
- Safety nets: version control and backups from the first day of the build.
Agencies deliver this stage in one of two ways. In a waterfall approach each stage finishes before the next starts, which suits fixed-scope brochure sites. In an agile or hybrid approach the site is built in short cycles with a review after each, which suits larger sites and custom features whose requirements will shift. Ask which one your agency uses and how change requests are priced.
Stage 6: Content entry
Content entry is more than pasting text. Each page needs final copy, compressed images with alt text, a unique title and meta description, internal links and, where relevant, structured data. On a store, product data, variants, prices and shipping rules belong to this stage too, and they can take as long as the design.
If content is late, the whole project waits. Give every page in the content plan an owner and a deadline, and agree who loads it: the agency, your team, or both.
Stage 7: Which quality checks should a website pass before launch?
Testing checks the staging site against the brief and against published standards, and fixes everything that fails before launch. Use real phones and tablets, not only a resized desktop browser.
| Area | What to check | Pass mark or tool |
|---|---|---|
| Devices and browsers | Layout and function on real iOS and Android phones, tablets and current desktop browsers | No broken layouts; every button and link works by touch |
| Speed | Core Web Vitals on each key template | LCP 2.5 s or less, INP 200 ms or less, CLS 0.1 or less; tested with Lighthouse and PageSpeed Insights |
| Forms and conversions | Every form, button and phone or WhatsApp link, end to end | Submissions arrive, confirmations send and GA4 key events fire |
| Accessibility | Keyboard navigation, contrast, form labels, alt text and visible focus | WCAG 2.2 level AA; automated checks plus manual keyboard testing |
| SEO | Titles, meta descriptions, headings, canonicals, XML sitemap, robots.txt and redirects | Each page unique; redirect map tested; launch-day removal of noindex planned |
| Security and backups | HTTPS, current software versions, admin accounts and a backup restore | A test restore works; only necessary admin accounts exist |
| Content | Spelling, prices, contact details and legal pages | Your sign-off on every page |
Before launch there is no real-visitor data for a new site, so speed testing relies on lab tools such as Lighthouse. Google’s Web Vitals guidance assesses the thresholds at the 75th percentile of real page loads, so confirm them with field data once traffic builds. For the full list of crawl, indexing and markup checks, use our technical SEO checklist for a new website.
Stage 8: How do launch and post-launch support work?
Launch is a planned switch, run from a checklist while both teams are available. The agency moves the site live, removes staging protection, turns on redirects if URLs have changed, and checks everything again on the live domain.
- Pick a launch window when both teams can respond, avoiding the day before a weekend or holiday.
- Take full backups of the old and new sites.
- Point the domain or deploy to the live server, and confirm HTTPS works on every page.
- Remove the staging password and noindex rules, and publish the live robots.txt.
- Put 301 redirects live for any changed URLs and test a sample.
- Submit the XML sitemap in Search Console and watch GA4 Realtime.
- Re-test forms, payments and key events on the live domain.
If your old site ranks well, redirects deserve a plan of their own. Our guide to website migration SEO covers redirect mapping and the weeks of monitoring after launch.
After launch
- Support period: a set time, agreed in the proposal, for fixing issues real visitors find.
- Training: the people who will edit the site learn to add pages, posts and products.
- Maintenance: software updates, backups, uptime and security monitoring, handled by someone named.
- Monthly review: Search Console, Core Web Vitals field data and key events against the goals from discovery.
- Improvement backlog: changes prioritized by data, which starts the life cycle again.
Who does what: client and agency responsibilities
The agency does the building, but every stage needs something from you. Agree these responsibilities in the proposal, because a missing input on your side delays the project as surely as a missed deadline on theirs.
| Stage | Agency | Client |
|---|---|---|
| 1. Discovery and brief | Runs the kickoff, reviews the current site, writes the proposal | Supplies the brief, goals and budget range; names one decision-maker |
| 2. Sitemap and content plan | Proposes structure, navigation and the page plan | Confirms services and pages; assigns content owners |
| 3. Wireframes | Lays out every template | Reviews structure and flow, then approves |
| 4. Visual design | Designs key templates and the design system | Provides logo files, brand guidelines and photos; approves within the agreed rounds |
| 5. Development | Builds on staging and connects integrations | Gives access to the domain, hosting, payment, CRM and other accounts |
| 6. Content entry | Loads content, optimizes images and fills SEO fields | Delivers final copy on time and approves each page |
| 7. Testing | Runs QA and fixes issues | Tests key customer journeys and signs off content |
| 8. Launch and support | Launches, monitors, trains and maintains | Approves go-live, learns the CMS and reports issues |
How long does it take to build a website, and what delays it?
Using the planning ranges above, a typical small-business website takes roughly two to four months from signed proposal to launch. A simple site with ready content can move faster; e-commerce, custom features and several languages take longer. Your side of the table sets the pace as much as the agency’s.
What makes a website project take longer
- Content that arrives late or needs rewriting.
- Several approvers, or more feedback rounds than the proposal allows.
- New features added after design sign-off.
- Missing logins for the domain, DNS, hosting or third-party tools.
- Integration surprises, such as a booking tool without the connection you need, or a payment provider still reviewing your application.
- Product data that isn’t ready when a store’s templates are.
How to keep your project on schedule
- Name one decision-maker and agree a feedback window in writing, such as three working days.
- Put content deadlines into the plan, each with an owner.
- Quote and schedule change requests separately instead of squeezing them into the current stage.
- Ask for a weekly status update and a shared task board, so blockers surface early.
How TechZone can help
TechZone builds WordPress, Shopify, WooCommerce and custom-coded sites along these lines for clients in Pakistan and abroad. Every project begins with a free consultation, and scope, timeline and cost are agreed in a written proposal before any work starts. The WordPress development page explains how we plan and build these sites. Browse the sites in our portfolio and see what’s included in our website development services, then book a free 30-minute consultation to plan your project.
Frequently asked questions
How much does it cost to build a website?
The cost of building a website depends on the number of page templates, whether the design is custom or theme-based, the features and integrations required, who writes the content and what ongoing hosting and maintenance include. Rates also differ between agencies and countries. Ask for a written proposal that itemizes each of these, so you can compare quotes for the same scope.
What is the difference between web design and web development?
Web design decides how a website looks and works for visitors: layout, visual style, navigation and user experience, delivered as wireframes and designs. Web development builds that design into a working site: templates, the content management system, features, integrations, speed and security. Most business websites need both, and many agencies, including TechZone, provide them as one project.
Who owns the website when the project is finished?
Website ownership depends on the contract, so agree it in writing before work starts. The business should own the domain, the hosting account, the content and, once paid for, the design files and code. Check that premium theme and plugin licenses are registered to the business, and that admin logins are handed over at launch rather than kept only by the agency.
Can I update my website myself after launch?
Yes, most business websites are built on a content management system such as WordPress or Shopify, so staff can edit pages, publish posts and update products without a developer. Ask for training at launch and for the templates to be built with editing in mind. Structural changes, new features and software updates are usually better left to a developer or a maintenance plan.
Should I build my website on WordPress or Shopify?
Shopify suits businesses whose website is mainly an online store and who want hosting, security and checkout handled by the platform. WordPress suits content-led and service businesses that want full control, and it can also run a store through WooCommerce. Our comparison of Shopify and WooCommerce explains the trade-offs for online stores in detail.
Sources and further reading
- Web Vitals – web.dev
- Web Content Accessibility Guidelines (WCAG) 2.2 – W3C
- Understanding Success Criterion 2.5.8: Target Size (Minimum) – W3C WAI
- Block Search Indexing with noindex – Google Search Central
- Control the Content You Share on Search – Google Search Central
- Site Moves and Migrations – Google Search Central
