Website design: zo maak je het mooi

Design is niet alleen hoe je website eruitziet. Het is hoe je website werkt. Bezoekers vormen binnen een halve seconde een oordeel over je site, en dat oordeel is bijna volledig gebaseerd op het visuele ontwerp. Onderzoek van Stanford laat zien dat 94% van de eerste indrukken design-gerelateerd is.

Ik heb Start24 in 2025 volledig opnieuw ontworpen. Niet omdat het nodig was voor de zoekmachines, maar omdat ik bezoekers een betere ervaring wilde geven. Het verschil is enorm: schonere layout, betere typografie, consistentere kleuren. En het leuke is dat het helemaal niet moeilijk was.

In deze gids laat ik je de vijf bouwstenen zien van goed webdesign. Geen ontwerpervaring nodig, geen dure tools, en je kunt alles stap voor stap toepassen op je eigen site.

Typografie is de belangrijkste designkeuze die je maakt. Je website bestaat voor het overgrote deel uit tekst: koppen, paragrafen, links, knoppen. Als dat er goed uitziet, zit je al voor 90% goed.

De regels zijn simpel:

• Maximaal 2 lettertypes — een voor koppen en een voor de lopende tekst (of gewoon hetzelfde voor allebei)
• Minimaal 18px voor de lopende tekst — kleiner is op een scherm lastig lezen
• Regelhoogte tussen 1.6 en 1.8 — dat is de ruimte tussen regels. Te krap voelt benauwend, te ruim valt uit elkaar
• Regellengte rond de 70 tekens — te brede tekst is vermoeiend om te lezen

Google Fonts biedt honderden gratis lettertypes die je op elke website kunt gebruiken. Start24 gebruikt DM Sans, een schoon en modern lettertype dat prettig leest op beeldschermen.

Probeer het zelf. Kies hieronder een stijl, schuif aan de instellingen en bekijk wat het verschil maakt:

Kleuren geven je site persoonlijkheid. Maar te veel kleuren geven chaos. De simpelste aanpak die werkt is de 60-30-10 regel:

• 60% neutrale basis — wit of lichtgrijs voor de achtergrond en tekst
• 30% ondersteunende kleur — een zachte tint van je hoofdkleur voor secties, kaarten en achtergronden
• 10% accentkleur — je merkkleur, voor knoppen, links en belangrijke elementen

Heb je al een logo? Gebruik de hoofdkleur daaruit als je accentkleur. Heb je nog geen logo? Kies een kleur die bij je branche past. Blauw straalt vertrouwen uit, groen staat voor natuur en gezondheid, oranje voelt energiek en toegankelijk.

Veelgemaakte fouten

De twee grootste kleurfouten die ik zie bij nieuwe websites: te veel verschillende kleuren gebruiken (houd het bij 2-3 maximaal) en te weinig contrast tussen tekst en achtergrond. Donkergrijze tekst op een witte achtergrond werkt altijd. Lichtgrijze tekst op een grijze achtergrond is onleesbaar.

Kies hieronder een basiskleur en bekijk hoe het er in de praktijk uitziet:

Afbeeldingen zijn het eerste wat opvalt op een pagina. Een goede afbeelding trekt de aandacht en versterkt je boodschap. Een slechte afbeelding ondermijnt al het andere designwerk dat je hebt gedaan.

Waar vind je goede afbeeldingen?

• AI-generatie — tools zoals Midjourney, DALL-E en Flux maken in 2026 professionele illustraties en foto’s op maat. De hero-afbeeldingen op Start24 zijn zo gemaakt.
• Stockfoto’s — Unsplash en Pexels bieden gratis foto’s in hoge kwaliteit
• Screenshots — voor reviews, tutorials en handleidingen zijn eigen screenshots het meest authentiek

Technische tips

Gebruik het WebP-formaat voor je afbeeldingen. Dat is kleiner dan JPG en PNG bij dezelfde kwaliteit. En zet loading="lazy" op afbeeldingen die niet meteen zichtbaar zijn: dan laadt je pagina sneller.

Vermijd de cliché stockfoto’s. Je weet welke ik bedoel: lachende mensen die naar een laptop wijzen, handdrukken bij zonsondergang, teams die high-fiven rond een vergadertafel. Ze voegen niets toe en maken je site onpersoonlijk.

Het verschil tussen slordig en professioneel design zit hem vaak in de details. Sleep onderstaande slider om het met eigen ogen te zien:

Witruimte is de ruimte tussen en rondom elementen op je pagina. Beginners zien het vaak als “verspilde ruimte” en proberen alles zo dicht mogelijk op elkaar te zetten. Dat is precies het tegenovergestelde van wat je wilt.

Vergelijk het met een druk café waar alle tafeltjes op elkaar gepropt staan versus een restaurant waar elke tafel ruimte heeft. Allebei serveren ze eten. Maar de ervaring is compleet anders.

Praktische richtlijnen

• Beperk de breedte van je tekst — maximaal 780px is ideaal, breder wordt vermoeiend om te lezen
• Gebruik consistente marges — dezelfde afstand tussen alle secties, dezelfde padding in alle kaarten
• Geef koppen ruimte — meer ruimte boven een kop dan eronder. Dat maakt duidelijk dat de kop bij de tekst eronder hoort, niet bij de tekst erboven.
• Laat achtergronden ademen — geef secties voldoende verticale padding

Klik hieronder om het verschil te zien tussen een krappe en een ruime layout met exact dezelfde content:

Dezelfde content, hetzelfde lettertype. Het enige verschil is de ruimte eromheen. En toch voelt de ruime versie direct professioneler.

Je kunt de perfecte kleuren, het mooiste lettertype en prachtige afbeeldingen hebben. Als je ze niet consequent toepast, voelt je site rommelig. Consistentie is wat een verzameling losse pagina’s verandert in een samenhangend geheel.

Dit betekent: dezelfde kleuren op elke pagina. Dezelfde lettertypes, dezelfde knopstijl, dezelfde hoeveelheid witruimte rond vergelijkbare elementen. Als je koppen op de ene pagina 36px zijn, maak ze dan niet 28px op de volgende.

Maak een mini-stijlgids voor jezelf

Dat klinkt groots, maar het is niet meer dan een kort lijstje van de keuzes die je hebt gemaakt:

• Hoofdkleur: [je hex-code]
• Lettertype: [naam + grootte]
• Kopstijl: [gewicht + grootte + kleur]
• Knoppen: [kleur + border-radius + grootte]
• Linkstijl: [kleur + underline ja/nee]

Schrijf het op en houd je eraan. Elke keer dat je een nieuwe pagina maakt, check je het lijstje. Dat is het hele geheim.

Consistentie bouwt vertrouwen. Als een bezoeker merkt dat elke pagina dezelfde kwaliteit heeft, dezelfde stijl en hetzelfde gevoel, dan vertrouwen ze dat de inhoud ook betrouwbaar is. Het omgekeerde werkt net zo hard: een inconsistente site voelt onbetrouwbaar, zelfs als de informatie klopt.