Het webdesignproces stap voor stap

Een website ontstaat niet in één keer goed. Sterk webdesign is het resultaat van een proces waarin strategie, structuur, ontwerp en techniek elkaar in de juiste volgorde opvolgen. Hieronder staat dat proces stap voor stap, inclusief de vragen die per fase beantwoord moeten worden en een realistische doorlooptijd.

Fase 1: strategie en doelen (week 1)

Voordat er iets getekend wordt, hoort duidelijk te zijn wat de website moet doen. Een website die vooral mooi is, kost geld. Een website die iets oplevert, begint bij een doel.

In deze fase leg je vast:

• wat de website moet opleveren (aanvragen, verkopen, sollicitaties, herkenning)
• voor welke doelgroepen de site bedoeld is en wat hun vraag is
• welke actie per doelgroep het belangrijkste is
• hoe succes gemeten wordt

Een handige toets: als je van elke pagina kunt benoemen welke ene actie de bezoeker daar zou moeten doen, staat de basis. Kun je dat niet, dan is de pagina nog niet klaar om ontworpen te worden.

Waar mensen nu zoeken

Bezoekers komen niet meer alleen via het zoekvak van een zoekmachine. Ze komen via AI-antwoorden, via sociale kanalen, via een link in een mail en via een QR-code. Dat betekent dat elke pagina zelfstandig moet werken: iemand kan overal binnenkomen. Dit is een van de redenen dat aparte, goed opgebouwde pagina's beter werken dan één lange pagina met ankerlinks.

Fase 2: structuur en sitemap (week 1–2)

Structuur bepaalt of bezoekers vinden wat ze zoeken. Hier maak je een sitemap: welke pagina's bestaan er, hoe hangen ze samen en wat komt in het menu.

Vuistregels die in de praktijk goed werken:

• elke belangrijke pagina is binnen drie klikken bereikbaar
• één onderwerp per pagina, zodat de pagina een duidelijk doel houdt
• verwante pagina's linken naar elkaar, met beschrijvende linkteksten
• navigatielabels gebruiken de woorden van de bezoeker, niet interne termen

Voor grotere sites helpt het om thema's te clusteren: een overzichtspagina over een onderwerp met daaronder diepgaande pagina's. Dat is prettig voor bezoekers en het maakt voor zoekmachines duidelijk waar je autoriteit ligt.

Fase 3: wireframes en content (week 2–4)

Wireframes zijn schetsen zonder kleur en beeld. Ze gaan alleen over volgorde en hiërarchie: wat staat boven, wat volgt, waar staat de actie.

Werk in deze fase met echte content in plaats van vulteksten. Zodra er echte koppen en teksten in staan, wordt zichtbaar of de opbouw klopt. Een blok dat prachtig lijkt met drie woorden, valt vaak om zodra de echte tekst erin staat.

De opbouw van een pagina die in de meeste gevallen werkt:

1. wat het is en voor wie (helder, in één of twee regels)
2. waarom het relevant is voor de bezoeker
3. hoe het werkt of wat je krijgt
4. bewijs: cijfers, cases, reviews
5. de vervolgstap, zonder drempels

Fase 4: visueel ontwerp en design system (week 4–7)

Nu komt de vormgeving. Niet als laagje eroverheen, maar als versterking van de structuur die er al ligt.

Belangrijk in deze fase:

• een typografische schaal: vaste maten voor koppen, tekst en labels
• een kleurenset met voldoende contrast, inclusief statuskleuren
• een spacing-systeem, zodat witruimte consistent is
• componenten in plaats van losse pagina's: knoppen, kaarten, formulieren, tabellen

Zo'n design system voorkomt dat een site na een jaar uit elkaar valt. Nieuwe pagina's zijn dan een kwestie van bestaande onderdelen combineren, niet van opnieuw ontwerpen.

Motion met een functie

Animatie is nuttig als het iets uitlegt: dat er iets is geopend, dat er iets is toegevoegd, dat je verder kunt scrollen. Animatie zonder functie vertraagt vooral. Houd overgangen kort (150–300 ms) en respecteer de systeeminstelling voor minder beweging.

Fase 5: build en techniek (week 6–10)

In de bouwfase wordt het ontwerp werkend gemaakt. Wat hier gebeurt, bepaalt grotendeels de snelheid en de vindbaarheid.

Aandachtspunten:

• semantische HTML: koppen in de juiste orde, één H1 per pagina
• afbeeldingen in moderne formaten, met vaste afmetingen en lazy loading
• gemeten Core Web Vitals in plaats van een gevoel over snelheid
• beheerbaarheid: content die de klant zelf kan aanpassen zonder het ontwerp te breken
• meta-informatie, structured data en een sitemap

Ook de platformkeuze hoort hier. WordPress, Webflow, Shopify en headless oplossingen hebben elk hun sterke kanten; de keuze hangt af van wie de site gaat beheren, hoeveel content er komt en welke koppelingen nodig zijn.

Fase 6: testen (week 9–11)

Testen is meer dan controleren of links werken. Loop minimaal langs:

• de belangrijkste flows op mobiel, tablet en desktop
• toetsenbordgebruik en zichtbare focus
• contrast en leesbaarheid
• formulieren: foutmeldingen, bevestiging, verwerking
• snelheid op een gemiddelde mobiele verbinding
• redirects van oude URL's naar nieuwe, zodat je opgebouwde posities niet verliest

Die laatste is bij een herbouw de meest onderschatte stap. Een goede redirectmap voorkomt dat een nieuwe, mooiere site tijdelijk minder oplevert dan de oude.

Fase 7: live en doorontwikkelen (vanaf week 11)

Livegang is het startpunt, niet het einde. Vanaf dat moment ga je meten wat bezoekers doen en verbeter je stap voor stap.

Een ritme dat werkt:

• maandelijks: kijken naar de belangrijkste paden en drop-offpunten
• per kwartaal: één of twee gerichte verbeteringen doorvoeren en het effect meten
• jaarlijks: structuur en content tegen het licht houden

Verbeter één ding per keer. Verander je alles tegelijk, dan weet je niet wat werkte.

Realistische doorloop

Voor een zakelijke website van tien tot twintig pagina's is acht tot twaalf weken gebruikelijk, mits content op tijd beschikbaar is. Grote platformen of webshops met veel productdata lopen verder uit. In de praktijk is content bijna altijd de kritieke factor: teksten, foto's en video bepalen het tempo meer dan het ontwerp.

Veelgestelde vragen over het webdesignproces

Wat kost het meeste tijd bij een nieuwe website?

Vaak content. Teksten schrijven, foto's maken en informatie verzamelen vraagt meer afstemming dan ontwerpen of bouwen. Wie content vroeg oppakt, verkort de totale doorlooptijd het meest.

Kun je beter in één keer alles opleveren of in fasen?

Voor de meeste organisaties werkt fasen beter: eerst een sterke basis live, daarna uitbreiden op basis van wat je in de data ziet. Zo lever je eerder waarde en bouw je verder op echte inzichten.

Hoe voorkom je dat je posities in zoekmachines verliest bij een herbouw?

Door de bestaande URL's in kaart te brengen, per URL te bepalen wat de nieuwe bestemming is en dat vast te leggen in permanente redirects. Houd daarnaast de bestaande content die goed presteert grotendeels intact.