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 (week 1)

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 (week 1–2)

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 (week 2–4)

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 (week 4–7)

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 (week 6–10)

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 (week 9–11)

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 (from week 11)

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.

Realistic lead time

For a corporate website of ten to twenty pages, eight to twelve weeks is common, provided content is available on time. Large platforms or web shops with a lot of product data take longer. In practice, content is almost always the critical factor: texts, photos and video determine the pace more than the design.

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.