Op telefoons en laptops is dark mode allang geen niche meer: een flink deel van de gebruikers heeft het besturingssysteem permanent op donker staan, en apps schakelen automatisch mee. Websites blijven daarbij achter — de meeste zijn simpelweg alleen licht. Moet jouw website ook een donkere modus krijgen? Soms wel, vaak niet. Dit is een eerlijke afweging, plus de ontwerpregels voor wie ervoor kiest.

Wat is dark mode op een website?

Dark mode is een tweede kleurenschema van je website met donkere achtergronden en lichte tekst. De browser weet via de systeeminstelling of een bezoeker donker prefereert (technisch: de prefers-color-scheme-instelling die je in CSS kunt uitlezen), zodat de site automatisch in de juiste modus opent. Vaak krijgt de bezoeker daarnaast een schakelaar om zelf te wisselen.

De voordelen — en de eerlijke nuance

Donkere weergave is rustiger voor de ogen in donkere omgevingen, spaart batterij op OLED-schermen en sluit aan bij wat een groeiende groep gebruikers gewend is: wie ’s avonds van een donkere app naar jouw spierwitte website springt, krijgt letterlijk een flits in het gezicht. De nuance: voor de gemiddelde bedrijfswebsite waar bezoekers overdag vijf minuten rondkijken, is dark mode geen conversieverhoger. Het is comfort en uitstraling, geen omzetknop. De doorslag hangt af van je publiek en gebruiksmoment: developer-tools, dashboards, portalen waar mensen lang in werken en media die ’s avonds geconsumeerd wordt profiteren duidelijk; een brochuresite voor een installatiebedrijf niet.

Ontwerpen voor donker is meer dan kleuren omdraaien

• Geen puur zwart en puur wit: wit op gitzwart geeft schittering. Gebruik donkergrijs (bijvoorbeeld antraciet) met gebroken wit voor tekst.
• Demp verzadigde kleuren: je felle merkkleur die op wit prachtig oogt, kan op donker gaan “gloeien”. Maak accentkleuren iets lichter en minder verzadigd.
• Controleer contrast opnieuw: de toegankelijkheidseisen (WCAG) gelden voor beide modi. Test elke tekst-op-achtergrond-combinatie apart.
• Denk aan beeld en logo’s: een donker logo verdwijnt op een donkere achtergrond; transparante PNG’s met donkere randen worden lelijk. Vaak zijn aparte beeldvarianten nodig.
• Diepte werkt anders: schaduwen vallen weg op donker; hiërarchie maak je er met tinten (lichter = dichterbij) in plaats van slagschaduw.

Wat betekent het voor bouw en onderhoud?

Technisch is dark mode goed te doen: als de site met CSS-variabelen voor kleuren is opgezet, is het tweede schema een kwestie van een tweede set variabelen plus een schakelaar die de keuze onthoudt. De echte kosten zitten in ontwerp en onderhoud: élk nieuw blok, elke banner en elke afbeelding moet voortaan in twee modi kloppen, en getest worden in twee modi. Reken dus niet alleen de bouw, maar ook het blijvende dubbele testwerk mee in je beslissing. Wie het halfslachtig doet — dark mode die op drie pagina’s klopt en op de rest kapot oogt — was beter af geweest zonder.

Overweeg je een nieuwe website en wil je vooraf de juiste designkeuzes maken, van kleurgebruik tot toegankelijkheid? Bekijk onze dienst webdesign — wij denken mee over wat jouw bezoekers echt nodig hebben.

Conclusie

Dark mode is zinvol als je bezoekers lang of ’s avonds met je site werken, en gewoon overbodig voor menige bedrijfssite. Kies je ervoor, doe het dan volledig: gedempte kleuren in plaats van omgedraaide, opnieuw getest contrast, passende beeldvarianten en structureel dubbel testwerk. Een goede dark mode voelt als een cadeautje voor je gebruikers — een slechte als een kapotte website.

“Kunnen we niet gewoon meteen een ontwerp zien?” Het is een begrijpelijke vraag van opdrachtgevers — je wilt weten hoe je nieuwe website eruit gaat zien. Toch beginnen goede webdesigners bewust níet met kleuren en beeld, maar met schetsmatige schema’s: wireframes. Die tussenstap voelt als vertraging, maar is precies andersom: het is de goedkoopste plek om fouten te vinden. Een structuurfout kost in de wireframe-fase vijf minuten gummen; in de bouwfase een week programmeren.

Wat is een wireframe?

Een wireframe is een schematische weergave van een pagina: grijze blokken, lijnen en plaatshouder-tekst die tonen wát er op de pagina staat, in welke volgorde en hoe belangrijk elk element is. Geen kleuren, geen foto’s, geen lettertypen — juist om het gesprek over de goede dingen te laten gaan. Waar staat de knop voor een offerte-aanvraag? Wat ziet een bezoeker als eerste? Hoe kom je van de homepage naar de dienstenpagina? Dat zijn de vragen die bepalen of een website werkt, en die verdrinken zodra er ook over de kleur van de header wordt gediscussieerd.

