The web design process step by step

A website doesn't turn out right in one go. Strong web design is the result of a process in which strategy, structure, design and technology follow each other in the correct order. Below is that process step by step, including the questions to be answered per phase and a realistic lead time.

Phase 1: strategy and goals

Before anything is drawn, it should be clear what the website must do. A website that is primarily beautiful costs money. A website that delivers results starts with a goal.

In this phase you record:

• what the website should deliver (enquiries, sales, applications, recognition)
• which target groups the site is intended for and what their needs are
• which action is most important per target group
• how success is measured

A handy test: if you can name the single action the visitor should perform on each page, the foundation is set. If you can't, then the page isn't ready to be designed yet.

Where people search now

Visitors no longer arrive only via a search engine's search box. They come via AI answers, via social channels, via a link in an email and via a QR code. This means that every page must work independently: someone can enter from anywhere. This is one of the reasons that separate, well-structured pages work better than one long page with anchor links.

Phase 2: structure and sitemap

Structure determines whether visitors find what they are looking for. Here you create a sitemap: which pages exist, how they relate and what goes in the menu.

Rules of thumb that work well in practice:

• every important page is accessible within three clicks
• one topic per page, so the page maintains a clear goal
• related pages link to each other, with descriptive link texts
• navigation labels use the visitor's words, not internal terms

For larger sites, it helps to cluster themes: an overview page about a topic with in-depth pages beneath it. This is pleasant for visitors and makes it clear to search engines where your authority lies.

Phase 3: wireframes and content

Wireframes are sketches without colour and imagery. They are only about order and hierarchy: what is at the top, what follows, where the action is located.

Work with real content in this phase instead of filler text. As soon as real headings and texts are included, it becomes visible whether the structure is correct. A block that looks wonderful with three words often falls apart as soon as the real text is in there.

The structure of a page that works in most cases:

1. what it is and for whom (clear, in one or two lines)
2. why it is relevant to the visitor
3. how it works or what you get
4. proof: figures, cases, reviews
5. the next step, without barriers

Phase 4: visual design and design system

Now comes the design. Not as a layer on top, but as a reinforcement of the structure that is already there.

Important in this phase:

• a typographic scale: fixed sizes for headings, text and labels
• a colour set with sufficient contrast, including status colours
• a spacing system, so white space is consistent
• components instead of individual pages: buttons, cards, forms, tables

Such a design system prevents a site from falling apart after a year. New pages are then a matter of combining existing parts, not of designing from scratch.

Motion with a function

Animation is useful if it explains something: that something has opened, that something has been added, that you can scroll further. Animation without a function primarily slows things down. Keep transitions short (150–300 ms) and respect the system setting for reduced motion.

Phase 5: build and technology

In the build phase, the design is made functional. What happens here largely determines speed and findability.

Points of attention:

• semantic HTML: headings in the correct order, one H1 per page
• images in modern formats, with fixed dimensions and lazy loading
• measured Core Web Vitals instead of a feeling about speed
• manageability: content that the client can adjust themselves without breaking the design
• meta information, structured data and a sitemap

The choice of platform also belongs here. WordPress, Webflow, Shopify and headless solutions each have their strengths; the choice depends on who will manage the site, how much content there will be and which integrations are needed.

Phase 6: testing

Testing is more than checking if links work. Walk through at least:

• the most important flows on mobile, tablet and desktop
• keyboard usage and visible focus
• contrast and readability
• forms: error messages, confirmation, processing
• speed on an average mobile connection
• redirects from old URLs to new ones, so you don't lose built-up positions

The latter is the most underestimated step in a rebuild. A good redirect map prevents a new, more beautiful site from temporarily delivering less than the old one.

Phase 7: go-live and further development

Go-live is the starting point, not the end. From that moment on, you start measuring what visitors do and improve step by step.

A rhythm that works:

• monthly: look at the most important paths and drop-off points
• quarterly: implement one or two targeted improvements and measure the effect
• annually: review structure and content

Improve one thing at a time. If you change everything at once, you won't know what worked.

Lead time and phasing with AI tools

You will notice we no longer mention week numbers above. With AI tools such as Lovable, Claude Code, Cursor and similar, the phasing and the approach can look completely different from a classic project.

What changes:

• Design and build merge. Instead of wireframes, then design, then development, a working prototype often exists in the browser within a day, and you keep designing inside it.
• Phases become rounds. You work in short iterations on real pages rather than in sequential deliverables.
• Feedback is on something that works. Clicking and testing instead of reviewing static screens, so decisions land faster.
• The order can shift. Structure, content and technology influence each other while building; sometimes the build phase is exactly when the structure becomes clear.
• Content matters even more. Building takes less time, so copy, imagery and positioning choices are more often the limiting factor.

What does not change: the questions per phase. Goal, audience, structure, hierarchy, technology, accessibility, measurability and redirects stay equally important — only the moment you answer them has become more flexible. We therefore give a realistic lead time per project, based on scope, complexity and how quickly content becomes available.

Frequently asked questions about the web design process

What takes the most time with a new website?

Often content. Writing texts, taking photos and gathering information requires more coordination than designing or building. Whoever tackles content early shortens the total lead time the most.

Is it better to deliver everything at once or in phases?

For most organisations, phases work better: first a strong foundation live, then expand based on what you see in the data. This way you deliver value sooner and build further on real insights.

How do you prevent losing positions in search engines during a rebuild?

By mapping existing URLs, determining the new destination per URL and recording that in permanent redirects. Furthermore, keep existing content that performs well largely intact.