De gangbare formule voor een websiteontwerp is een witte achtergrond, zwarte of donkergrijze tekst en rijkelijk gestrooide merkkleuren. De overgrote meerderheid van de best presterende websites gebruikt deze formule met groot succes. Maar is dit de enige formule die succesvol kan zijn? In dit artikel gaan we dieper in op het creëren van een ontwerp met een donkere achtergrond - en waarom het soms beter is om dit concept te gebruiken, omdat websites met een donkere achtergrond soms... overtreffen wit.
Start een WordPress-thema, SquareSpace, Webflow, Weebly of een van de vele andere webdesigntools en er wordt automatisch een pagina geladen met een witte achtergrond en zwarte tekst. Je kunt dit natuurlijk aanpassen, maar deze combinatie wordt als standaard beschouwd.
Het hoeft niet zo te zijn.
Als het goed wordt gedaan, kan een donkere achtergrond voor een website beter werken dan je zou denken.
De eerste zorg bij elk webdesign is wat de gebruiker wil. Welke kleuren passen bij het medium, het merk, het beoogde gebruik, de doelgroep en wat werkt op de apparaten die gebruikt worden om de site te bezoeken?
De meeste klanten gaan ervan uit dat het een witte achtergrond is met zwarte of donkere schreefloze lettertypen. Die aanname is misschien niet zo zwart-wit (woordspeling bedoeld).
Waarom wit?
Er zijn twee belangrijke redenen waarom de combinatie zwart op wit als de norm wordt beschouwd.
Maar dit heeft eigenlijk zijn wortels in de geschiedenis: Druk en leesbaarheid.
Vroeger, toen we alles op papier deden, betekende de gebroken witte kleur van papier dat het makkelijker was om zwart als inkt te gebruiken dan om het papier te kleuren. Je had minder verf nodig en het was een veel schoner en gemakkelijker werk. Die eerste gedrukte pamfletten waren met zwarte inkt op licht papier en dat bleef zo voor drukwerk.
De andere reden is leesbaarheid. Voor veel gebruikers, vooral op mobiele apparaten, is wit op donker niet altijd even leesbaar. Mensen met een visuele beperking zoals astigmatisme hebben moeite met het onderscheiden van witte tekst op een donkere achtergrond. Alles wat de pupil vergroot, zoals een donker scherm, zorgt ervoor dat de beperking wordt versterkt, waardoor een pagina erg moeilijk leesbaar wordt.
Een goed ontwerp kan deze tekortkomingen echter overwinnen en een impact creëren, emoties overbrengen en de bezoeker beïnvloeden op manieren die met een witte achtergrond niet mogelijk zijn.
Wat u moet weten over donkere achtergronden
Ik zeg hier vaak donker en niet zwart.
Zwart is de voor de hand liggende keuze voor een donkere achtergrond op een website, maar het is niet de enige optie. Er zijn duizenden varianten van donkere achtergronden en zwart is er slechts één van. Donkerrood, donkergroen, donkerblauw en andere kleuren kunnen allemaal goed werken met het juiste ontwerp in de juiste situatie.
Kleurgebruik in design kent veel aspecten en ik zal ze hier niet allemaal bespreken. Ik concentreer me alleen op de aspecten die van toepassing zijn op donkere achtergronden.
Visuele perceptie van duisternis
Een veelgeciteerde peiling van ProBlogger uit 2009 lieten ons zien dat internetgebruikers niet zo dol zijn op witte achtergronden als we in eerste instantie zouden denken.
Hoewel de peiling inmiddels tien jaar oud is, bleek slechts 47% van de respondenten de voorkeur te geven aan altijd lichte achtergronden. Nog eens 36% gaf aan dat het afhangt van de blog, 10% gaf aan altijd donkere achtergronden te prefereren en 7% kon het niet kiezen. De meerderheid geeft misschien de voorkeur aan een witte achtergrond, maar 43% gaf aan dat ze donkere achtergronden mooi vinden of dat het afhangt van het algehele ontwerp van de site.
Een verdere peiling vier jaar later op CSS-Tricks Uit onderzoek bleek dat de meerderheid van de respondenten de voorkeur gaf aan lichte tekst op een donkere achtergrond. Voor de duidelijkheid: dit was een enquête over het gebruik van codeertools en er werd gevraagd welke configuratie gebruikers prefereerden voor hun code-editors: donker op wit of wit op donker. Van de respondenten gaf 63% de voorkeur aan een donkere achtergrond.
Het contrastaspect
De vlot getitelde 'De impact van tekst-achtergrondkleurcombinaties op webpagina's op leesbaarheid, behoud, esthetiek en gedragsintentie' is een interessante studie.
Er werd gekeken naar hoe het contrast tussen achtergrond- en tekstkleuren in een webdesign de doorslaggevende factor was voor de bruikbaarheid ervan, en niet de gebruikte kleuren. We hebben het hier niet over esthetiek, maar puur over bruikbaarheid.
Uit het onderzoek bleek dat polarisatie de leesbaarheid meer beïnvloedde dan de werkelijke kleur van de achtergrond. Wit op zwart is dus net zo effectief als zwart op wit, zolang er voldoende contrast is tussen de twee kleuren, leesbaarheid, leesbaarheid en gebruiksgemak behouden blijven.
Contrast is ontzettend belangrijk bij webdesign.
Sommige moderne websites proberen ontwerpen met een laag contrast te gebruiken, met wisselende resultaten. Zelfs Apple hebben het met een aantal pagina's op hun eigen website geprobeerd.
Pagina's met weinig contrast zijn moeilijker te lezen, werken niet voor slechtzienden en vereisen meer inspanning van de lezer om ze te begrijpen. Dat alles draagt niet bij aan een goed paginaontwerp.
Dit gaat in tegen het contrastaspect en de lezer lijdt eronder. Naar mijn mening maakt het niet zoveel uit of je donker op licht of licht op donker gebruikt, zolang de contrastverhouding maar zo breed mogelijk is om de leesbaarheid te bevorderen.
Het leesbaarheidsaspect
Donkere achtergronden kunnen in sommige situaties de perfecte ontwerpkeuze zijn.
Websites met veel tekst vallen daar niet onder. Hoewel contrast een grotere invloed heeft op de leesbaarheid van een pagina, heeft de kleurkeuze ook invloed. Volgens Jacob Nielsen kost negatieve tekst, die bestaat uit witte tekst op een donkere achtergrond, iets meer moeite en wordt het langzamer gelezen dan positieve tekst, die bestaat uit zwarte tekst op een witte achtergrond.
Zolang het contrast tussen de tekst en de achtergrond voldoende is, heeft dat geen invloed op de leesbaarheid.
Ik zou daar nog iets aan toe willen voegen: door te zeggen dat witte tekst op een donkere achtergrond de leesbaarheid niet beïnvloedt, zolang je het maar goed ontwerpt.
Voor mij betekent dat:
- Slim gebruik van de lege ruimte tussen de blokken om lichtlekken te voorkomen.
- Er wordt rekening gehouden met de regels voor goede leesbaarheid: korte zinnen, korte paragrafen, korte woorden en gemakkelijk te verteren teksten.
- Zorgvuldige lettertypekeuze voor optimale leesbaarheid op verschillende schermformaten.
- Behoud van maximaal contrast bij het werken met donkere achtergronden.
- Vermijd kleurverlopen en schaduwen bij een donkere achtergrond.
De keuze van het lettertype is belangrijk bij elk webdesign, maar nog belangrijker wanneer u met een donkere achtergrond werkt.
We kiezen meestal voor schreefloze lettertypen omdat ze een vleugje klasse of elegantie aan een ontwerp toevoegen en gebruiken schreefloze lettertypen voor een moderne look. Bij lichte tekst op een donkere achtergrond is de keuze beperkt tot alleen schreefloze lettertypen.
Serif-lettertypen kunnen werken, maar vereisen meer inspanning van de lezer om ze te begrijpen. Dit wordt nog eens versterkt bij gebruik van kleinere schermen of mobiele apparaten.
Het emotionele perceptieaspect
We weten allemaal dat verschillende kleuren verschillende emoties kunnen oproepen. We weten dit al jaren en recentere studies hebben dit met bewijs ondersteund. We weten dat verschillende kleurencombinaties de hersenen op verschillende manieren beïnvloeden en Sommige marketeers denken dat het gebruik van kleur alleen de conversie kan verhogen.
Kleurenpsychologie leert ons dat wanneer we kleuren zien, onze hersenen hormonen vrijgeven die ervoor zorgen dat we emoties voelen. Verschillende kleuren zorgen ervoor dat er verschillende hormonen vrijkomen die van invloed kunnen zijn op hoe we over iets van een bepaalde kleur denken. Dit combineert met onze perceptie van wat een kleur betekent, wat tegen ons gebruikt kan worden voor marketing en verkoop.
Wij hebben diepgewortelde ideeën over wat een kleur betekent.
Bijvoorbeeld zwart wordt vaak geassocieerd met een krachtige kleur, erotisch, mysterieus, formeel en elegant. Wit voelt schoon, fris, modern, jong, toegankelijk en vertrouwd aan. Rood is stoutmoedig, krachtig, zelfverzekerd en sensueel.
Elke kleur roept verschillende gevoelens op bij de lezer. Daarom besteden wij als webdesigners ontzettend veel tijd aan het bedenken van de perfecte combinatie. En daarna besteden we nog meer tijd aan het overtuigen van de klant dat de kleuren die we hebben gekozen, goed zullen werken.
Voordelen van donkere achtergronden
Donkere achtergronden zijn niet geschikt voor elk ontwerp of project.
Indien geschikt, kan een donkere achtergrond karakter, impact, nadruk en een emotionele respons toevoegen aan een webdesign. Ik heb dit allemaal al besproken, dus laten we eens kijken naar enkele andere voordelen van het gebruik van donkere achtergronden in design.
1. Minder oogbelasting
Blijkbaar is het makkelijker om langer te lezen met een donkere achtergrond. Ook al lezen we langzamer, zolang de contrastverhouding breed genoeg is en het ontwerp verder goed is, kunnen we zonder oogvermoeidheid langer lezen.
Over het onderwerp ogen, donkere achtergronden hebben ook minder invloed op de slaapHet scherm zal minder blauw/wit licht bevatten dan een traditionele webpagina. Er wordt nu algemeen aangenomen dat dit blauwe licht ons circadiaans ritme beïnvloedt, onze slaap beïnvloedt, ziekte veroorzaakt en een negatieve invloed heeft op ons dagelijks leven.
2. Stijlvol
Er is een reden waarom elke vrouw een little black dress draagt of waarom limousines zwart zijn. Het voegt een gevoel van stijl en elegantie toe dat je nergens anders vindt. Zolang het algehele ontwerp van hoge kwaliteit is, wekt het gebruik van donkere achtergronden direct dat gevoel op, wat een aankoopbeslissing kan beïnvloeden, een emotionele band kan creëren of ervoor kan zorgen dat de lezer wat hij ziet serieuzer neemt.
3. Bekendheid
Websites met een donkere achtergrond waren vroeger zeer zeldzaam. De websites die we zagen, voldeden vaak helemaal niet aan de usability-regels en presteerden niet goed. Nu steeds meer programma-UI's donkere achtergronden gebruiken, games steeds vaker donkere achtergronden gebruiken in menu's, navigatie en tussenfilmpjes, en de nachtmodus op allerlei apparaten, is de donkere achtergrond niet langer zo niche.
We zien het overal. In veel Adobe-producten, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop en Dreamweaver en vele andere toonaangevende programma's.
Tegenwoordig zijn we gewend aan lichte tekst op donkere achtergronden. Het verrast ons niet meer en heeft geen negatieve invloed op onze verwachtingen, zoals dat vroeger wel het geval was.
4. Valt op
Hoewel websites met een donkere achtergrond steeds populairder worden, vormen ze nog steeds een minderheid. Dit zorgt voor een zekere impact zodra iemand op de pagina terechtkomt. Nog voordat er een woord is gelezen of een afbeelding is gescand, maakt je pagina al indruk en zorgt ervoor dat de lezer met een frisse blik naar het ontwerp kijkt.
Zolang het ontwerp voortbouwt op die eerste indruk, met goede leesbaarheid, goed gebruik van de ruimte en krachtige beelden, dan bent u succesvol.
5. Vervaagt naar de achtergrond
Donkere gebruikersinterfaces en achtergronden zorgen voor die eerste indruk, maar kunnen daarna geleidelijk naar de achtergrond verdwijnen om de content te laten schitteren. Dit geldt vooral voor gebruikersinterfaceontwerp, maar is ook relevant voor webdesign. Zorgvuldig geplaatste afbeeldingen en content met het juiste contrastniveau zullen dan veel meer opvallen, terwijl de achtergrond zelf minder zichtbaar wordt.
Dit kan helpen bij het lezen van pagina-inhoud in heldere omgevingen, zoals buiten of bij fel licht. In donkere omgevingen kan een witte of lichte achtergrond de ogen belasten en de leesbaarheid bemoeilijken. In lichtere omgevingen kan een donkere achtergrond het tegenovergestelde effect hebben. Hoewel we niet voor specifieke omgevingen kunnen ontwerpen, is het toch een voordeel van een donkere achtergrond dat deze goed leesbaar is in zonlicht.
Nadelen van het gebruik van donkere achtergronden
Het gebruik van een donkere achtergrond in design is niet per se positief. Er zijn enkele nadelen aan deze stijl, die niet onderschat mogen worden.
1. Zorgvuldige overweging
Donkere achtergronden werken niet voor elke klant of elke situatie. Dit ontwerpthema vereist veel meer denkwerk en planning dan de traditionele lichte achtergrond. Er zijn ook meer gebruikerstests nodig om ervoor te zorgen dat de balans klopt vóór de lancering. Niet alle merkthema's werken met donkere achtergronden. Ook niet alle producten of onderwerpen werken ermee.
Sommige klanten ervaren donkere achtergronden nog steeds zoals wij dat vroeger deden, negatief. Zelfs als je ervan overtuigd bent dat een donkere achtergrond de juiste keuze is, kan het lastiger zijn om je klant te overtuigen dan wanneer je de traditionele route zou volgen.
2. Zorgvuldige planning
Alle ontwerpkeuzes vereisen zorgvuldige planning, kleur-, lettertype- en beeldkeuze. Het gebruik van donkere achtergronden vraagt daar nog meer aandacht voor. Wit/donkere ruimte wordt nog belangrijker om te voorkomen dat er licht in het donker doordringt en om ervoor te zorgen dat de tekst leesbaar is. Afbeeldingen en ontwerpelementen moeten goed gescheiden blijven om ze leesbaar te houden en te voorkomen dat er licht of kleur naar andere delen lekt.
Het ontwikkelingsproces kan hierdoor langer duren met een donkere achtergrond. Mogelijk zijn er meer gebruikerstests nodig en moeten er ook meer verbeteringen aan de mobiele ervaring worden doorgevoerd.
3. Zorgvuldig evenwicht
Het gebruik van donkere elementen in een ontwerp voegt gewicht toe aan een pagina. Te veel gewicht kan de pagina log en zwaar maken. Dat geldt des te meer bij donkere achtergronden. Elke pagina moet zorgvuldig worden uitgebalanceerd om te voorkomen dat deze zwaar aanvoelt en om de inherente elegantie in plaats van lompheid naar voren te brengen.
Het is een lastige opgave en het vereist veel bijschavingen en veel wit/zwarte ruimte op de pagina om het in balans te houden.
4. Toegankelijkheid
Een aspect van dark designs dat weinig aandacht krijgt, is toegankelijkheid. Elk webdesign zou al in de allereerste planningsfase rekening moeten houden met toegankelijkheid. Gelukkig zullen de meeste gebruikers je pagina kunnen lezen en begrijpen, zolang je de algemene regels voor een hoog contrast tussen tekst en achtergrond volgt.
Ocuco's Medewerkers Richtlijnen voor toegankelijkheid van webinhoud (WCAG) Vereist een kleurcontrast van 4.5.1:3 tussen tekst en achtergrond voor normale tekst en 1:XNUMX voor grote tekst. Het suggereert witte tekst voor zwarte achtergronden, maar er is enige ruimte voor andere kleuren, zolang de contrastverhouding maar zo breed mogelijk blijft.
Ik noemde astigmatisme al eerder, omdat dit een stoornis is die negatief wordt beïnvloed door het gebruik van donkere achtergronden. Astigmatisme is een onvolkomenheid in het hoornvlies die wazig of vervormd zicht veroorzaakt. Op een donkere achtergrond moet de pupil zich verwijden om te kunnen lezen, wat de wazigheid accentueert.
Hoewel dit slechts één van de vele beperkingen is in een wereld van vele, ongeveer 33% van de Amerikanen heeft een vorm van astigmatismeAls je dat uitbreidt naar een wereldwijd publiek, kan bijna een derde van je potentiële publiek in meer of mindere mate astigmatisme hebben. Dat is iets waar elk ontwerp rekening mee moet houden.
Wanneer je een donkere achtergrond moet gebruiken
Er zijn verschillende situaties waarin donkere achtergronden zich goed lenen voor webdesign. Deze omvatten:
- Wanneer u een eerste visuele impact wilt maken.
- Als donker past bij de merkidentiteit van de klant.
- Bij het presenteren van luxe- of hoogwaardige producten of diensten.
- Als het ontwerp modern of minimalistisch is.
- Wanneer u drama of mysterie in een ontwerp wilt creëren.
Wanneer je geen donkere achtergrond moet gebruiken
Er zijn ook momenten waarop een donkere achtergrond niet de beste optie is en koste wat kost vermeden moet worden. Zelfs als de klant erop staat er een te gebruiken.
- Wanneer de pagina veel inhoud bevat.
- Wanneer de merkidentiteit dit niet ondersteunt.
- Wanneer bekend is dat de doelgroep er niet goed op reageert.
- Wanneer er veel gebeurt op een pagina en wit/zwarte ruimte schaars is.
- Wanneer het doel B2B of officieel is, zoals bij de overheid.
10 voorbeelden van donkere achtergrondthema's
Om je te laten zien wat ik bedoel met donkere achtergronden die er fantastisch uitzien als ze goed zijn gemaakt, heb ik tien uitstekende thema's verzameld die ze gebruiken. Elk thema is net iets anders qua ontwerp, maar ze hebben allemaal één ding gemeen: ze gebruiken donkere achtergronden voor maximaal effect.
1. Divi met Web Freelancers Lay-outpakket
Het Divi WordPress-thema is een van de meest flexibele. Hoewel veel sjablonen een lichte achtergrond hebben, kun je deze in een paar seconden omdraaien. Voeg het Web Freelancers Layout Pack toe aan Divi en je hebt een fantastische website met een donkere achtergrond voor elk doel.
Het enige wat je hoeft te doen is de twee thema's te installeren, het thema te activeren, een pagina te openen en de achtergrond donker te maken. Gebruik vervolgens de optie 'Achtergrondkleur uitbreiden' op paginasecties om alles op één lijn te brengen.
Krijg Divi met 10% korting tot juli 2025
2. Astra met fotograaf Starter Site
Door het Astra-framework te gebruiken met de Photographer demosite-installatie, ontstaat een uitstekende website met een zwarte achtergrond. Goed gebruik van de ruimte, contrasterende lettertypen en een minimalistisch ontwerp maken dit thema uniek.
Bekijk de Fotografie Starter Site
3. Genesis met Parallax Pro
Parallax Pro is een thema voor de Genesis framework die een afwisselend monochroom ontwerp met groot effect gebruikt. Het is wederom een eenvoudig ontwerp dat de pagina-inhoud laat schitteren en een uitstekend voorbeeld is van hoe donkere achtergronden zo goed kunnen werken.
4. Lens van PixelGrade
Lens van PixelGrade gebruikt een rasterontwerp om ons een portfolio of fotopresentatie te geven met een donker thema. De donkere achtergrond is alleen echt zichtbaar in het zijmenu en het thema gebruikt contrasterende kleuren op een zeer interessante manier, waarbij andere kleuren dan zwart en wit worden toegevoegd om echt op te vallen.
NB: We hebben een 20% KORTING rechtstreeks van PixelGrade, exclusief voor CollectiveRay bezoekers. Klik gewoon op de onderstaande link, uw korting wordt automatisch toegepast wanneer u afrekent. Deze aanbieding is ALLEEN geldig tot het einde van juli 2025.
5. Divi met Elektricien Dark Pack
Nog een Divi-thema, dit keer de landingspagina voor elektriciens in het donker. Dit is een thema van zeer hoge kwaliteit met een donkere achtergrond, scherpe typografie, goed gebruik van beeldtaal en een aantal complementaire kleuren om het geheel interessanter te maken. Dit is een persoonlijke favoriet en ik vind dat het fantastisch werkt.
6. Aldo van ThemeRex
Aldo van ThemeRex is een thema dat elegantie eenvoudig maakt. Het is een moeiteloos thema dat voor veel onderwerpen geschikt is en veel pagina-inhoud combineert met een donkere achtergrond zonder de pagina te overbelasten. Het is een zeer goed uitgewerkt ontwerp dat op elk schermformaat goed werkt.
7. Neve Pro met donkere parallax-afbeeldingen
Neve Pro met Dark Parallax Images maakt gebruik van het Neve-thema met al zijn kracht, snelheid en functies. Gecombineerd met een donkere achtergrond en een complementair thema is dit WordPress-thema een van de beste die er zijn. De pagina's zijn goed gebalanceerd, het laadt snel, de content leidt de lezer soepel door de pagina en je blijft aan niets tekortkomen.
8. Vertellen met Gamer Layout
De Telling with Gamer Layout is een uitstekend voorbeeld van hoe je andere felle kleuren kunt gebruiken om een donkere achtergrond te verfraaien. Laat je niet misleiden door de gamer-naam: je kunt dit thema voor alles gebruiken en het ziet er nog steeds fantastisch uit. Een sterk menu, uitstekende lay-out, sublieme scherpte en contrast en goed gebruik van de ruimte zijn slechts enkele van de pluspunten.
9. Nextout
Nextout is een zeer stijlvol WordPress-thema met een lichtere, donkere achtergrond met contrasterende en complementaire kleuren. Met een aantrekkelijke slider bovenaan scroll je naar beneden in een tegellayout die perfect geschikt is voor websites met afbeeldingen. Met zijn soepele navigatie en doordachte lay-outs is het absoluut een van de betere webthema's hier.
10. Hestia Pro met donkere parallax-afbeeldingen
Hestia Pro met Dark Parallax Images is een ander zeer strak thema dat donkere achtergronden combineert met lichte elementen, contrasterende kleuren en uitstekende typografie. De pagina's zijn rijk maar niet overvol en de balans is precies goed, ongeacht het type scherm dat je gebruikt. Het thema werkt op elk apparaat, voor elk onderwerp en is zeker de moeite waard om te proberen.
Als je meer wilt weten over Hestia - Bekijk dit artikel op Collectiveray.
Conclusie: het gebruik van donkere achtergronden in webdesign
Een van de beste dingen van het moderne internet is de vrijheid om jezelf te uiten en de regels te overtreden. Hoewel sommige van die regels absoluut niet overtreden mogen worden, mogen sommige dat wel. Zoals het traditionele zwart-witontwerp dat al sinds de 17e eeuw bestaat.th eeuw.
Ik denk dat donkere achtergronden er fantastisch uit kunnen zien als je ze met aandacht maakt. Ze maken die eerste indruk en vervagen vervolgens naar de achtergrond. Ze werken goed in de meeste lichtomstandigheden en een goed uitgebalanceerde pagina met slim gebruik van ruimte kan ervoor zorgen dat die achtergrond het product of de bedoeling van een pagina beter benadrukt dan witte achtergronden.
Donkere ontwerpen zijn niet geschikt voor elk project of elke bedoeling en vereisen veel meer planning, verfijning en testen dan witte achtergronden. Maar als ze goed worden uitgevoerd, denk ik dat al die extra tijd en moeite het zeker waard zijn!