Van wireframe naar prototype

Een prototype is de volgende stap: een klikbare versie van de wireframes of het uiteindelijke design, gemaakt in een tool als Figma. Je klikt van pagina naar pagina alsof de site al bestaat — menu’s klappen uit, formulierstappen volgen elkaar op. Daarmee test je het belangrijkste wat een statisch plaatje niet kan tonen: de route. Vindt een bezoeker in drie klikken wat hij zoekt? Klopt de volgorde van het bestelproces? Een prototype van een dag werk vangt problemen af die anders pas na livegang uit de statistieken blijken.

Wat het jou als opdrachtgever oplevert

• Goedkope wijzigingen: structuur aanpassen kost in deze fase minuten in plaats van bouwdagen. Het gros van de “o wacht, eigenlijk willen we…”-momenten hoort hier thuis.
• Betere gesprekken: over een grijs schema praat je inhoudelijk (“moet de prijstabel niet hoger?”); over een uitgewerkt design praat iedereen over smaak.
• Content op tijd: wireframes maken pijnlijk zichtbaar welke teksten en foto’s er nodig zijn — het beruchte “de content komt nog wel”-gat zie je maanden eerder aankomen.
• Draagvlak intern: een klikbaar prototype laat collega’s en directie ervaren wat er komt, in plaats van het uit een offerte te moeten lezen.

Hoe dit in een webdesigntraject past

In een gezond traject volgen de stappen elkaar logisch op: eerst doelen en doelgroepen, dan de sitemap (welke pagina’s), dan wireframes van de belangrijkste pagina’s, dan het visuele ontwerp, en pas daarna de bouw. Elke stap wordt afgestemd voordat de volgende begint. Dat betekent niet dat alles in beton gegoten is — maar wél dat een wijziging bewust gebeurt, op het moment dat hij nog goedkoop is. Feedback geven op wireframes doe je door de vraag centraal te stellen: “kan de bezoeker hier doen waarvoor hij kwam?” — niet “vind ik dit mooi?”. Mooi komt in de stap erna.

Benieuwd hoe zo’n traject er voor jouw website uitziet, van eerste schets tot klikbaar prototype en livegang? Bekijk onze dienst webdesign.

Conclusie

Wireframes en prototypes zijn geen omweg maar een verzekering: ze verplaatsen de dure discussies naar de fase waarin aanpassen nog bijna niets kost. Eerst de structuur in grijze blokken, dan de route klikbaar testen, en pas daarna het visuele ontwerp. De websites die na livegang “gewoon meteen goed” aanvoelen, zijn vrijwel altijd de websites die op papier begonnen.

Het menu is het eerste waar een bezoeker naar grijpt die iets zoekt op je website. Werkt dat menu niet — te veel keuzes, vage labels, verstopte pagina’s — dan is de achterknop sneller gevonden dan jouw dienstenpagina. In dit artikel lees je hoe je een navigatiemenu opbouwt dat bezoekers moeiteloos de weg wijst en dat ook nog eens goed is voor je vindbaarheid.

Minder keuzes, betere keuzes

De grootste menufout is volledigheid: elke pagina die de organisatie belangrijk vindt, krijgt een plek in het hoofdmenu. Het resultaat is een keuzemuur waar niemand meer iets in vindt. Houd het hoofdmenu bij voorkeur op vijf tot zeven items — dat is wat een bezoeker in één blik kan overzien. Alles wat daar niet in past, hoort in de footer, in een submenu of gewoon als link vanuit een relevante pagina.

Vraag je bij elk menu-item af: zoekt een nieuwe bezoeker hier actief naar? “Diensten”, “Cases” en “Contact” wel. Die interne nieuwspagina uit 2021 niet.

Gebruik labels die bezoekers snappen

Menuteksten zijn geen plek voor creativiteit. “Wat wij doen” klinkt sympathiek, maar “Diensten” wordt herkend. Interne jargontermen (“Solutions”, “Expertises”, productnamen die alleen jij kent) dwingen bezoekers tot gokken. De vuistregel: gebruik de woorden die je klant zelf zou intypen in Google. Dat maakt je menu niet alleen duidelijker — die herkenbare termen helpen ook je SEO, want menulinks staan op elke pagina en vertellen Google waar je site over gaat.

Dropdowns: handig, met mate

Een submenu is een prima manier om structuur aan te brengen, bijvoorbeeld onder “Diensten”. Maar beperk het tot één niveau diep: mega-menu’s met drie lagen werken op desktop al matig en zijn op mobiel een ramp. Zorg ook dat de hoofdcategorie zelf klikbaar is naar een overzichtspagina — veel bezoekers klikken op “Diensten” zonder een subitem te kiezen.

Mobiel is het uitgangspunt, niet de bijzaak

