Webdesign is het ontwerpen van een website: hoe de pagina’s eruitzien, hoe ze zijn ingedeeld en hoe een bezoeker de weg vindt naar wat hij zoekt. Het gaat om kleuren, lettertypes, witruimte, beeld, menu’s en knoppen, en om hoe dat alles werkt op een telefoon, een tablet en een groot scherm. Een webdesigner bepaalt zo wat een bezoeker als eerste ziet, leest en aanklikt.
Goed webdesign is daarbij niet alleen mooi. In onze ervaring zorgt het ervoor dat bezoekers u vertrouwen en contact met u opnemen.
Hieronder leest u aan welke acht principes u een website ontwerp toetst, met de bronnen erbij, welke zes fouten ons team het vaakst ziet en hoe we de website van een van onze klanten hebben ontworpen: Lectorus, een bedrijf uit Zierikzee dat vertragingsonderzoek doet voor arbitrage- en rechtszaken. Wij ontwerpen en bouwen zelf een website op maat; meer over ontwerp vindt u in ons kennisoverzicht over webdesign.
Wat is webdesign precies?
Webdesign, ook website design, website ontwerp of webontwerp genoemd, is het vak dat bepaalt hoe een website eruitziet en hoe hij werkt voor de bezoeker. Het omvat de opbouw van de pagina’s, het menu, de vormgeving en de route naar een aanvraag, op elk schermformaat. Het bouwen van dat ontwerp tot een werkende website heet webdevelopment.
Een webdesigner werkt aan twee lagen. De eerste is wat u ziet: de vormgeving, in het vak de UI (user interface, de gebruikersinterface). De tweede is hoe het voelt om de website te gebruiken: de UX (user experience, de gebruikerservaring). UX is breder dan het scherm. Het gaat om de hele ervaring van een bezoeker met uw bedrijf, ook of hij vindt wat hij zoekt.
In het vak verloopt een ontwerp meestal in deze stappen:
- De structuur. Welke pagina’s er komen en hoe het menu ze ordent. Welke pagina’s elk bedrijf nodig heeft, leest u in bedrijfswebsite laten maken: wat er echt op moet.
- Een wireframe. Een eenvoudige schets van de indeling van een pagina, zonder kleur of beeld.
- Het visuele ontwerp. Kleuren, lettertypes, beeld en knoppen, uitgewerkt voor een smal en een breed scherm.
- Testen. Werkt het ontwerp op elk scherm, en vindt een bezoeker snel wat hij zoekt?
Wat een webdesigner verder doet en wat u van een goede partij mag verwachten, leest u bij een webdesigner inhuren.
Daarna wordt de website gebouwd. Dat is webdevelopment: het ontwerp omzetten in een website die werkt, snel laadt en veilig is. Het verschil leest u in wat is webdevelopment.
Wanneer is een website ontwerp goed, en niet alleen mooi?
Een website ontwerp is goed als het iets oplevert. Een bezoeker begrijpt binnen een paar seconden wat u doet en voor wie, voelt dat hij bij een professioneel bedrijf is en ziet direct hoe hij contact opneemt. Mooi is een kwestie van smaak, goed is een kwestie van resultaat. Een website kan er strak uitzien en toch niets opleveren.
Een mooie website maakt indruk. Een goede website maakt indruk en leidt de bezoeker daarna naar de volgende stap.
Die eerste seconden wegen zwaar. Onderzoekers van Carleton University in Canada lieten in 2006 zien dat mensen binnen een twintigste seconde (50 milliseconden) beoordelen hoe aantrekkelijk ze een website vinden. Dat eerste oordeel kwam sterk overeen met hun oordeel na tien keer zo lang kijken.
Klopt het hele plaatje, dan heeft u een website die voor u werkt, in plaats van een website die er alleen is omdat u een website moet hebben. Hoe snelheid en structuur technisch op orde komen, leest u in onze checklist voor technische SEO.
De website als trechter: elk ontwerp begint bij het doel
Wij zien een website als een trechter, in het vak een funnel. Bovenin komen bezoekers binnen. Aan het einde staat het doel: de actie die de bezoeker moet ondernemen. Alles daartussen is bedoeld om zo veel mogelijk bezoekers naar dat punt te leiden.
Daarom vragen we bij de intake eerst welke actie dat is:
- een contactformulier invullen of een aanvraag doen;
- contact opnemen per telefoon, e-mail of WhatsApp;
- een brochure downloaden;
- alleen informatie opzoeken en lezen.
Vanuit die gewenste actie bouwen we het ontwerp op. Moet een bezoeker bellen, dan staat het telefoonnummer op de telefoon binnen handbereik.
Onze ontwerpen zijn gericht op conversie: het moment waarop een bezoeker die actie onderneemt. Wat werkt, weten we uit ervaring en uit de bezoekersstatistieken van websites: wanneer verlaten bezoekers een website, wanneer blijven ze en wanneer zijn ze te overtuigen. Hoe u dat meet en met testen verbetert, leest u bij conversie optimalisatie.
Waarom een goed ontwerp vertrouwen geeft
In webdesign zijn er geen vaste regels die u per se moet toepassen. U bent vrij in uw keuzes, zolang het geheel consequent is en echt aanvoelt.
In onze ervaring voelt een bezoeker direct of een website professioneel is. Hij ziet niet bewust dat witruimte, lettergroottes en regelafstanden overal gelijk zijn, maar hij voelt het wel, en dat geeft vertrouwen.
Volgens de wet van nabijheid, een van de gestaltwetten uit de waarnemingspsychologie, zien mensen onderdelen die dicht bij elkaar staan als één groep. Afstand vertelt de bezoeker dus wat bij elkaar hoort. Daarom leggen we witruimte, lettergroottes en regelafstanden centraal vast, zodat ze overal hetzelfde zijn. Ontwerpers noemen zo’n verzameling vaste afspraken een designsysteem.
Het hele plaatje moet bovendien kloppen: het ontwerp past bij de huisstijl, bij het bedrijf en bij de producten of diensten. Past het niet bij het merk, dan ontstaat in onze ervaring direct wantrouwen, en dan is een bezoeker heel moeilijk klant te maken.
Acht principes van een goed website ontwerp
Deze principes komen in elk sterk ontwerp terug. Gebruik ze als checklist voor uw huidige website.
1. Begin bij het doel van de pagina
Een dienstpagina overtuigt, een contactpagina neemt drempels weg, een artikel legt uit. Bepaal per pagina welke actie erbij hoort voordat er iets wordt vormgegeven. Op een dienstpagina staat de vraag om een offerte bijvoorbeeld direct na de uitleg, niet pas onderaan. Geef pagina’s in het menu de namen die uw klanten zelf gebruiken, zodat een bezoeker in één oogopslag ziet waar hij moet zijn.
2. Eén duidelijke actie per scherm, en de knop altijd dichtbij
Hoe meer keuzes iemand krijgt, hoe langer het kiezen duurt. Dat heet de wet van Hick, naar onderzoek van William Hick en Ray Hyman uit 1952. Geef daarom per scherm één opvallende knop, en zet die dichtbij op het moment dat iemand overtuigd is.
Volgens de wet van Fitts hangt de tijd om een knop te raken af van de grootte en de afstand: een groot en nabij doel is sneller te raken. Google raadt aan om knoppen op een touchscreen minstens 48 bij 48 dp te maken, met minstens 8 dp ruimte ertussen. Een dp is een maat die op elk scherm ongeveer even groot uitvalt; 48 dp is ongeveer 9 millimeter. De internationale richtlijnen voor toegankelijke websites, de WCAG 2.2, leggen de ondergrens op 24 bij 24 pixels, met een paar uitzonderingen, zoals een link midden in een zin.
3. Consistente witruimte en afstanden
Witruimte is de lege ruimte rond tekst, beeld en knoppen. Ze geeft rust en laat zien wat bij elkaar hoort. Werk met een vaste reeks afstanden, zoals een kleine binnen een blok en een grote tussen twee onderwerpen. Bij Lectorus, het praktijkvoorbeeld verderop, was veel witruimte een bewuste keuze, zodat niets opgepropt aanvoelt.
4. Vaste lettergroottes en regelafstanden
Kies een paar vaste lettergroottes, voor de hoofdtitel, de tussenkoppen en de lopende tekst, en niets daartussen. Zo ontstaat visuele hiërarchie: in één oogopslag is duidelijk wat belangrijk is.
Twee vuistregels voor leesbare tekst. Houd een regel op ongeveer 45 tot 75 tekens, een bekende richtlijn uit de typografie; de WCAG noemen op hun hoogste niveau (AAA) maximaal 80 tekens. En geef lopende tekst een regelafstand van ongeveer anderhalf keer de lettergrootte, wat de WCAG op hetzelfde niveau ook vragen.
5. Kleur en contrast die leesbaar zijn en bij het bedrijf passen
Een bekende vuistregel, overgenomen uit de interieurwereld, is 60-30-10: ongeveer zestig procent een rustige basiskleur, dertig procent een tweede kleur en tien procent een accent voor knoppen en details. Het is een hulpmiddel om kleur in balans te brengen, geen onderzochte norm. Bij Lectorus is het felgroen uit de huisstijl alleen als subtiel accent gebruikt.
Let ook op contrast, het verschil in helderheid tussen tekst en achtergrond. De WCAG 2.2 vragen voor gewone tekst een contrastverhouding van minstens 4,5 staat tot 1. Voor grote tekst, vanaf 18 punt of 14 punt vet, is dat 3 staat tot 1. Dat laatste geldt ook voor wat een knop, invulveld of pictogram herkenbaar maakt, zoals de rand van een invulveld. Gebruik kleur bovendien niet als enige manier om iets duidelijk te maken: een foutmelding die alleen rood is, mist wie slecht kleuren ziet.
Voor een deel van de bedrijven is toegankelijkheid sinds 28 juni 2025 ook een wettelijke plicht, volgens het Ondernemersplein van de overheid onder meer voor webshops van bedrijven met meer dan tien medewerkers of meer dan 2 miljoen euro jaaromzet. Geldt de wet niet voor u, dan helpt voldoende contrast nog steeds elke bezoeker.
6. Het ontwerp past bij de huisstijl
Kleuren, lettertypes, beeld en toon horen op uw website dezelfde te zijn als op uw visitekaartje. Een huisstijlgids, een document waarin die regels vastliggen, maakt dat eenvoudig. Zo werkten we bij Lectorus.
7. Het werkt op elk scherm: mobiel, tablet, laptop en groot scherm
Een responsive ontwerp past zich aan de schermbreedte aan: op een telefoon staan onderdelen onder elkaar en klapt het menu in. De breedtes waarop de opbouw verandert, heten breekpunten. Een goed ontwerp werkt ook tussen die breekpunten, bijvoorbeeld als iemand het venster op een laptop iets smaller maakt.
Google gebruikt bovendien de mobiele versie van een pagina om die op te nemen en te rangschikken. Dat heet mobile-first indexing, en Google raadt daarbij een responsive ontwerp aan.
8. Afbeeldingen die op elk scherm goed in beeld blijven
Een breed beeld wordt op een smal scherm vaak bijgesneden. Kies daarom per beeld een focuspunt, het deel dat altijd zichtbaar moet blijven, zoals een gezicht. Is dat niet genoeg, gebruik dan per schermformaat een eigen uitsnede; dat heet art direction.
Geef elke afbeelding ook vaste afmetingen of een vaste verhouding, zodat de pagina tijdens het laden niet verspringt. Google meet dat verspringen in de Core Web Vitals, de meetwaarden voor gebruikerservaring; een score van 0,1 of lager geldt als goed. Google gebruikt die meetwaarden bij het rangschikken, al weegt een relevante inhoud zwaarder. Geef elke afbeelding tot slot een korte beschrijving, de alt-tekst. Volgens Google is dat de belangrijkste extra informatie bij een afbeelding, en een schermlezer leest hem voor aan wie niet kan zien.
Wilt u een ontwerp dat volgens deze principes is opgebouwd? Op de pagina maatwerk website laten maken leest u hoe wij werken.
De zes fouten die we het vaakst zien
Bij bestaande websites die we opnieuw bouwen, komen we steeds dezelfde fouten tegen.
| Fout | Wat de bezoeker merkt | Wat beter werkt |
|---|---|---|
| Te weinig knoppen en oproepen tot actie | Hij moet zoeken hoe hij contact opneemt | Een knop na elk overtuigend onderdeel |
| Ongelijke witruimte en afstanden | De pagina voelt rommelig | Een vaste reeks afstanden |
| Alleen ontworpen voor een groot scherm | Op een laptop, tablet of telefoon vallen afbeeldingen half weg | Ontwerpen voor elk scherm |
| Grote beelden bovenaan die worden afgesneden | Hoofden van mensen vallen buiten beeld | Een focuspunt per beeld |
| Kleuren die niet consequent worden gebruikt | Niets valt meer op | Een vaste rol per kleur |
| Slecht contrast | Tekst is slecht leesbaar, of kleuren zijn te hard en passen niet bij het bedrijf | Voldoende contrast, met kleuren uit de huisstijl |
De eerste fout zien we het vaakst. Een bezoeker die overtuigd is, wil op dat moment contact opnemen. Maak het dan doodeenvoudig: een knop direct na de uitleg, en een telefoonnummer en WhatsApp die met één tik werken.
Eerst de huisstijl, dan de website
Kies als ondernemer bij voorkeur eerst een huisstijl, ook wel branding genoemd, en laat van daaruit de website bouwen. In een huisstijlgids liggen de kleuren, lettertypes en afstanden al vast, zodat het ontwerp de merkbeleving direct in de website doorvoert. Uw website, visitekaartje en offerte vertellen dan hetzelfde verhaal, en dat maakt het geheel in onze ervaring heel sterk.
We raden deze volgorde vooral start-ups aan: wie net begint, heeft nog geen bestaande uitstraling om rekening mee te houden.
Heeft u nog geen huisstijl? Wij werken samen met een grafisch bureau dat de branding verzorgt, en sluiten daar met ons webdesign op aan. De grafisch ontwerper kijkt mee bij de website, zodat dezelfde identiteit direct in de website zit. Wat u verder vooraf regelt, leest u in nieuwe website nodig? Zo bereidt u zich voor.
Voorbeeld uit de praktijk: Lectorus
Voor Lectorus uit Zierikzee, dat vertragingsonderzoek doet voor arbitrage- en rechtszaken, ontwierpen en bouwden we een website op maat. De klant had vooraf een uitgewerkte huisstijlgids, en de website is daar direct vanuit opgebouwd, met een strakke, rustige en moderne uitstraling. Dit zijn de keuzes en waarom.
Witruimte. Teksten, beelden en andere onderdelen krijgen voldoende ruimte; niets mocht opgepropt aanvoelen. De website moest de rust uitstralen waar het bedrijf voor staat.
Achtergronden. Vooral wit en gebroken wit. De huisstijlkleuren komen terug in vlakken en specifieke secties, maar met mate. Zo blijft de basis licht en krijgt een gekleurd vlak betekenis waar het verschijnt.
Het groene accent. Het felgroen is minimaal gebruikt, alleen voor kleine details, lijnen, pijlen en onderdelen waarop u kunt klikken. Een accent dat weinig voorkomt, valt op waar het staat.
Fotografie. Vooral abstracte, moderne architectuur, met sterke lijnen, vormen en bijzondere perspectieven. De beelden zijn groot ingezet en dienen als rustmoment binnen de pagina.
Animaties. Rustige overgangen, onderdelen die subtiel in beeld verschijnen en kleine bewegingen als u met de muis over iets beweegt of scrolt. Ze versterken de moderne uitstraling, zonder af te leiden of de rust van het ontwerp te verstoren.
Minder onderdelen. We hebben bewust gekozen voor minder onderdelen die goed tot hun recht komen, in plaats van veel verschillende grafische toevoegingen. Daardoor is de website overzichtelijk en ruimtelijk, en voelt hij verfijnd aan.
Wat u hiervan meeneemt voor uw eigen website:
- Bepaal wat uw bedrijf moet uitstralen, en laat elke ontwerpkeuze daaraan bijdragen.
- Geef inhoud de ruimte: witruimte is geen verspilde ruimte.
- Gebruik uw opvallendste kleur spaarzaam, zodat ze iets betekent.
- Kies liever een paar goed uitgewerkte onderdelen dan veel losse elementen.
Wat is modern webdesign?
Lectorus laat zien wat modern webdesign in onze ogen is: rustig en ruimtelijk, met veel witruimte, grote beelden, duidelijke typografie en weinig onderdelen per scherm. Beweging wordt subtiel ingezet. Modern betekent niet elke nieuwe trend volgen. Een ontwerp blijft langer goed als het past bij uw merk en uw bezoekers, en niet alleen bij wat dit jaar populair is.
Zelf bouwen of een website laten ontwerpen?
Iedereen kan zelf een website in elkaar zetten, bijvoorbeeld met WordPress en een page builder zoals Elementor, een programma waarmee u blokken op een pagina sleept. Voor een eenvoudige website kan dat volstaan. Houd er wel rekening mee dat zo’n website daarna WordPress onderhoud nodig heeft: updates van het systeem, het thema en de plugins.
Zoekt u een gratis websitebouwer? Bij een bouwpakket zoals Wix kunt u gratis een website maken, maar dan op een adres van de aanbieder en met reclame van de aanbieder in beeld. Voor uw eigen domeinnaam zonder reclame heeft u een betaald pakket nodig.
Ook AI kan een eerste versie maken. ChatGPT kan bijvoorbeeld de code voor een eenvoudige pagina schrijven en die in een voorbeeld tonen. Online zetten, beveiligen en onderhouden doet u dan nog zelf, en Google vraagt om door AI geschreven tekst vóór publicatie te controleren.
Een bouwpakket of AI geeft u de blokken, maar niet de keuzes: welke actie bij een pagina hoort, welke afstanden u aanhoudt en waar de knop staat. In onze ervaring is zelf bouwen daarom vaak zonde. De investering in professioneel webdesign valt mee, en ze levert in onze ervaring veel op: een professioneel opgebouwde website maakt meer bezoekers tot klant.
Wanneer zelf bouwen wél goed past, wat AI nu wel en niet kan en wat het over drie jaar kost, leest u in zelf een website maken of laten maken. Wat een webdesigner kost, ook per uur, en welke vragen u vooraf stelt, leest u bij webdesigner inhuren: kosten en 8 vragen; wat een complete website kost, per type en per jaar, in wat kost een website laten maken. Twijfelt u tussen WordPress en bouwen op maat, lees dan maatwerk website of WordPress. Wie het ontwerp voor u maakt, een webbureau of een freelancer, en hoe u kiest, staat in webbureau, internetbureau of freelancer.
Zo verloopt het ontwerpproces bij ons
Het ontwerp begint bij ons al bij de intake.
- Het doel. Welke actie moet een bezoeker ondernemen, en voor wie is de website? Daar werken we het ontwerp naartoe.
- De stijl. Zakelijk en professioneel, minimalistisch, of juist creatief en vrolijk: dat leggen we vooraf vast.
- Uw persoonlijke voorkeuren. We vragen welke onderdelen u mooi vindt op andere websites, zoals een menu, het eerste scherm van een pagina of bepaalde animaties.
- De huisstijl. Is er vooraf een huisstijl gemaakt, dan bouwen we de website direct vanuit die huisstijl.
- Elk scherm. We werken het ontwerp uit voor telefoon, tablet, laptop en groot scherm, met vaste afstanden, lettergroottes en kleuren.
Zo ontstaat een geheel dat past bij de identiteit van uw bedrijf en bij uw wensen. Een website van vijf pagina’s staat bij ons binnen 2 weken na aanlevering van teksten en beelden online.
Wilt u weten wat een goed ontwerp voor uw bedrijf kan doen? Op de pagina maatwerk website laten maken leest u hoe wij werken, of neem contact met ons op om uw plannen te bespreken.
Bronnen
Alle bronnen zijn bekeken op 9 oktober 2026.
- Lindgaard, G., Fernandes, G., Dudek, C. en Brown, J. (2006): Attention web designers: You have 50 milliseconds to make a good first impression!, Behaviour & Information Technology 25(2), 115–126 (oordeel over de aantrekkelijkheid binnen 50 ms, sterk gelijk aan het oordeel na 500 ms)
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2 (aanbeveling van 12 december 2024; contrast 4,5:1 en 3:1 met de grens voor grote tekst, contrast van knoppen en velden 3:1, kleur niet als enige middel, regels van maximaal 80 tekens en regelafstand van anderhalf op niveau AAA)
- W3C: Understanding Target Size (Minimum) (aanraakdoelen van minstens 24 bij 24 pixels, niveau AA)
- Google Toegankelijkheid Help: Grootte van tikdoelen (minstens 48 bij 48 dp, ongeveer 9 millimeter, 8 dp ertussen)
- web.dev: Accessible tap targets (rond 48 pixels, bijgewerkt 31 maart 2020)
- Google Search Central: Mobile-first indexering (mobiele versie voor opnemen en rangschikken, responsive aanbevolen; bijgewerkt 10 december 2025)
- Google Search Central: Pagina-ervaring in de zoekresultaten (Core Web Vitals in de rangschikking, relevantie weegt zwaarder; bijgewerkt 22 september 2026)
- Google Search Central: Best practices voor afbeeldingen (alt-tekst als belangrijkste extra informatie, geen opsomming van zoekwoorden; bijgewerkt 2 maart 2026)
- Google Search Central: Generatieve AI-content (AI-tekst vóór publicatie controleren; bijgewerkt 1 oktober 2026)
- web.dev: Optimize Cumulative Layout Shift (afmetingen bij afbeeldingen, 0,1 of lager is goed; bijgewerkt 7 februari 2025)
- MDN Web Docs: Responsive design (responsive ontwerp en breekpunten)
- MDN Web Docs: Responsive images (art direction: een andere uitsnede per schermformaat)
- Nielsen Norman Group: The Definition of User Experience (UX) (UX is breder dan de interface)
- Nielsen Norman Group: Proximity Principle in Visual Design (wet van nabijheid, 2 augustus 2020)
- Nielsen Norman Group: Fitts’s Law and Its Applications in UX (grootte en afstand van een doel, 31 juli 2022)
- Laws of UX: Hick’s Law (meer keuzes, langere beslistijd; Hick en Hyman, 1952)
- Robert Bringhurst, The Elements of Typographic Style (regellengte van 45 tot 75 tekens als gangbare richtlijn; boek, geen link)
- Ondernemersplein (overheid): Regels voor digitale toegankelijkheid (voor wie de regels gelden)
- Digitale Overheid: Nieuwe Europese toegankelijkheidswet (van kracht sinds 28 juni 2025)
- OpenAI Help: What is the canvas feature in ChatGPT (code schrijven en als voorbeeld tonen)
- Wix Help: Building a website for free (gratis website op een adres van Wix met reclame; eigen domein vraagt een betaald pakket)
Ik heb de afgelopen twintig jaar regelmatig websites laten bouwen, maar door samen te werken met Zeeuwsweb heb ik pas echt ontdekt hoeveel verschil er zit tussen bedrijven die dit aanbieden.
IB-BEWUST
Vogelwaarde · Google-review
