The Process of Web Design, Step by Step

What are the four steps of web design?

The four steps are audit, structure, build and grow. Each answers one question, needs something from you, and ends with an approval. Work that skips a step shows up later as rework.

What is the first step in the web design process?

The first step is to define one goal and one audience, then audit what exists against them. "More enquiries" is a wish. "Twenty enquiries a month from homeowners in Limassol who need a boiler repaired" is a goal a designer can build toward and you can measure.

In the audit, the designer looks at four things: your current site if there is one (what earns traffic and what does not), your competitors' sites, the questions customers ask before they buy, and the tools behind the site, such as analytics and forms. You supply facts a designer cannot see from outside, like which enquiries turn into work. Our website audit checklist lists what a proper audit covers.

What happens in the structure step?

Structure means planning the pages before drawing them. The deliverables are a page map, a short plan for each page (its purpose, the search or question it answers, the action it asks for) and a content outline. A wireframe, which is a plain layout with no styling, shows where each element sits.

This is the cheapest point to change your mind. Moving a page in a plan takes minutes. Moving it after build takes hours. If the budget allows, put a clickable prototype in front of real people. Nielsen Norman Group's guidance is to test with no more than five users per round and run several small rounds, and it reports that the first five users find about 85% of the usability problems.

What happens in the build step?

Build covers design, development, content entry, testing and launch. Design comes first, shown for desktop and phone. After you approve it, the site is built on a staging copy that only you and the team can see.

Before launch, check the following:

1. Forms reach the right inbox, and a test enquiry arrives.
2. Every page works on a real phone and on at least two browsers.
3. Speed meets Google's "good" targets at the 75th percentile, as set out on web.dev: largest content in 2.5 seconds or less, interaction response of 200 milliseconds or less, layout shift of 0.1 or less.
4. Analytics and Search Console are installed and verified.
5. If you replace an old site, every old address that matters redirects to its new equivalent. Google's site move guidance asks for permanent redirects and a full map of old to new addresses.
6. The domain, hosting and files are in your name, and you hold the logins.

What happens after launch?

Grow is the step most projects skip. A site that launches is a draft that has met real visitors for the first time. In the first weeks you look for pages that get visits but no action, forms that fail, searches the site was not built for, and pages Google has not indexed. From then on, a monthly review of enquiries, visits and search queries decides what to write, fix or remove. Our technical SEO checklist covers what to monitor.

Example: a fictional bakery site (illustrative)

This is an invented example to show the outputs of each step. No real business is described.

Where do projects get delayed?

Most delays come from inputs, not from design. The usual causes are late text and photos, feedback that arrives from several people who disagree, new features added after sign-off, and integrations that depend on a third party. You can prevent most of them by agreeing a single decision-maker, a content deadline for each page and a written rule that changes after sign-off are priced as extras.

How much does web design cost?

Design is a minority of the cost. In our 90-hour example for an 8-page site, it is 22 hours, and the full project typically costs EUR 2,700 to 8,100 at EUR 30 to 90 an hour. The assumptions are in our guide to the cost of building a website. To see how a supplier should present scope and price, read what website design services for small business should include.

If you want to run a project this way, see our web design service. We quote in writing, and the RFP template shows what to ask any supplier to cover.