Op de meeste websites komt inmiddels het merendeel van de bezoekers via een telefoon binnen. Het hamburgermenu is daar de standaard, maar test het ook echt: zijn de tikdoelen groot genoeg, klapt het submenu logisch uit, is “Contact” of “Offerte aanvragen” direct bereikbaar? Een veelgemaakte fout is een telefoonnummer of call-to-action die op desktop prominent in de menubalk staat, maar op mobiel wegvalt — precies op het apparaat waar bellen één tik kost.

Vergeet de footer niet

De footer is het vangnet van je navigatie. Bezoekers die onderaan een pagina belanden, zijn vaak juist de serieuze lezers — geef ze daar de volledige plattegrond: alle diensten, contactgegevens, veelgestelde vragen en praktische pagina’s zoals de privacyverklaring. Voor zoekmachines is de footer bovendien een nette plek om alle belangrijke pagina’s vanaf elke pagina bereikbaar te maken.

Twijfel je of jouw menustructuur bezoekers helpt of juist in de weg zit? Wij denken bij elk ontwerp eerst na over structuur en pas daarna over kleur. Lees meer over onze aanpak op de pagina webdesign.

Conclusie

Een goed navigatiemenu is compact (vijf tot zeven items), gebruikt de woorden van je klant, houdt submenu’s ondiep en werkt op mobiel minstens zo goed als op desktop — met de footer als volledig vangnet eronder. Het is onopvallend vakwerk: niemand geeft een compliment over een goed menu, maar iedereen haakt af bij een slecht menu.

Een knop die zachtjes oplicht als je eroverheen beweegt. Een vinkje dat verschijnt zodra je formulier is verzonden. Een menu dat soepel uitklapt in plaats van abrupt verspringt. Dit soort kleine animaties heten micro-interacties, en ze zijn het verschil tussen een website die “af” voelt en een website die stug aanvoelt. In dit artikel lees je waar beweging waarde toevoegt — en waar het juist irriteert.

Wat zijn micro-interacties?

Micro-interacties zijn kleine visuele reacties op wat de bezoeker doet: hoveren, klikken, scrollen, typen. Ze hebben één taak — feedback geven. De bezoeker ziet direct: dit is klikbaar, je klik is aangekomen, er gebeurt iets, het is gelukt. Zonder die signalen voelt een website levenloos en blijft de bezoeker twijfelen (“heb ik nou geklikt of niet?”), wat op formulieren en bestelknoppen zelfs dubbele verzendingen oplevert.

Waar beweging écht helpt

• Knoppen en links: een subtiel hover-effect (kleurverloop, lichte schaduw) maakt in één oogopslag duidelijk wat klikbaar is.
• Formulieren: een veld dat groen kleurt bij correcte invoer, een duidelijke laadanimatie na verzenden en een bevestiging die in beeld verschijnt voorkomen twijfel en frustratie.
• Menu’s en accordeons: een korte uitklapbeweging helpt bezoekers begrijpen wáár de nieuwe content vandaan komt, in plaats van dat de pagina abrupt verspringt.
• Toevoegen aan winkelwagen: een klein animatie-effect richting het winkelmandje bevestigt de actie zonder de bezoeker uit de pagina te trekken.

Waar animatie juist afleidt

De grens tussen professioneel en kermis is dun. Elementen die één voor één aan komen vliegen bij het scrollen, teksten die pas na een seconde vertraging verschijnen, parallax-effecten op elke sectie: het oogde in 2015 modern, maar het vertraagt de bezoeker die gewoon informatie zoekt. De vuistregel: animatie moet een handeling ondersteunen, nooit zelf de show stelen. Duurt een animatie langer dan zo’n 300 milliseconden, dan staat de bezoeker te wachten op je vormgeving — en wachten is precies wat je niet wilt.

Denk aan snelheid en toegankelijkheid

Twee technische kanttekeningen. Ten eerste prestaties: zware animatiebibliotheken en video-achtergronden drukken op de laadtijd en dus op je Core Web Vitals. Goede micro-interacties kunnen vrijwel altijd met lichtgewicht CSS. Ten tweede toegankelijkheid: een deel van de bezoekers wordt letterlijk onwel van veel beweging en heeft in het besturingssysteem “verminderde beweging” ingesteld. Een nette website respecteert die voorkeur (via de instelling prefers-reduced-motion) en zet grote animaties dan uit — sinds de Europese toegankelijkheidsregels is dat voor veel bedrijven ook formeel het uitgangspunt.

Wil je een website die tot in de details af voelt, zonder in te leveren op snelheid? Bekijk hoe wij ontwerp en techniek combineren op de pagina webdesign.

Conclusie

Micro-interacties zijn de beleefdheid van een website: ze bevestigen elke handeling van de bezoeker met een klein, snel signaal. Zet beweging in waar het een actie ondersteunt — knoppen, formulieren, menu’s — en laat decoratieve animatie achterwege. Subtiel, snel en met respect voor de bezoeker die liever geen beweging ziet: zo maakt animatie je site professioneler in plaats van drukker.