De geaccepteerde formule voor een website-ontwerp is een witte achtergrond, zwarte of donkergrijze tekst en merkkleuren die royaal zijn besprenkeld. De overgrote meerderheid van de best presterende websites gebruikt deze formule met veel succes. Maar is het de enige formule die succesvol kan zijn? In dit artikel gaan we dieper in op het maken 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 webontwerptools en het laadt automatisch een pagina met een witte achtergrond met zwarte tekst. Je kunt het natuurlijk veranderen, maar deze combinatie is de waargenomen norm.
Het hoeft niet zo te zijn.
Als het goed is gedaan, kan een donkere achtergrond voor een website beter werken dan je zou denken.
De eerste zorg van elk webdesign is wat de gebruiker wil? Welke kleuren passen bij het medium, het merk, het beoogde gebruik, de doelgroep en wat zou werken op de apparaten die worden gebruikt om toegang te krijgen tot de site?
De meeste klanten gaan ervan uit dat dit een witte achtergrond is met zwarte of donkere schreefloze lettertypen. Die veronderstelling is misschien niet zo zwart-wit (bedoelde woordspeling).
Waarom wit?
Er zijn twee hoofdredenen waarom de combinatie van zwart op wit als de norm wordt beschouwd.
Maar dit is eigenlijk geworteld in de geschiedenis: print en leesbaarheid.
Toen we alles op papier deden, betekende de gebroken witte kleur van papier dat het gemakkelijker was om zwart voor inkt te gebruiken in plaats van het papier te kleuren. Je had nodig less verf en het was veel schoner en gemakkelijker werk. Die eerste gedrukte pamfletten waren zwarte inkt op licht papier en dat bleef zo.
De andere reden is de leesbaarheid. Voor veel gebruikers, vooral die op mobiel, leest wit op donker niet altijd goed. Mensen met visuele beperkingen zoals astigmatisme hebben moeite om witte tekst op een donkere achtergrond te onderscheiden. Alles waardoor de pupil groter wordt als een donker scherm, betekent dat de beperking wordt versterkt, waardoor een pagina erg moeilijk te lezen is.
Een geweldig ontwerp kan deze tekortkomingen echter overwinnen en een impact hebben, emotie overbrengen en de bezoeker beïnvloeden op een manier die een witte achtergrond gewoon niet kan.
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 voor een website, maar het is niet de enige optie. Er zijn duizenden varianten van donkere achtergronden en zwart is er maar één van. Donkerrood, donkergroen, donkerblauw en andere kunnen allemaal werken met het juiste ontwerp in de juiste situatie.
Er zijn veel aspecten aan het gebruik van kleuren in het ontwerp en ik zal het hier niet allemaal bespreken. Ik ga me gewoon concentreren op die aspecten die betrekking hebben op donkere achtergronden.
Visuele perceptie van donker
Een veel geciteerde peiling van ProBlogger in 2009 liet ons zien dat webgebruikers niet zo'n voorstander zijn van witte achtergronden als we aanvankelijk zouden denken.
Hoewel ze nu tien jaar oud zijn, bleek uit de peiling dat slechts 47% van de respondenten de voorkeur gaf aan altijd lichte achtergronden. Nog eens 36% zei dat het afhangt van de blog, 10% zei dat ze altijd donker wilden en 7% kon niet beslissen. De meerderheid geeft misschien de voorkeur aan een witte achtergrond, maar 43% zei dat ze van donker hielden of dat dit afhankelijk was van het algehele ontwerp van de site.
Vier jaar later nog een peiling bij CSS-Tricks ontdekte dat de meerderheid van de respondenten de voorkeur gaf aan lichte tekst op een donkere achtergrond. Voor alle duidelijkheid: dit was een peiling rond het gebruik van coderingstools en vroeg welke configuratie de gebruikers de voorkeur gaven aan hun code-editors, donker op wit of wit op donker. Van degenen die reageerden, gaf 63% de voorkeur aan een donkere achtergrond.
Het contrastaspect
Het vlot getitelde 'De impact van tekst-achtergrondkleurencombinaties van webpagina's op leesbaarheid, retentie, esthetiek en gedragsintentie' is een interessante studie.
Er werd gekeken hoe het contrast tussen achtergrond- en tekstkleuren binnen een webdesign bepalend was voor de bruikbaarheid 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 maar voldoende contrast is tussen de twee kleuren, leesbaarheid, leesbaarheid en gebruiksgemak behouden blijft.
Contrast is ongelooflijk belangrijk in webdesign.
Sommige moderne websites proberen ontwerpen met een laag contrast te gebruiken met gemengde resultaten. Ook al Apple hebben het geprobeerd met enkele pagina's op hun eigen website.
Pagina's met een laag contrast zijn moeilijker te lezen, werken niet voor slechtzienden en vereisen meer inspanning van de lezer om het te begrijpen. Niets van dat alles zorgt voor een goed pagina-ontwerp.
Dit druist in tegen het contrastaspect en het is de lezer die eronder lijdt. 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.
Tekst-zware websites zijn niet een van die situaties. Hoewel contrast een grotere invloed heeft op de leesbaarheid van een pagina, heeft ook de kleurkeuze invloed. Volgens Jacob Nielsen kost negatieve tekst, die van witte tekst op een donkere achtergrond, iets meer moeite om te lezen en wordt deze langzamer gelezen dan positieve tekst die zwart is op een witte achtergrond.
Afgezien daarvan, zolang het contrast tussen de tekst en de achtergrond voldoende is, wordt de leesbaarheid niet aangetast.
Ik zou daar nog wat aan toevoegen. Door witte tekst op een donkere achtergrond te gebruiken, heeft dit geen invloed op de leesbaarheid, zolang u het maar goed ontwerpt.
Voor mij betekent dat:
- Intelligent gebruik van lege ruimte tussen blokken om lichtlekkage te voorkomen.
- Er worden goede leesbaarheidsregels gevolgd in termen van korte zinnen, korte paragrafen, korte woorden en licht verteerbare teksten.
- Zorgvuldige lettertypeselectie om de leesbaarheid op verschillende schermformaten te maximaliseren.
- Maximaal contrast behouden bij het werken met donkere achtergronden.
- Vermijd hellingen en schaduwen met een donkere achtergrond.
Lettertypekeuze is belangrijk bij elk webontwerp, maar nog meer bij donkere achtergronden.
We selecteren meestal serif-lettertypen omdat ze een vleugje klasse of elegantie toevoegen aan een ontwerp en gebruiken schreefloze lettertypen voor moderniteit. Als het om lichte tekst op een donkere achtergrond gaat, wordt de keuze beperkt tot alleen schreefloos.
Serif-lettertypen kunnen werken, maar vereisen meer werk van de lezer om te begrijpen. Dat wordt nog verergerd bij gebruik van kleinere schermen of mobiel.
Het emotionele perceptie-aspect
We weten allemaal dat verschillende kleuren verschillende emoties kunnen oproepen. We weten dit al jaren en recentere onderzoeken hebben dat met bewijsmateriaal ondersteund. We weten dat verschillende kleurencombinaties de hersenen op verschillende manieren beïnvloeden sommige marketeers denken dat alleen kleurgebruik de conversie kan verhogen.
Kleurenpsychologie vertelt ons dat als we kleuren zien, onze hersenen signalen afgeven dat er hormonen vrijkomen die ons emoties kunnen laten voelen. Verschillende kleuren zorgen ervoor dat verschillende hormonen vrijkomen die van invloed kunnen zijn op hoe we ons voelen over iets van een bepaalde kleur. Dit wordt gecombineerd met onze perceptie van wat een kleur betekent die tegen ons kan worden gebruikt voor marketing en verkoop.
We hebben diepgewortelde ideeën over wat een kleur betekent.
Bijvoorbeeld zwart wordt vaak geassocieerd als een krachtige kleur, erotisch, mysterieus, formeel en elegant. Wit voelt schoon, fris, modern, jong, toegankelijk en vertrouwd aan. Rood is gedurfd, krachtig, zelfverzekerd en sensueel.
Elke kleur roept verschillende gevoelens op bij de lezer. Daarom besteden we als webdesigners zo'n buitensporige hoeveelheid tijd aan het bedenken van de perfecte combinatie en dan nog langer om de klant ervan te overtuigen dat de kleuren die we hebben gekozen zullen werken.
Voordelen van donkere achtergronden
Donkere achtergronden zijn niet geschikt voor elk ontwerp of project.
Wanneer ze geschikt zijn, kan een donkere achtergrond karakter, impact, nadruk en een emotionele reactie aan een webontwerp toevoegen. Ik heb dat allemaal al besproken, dus laten we eens kijken naar enkele andere voordelen van het gebruik van donkere achtergronden in het ontwerp.
1. Less vermoeide ogen
Blijkbaar is het gemakkelijker om langer te lezen wanneer een donkere achtergrond wordt gebruikt. Ook al lezen we langzamer, zolang die contrastverhouding maar breed genoeg is en het ontwerp verder goed is, kunnen we zonder vermoeide ogen voor langere tijd lezen.
Over ogen gesproken, donkere achtergronden hebben invloed op de slaap less ook. Het scherm bevat: less blauw/wit licht dan een traditionele webpagina. Er wordt nu algemeen aangenomen dat dit blauwe licht invloed heeft op ons circadiane ritme en 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 kleine zwarte jurk heeft of waarom limousines zwart zijn. Het voegt een gevoel voor stijl en elegantie toe dat moeilijk elders te krijgen is. Zolang het algehele ontwerp van hoge kwaliteit is, geeft het gebruik van donkere achtergronden meteen dat gevoel dat een aankoopbeslissing kan beïnvloeden, een emotionele band kan creëren of de lezer kan nemen wat ze zien serieuzer.
3. Bekendheid
Websites met een donkere achtergrond waren vroeger zeer zeldzaam. Die die we wel zagen, voldeden vaak helemaal niet aan de usability-regels en presteerden niet goed. Met meer programma-UI's die donkere achtergronden gebruiken, games die steeds vaker donkere achtergronden gebruiken in menu's, navigatie en tussenfilmpjes en nachtmodus op allerlei soorten apparaten, is het donker niet langer zo niche.
We zien het overal. Van veel Adobe-producten, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop en Dreamweaver en vele andere toonaangevende programma's.
Nu we meer gewend zijn aan het zien van lichte tekst op een donkere achtergrond, verbaast het ons niet en heeft het geen negatieve invloed meer op onze verwachtingen zoals het ooit deed.
4. Valt op
Hoewel websites met donkere achtergronden steeds acceptabeler worden, zijn ze nog steeds in de minderheid. Dit biedt een element van impact zodra iemand op de pagina terechtkomt. Nog voordat een woord wordt gelezen of een afbeelding wordt gescand, maakt uw pagina al indruk en kijkt de lezer met een frisse blik naar het ontwerp.
Zolang dat ontwerp voortbouwt op die eerste eerste indruk met goede leesbaarheid, goed gebruik van de ruimte en een aantal indrukwekkende beelden, bent u op een winnaar.
5. Verdwijnt naar de achtergrond
Donkere gebruikersinterfaces en achtergronden zorgen voor die eerste eerste impact, maar kunnen daarna stilletjes naar de achtergrond verdwijnen om de inhoud te laten schitteren. Dit geldt meer voor UI-ontwerp, maar is ook relevant voor webdesign. Zorgvuldig geplaatste afbeeldingen en content met het juiste contrast zullen dan veel meer opvallen terwijl de achtergrond zelf uit het zicht verdwijnt.
Dit kan helpen bij het lezen van pagina-inhoud in heldere omgevingen zoals buiten of onder sterk licht. In donkere omgevingen kan een witte of lichte achtergrond de ogen belasten en moeilijk leesbaar zijn. In lichtere omgevingen kan een donkere achtergrond juist het tegenovergestelde zijn. Hoewel we niet voor specifieke omgevingen kunnen ontwerpen, is het nooit deless een voordeel van een donkere achtergrond die goed leesbaar is in zonlicht.
Nadelen van het gebruik van donkere achtergronden
Het gebruik van een donkere achtergrond in het ontwerp is niet overal positief. Er zijn enkele nadelen aan deze stijl en ze moeten niet worden onderschat.
1. Zorgvuldige afweging
Donkere achtergronden werken niet voor elke klant of elke situatie. Dit ontwerpthema vereist veel meer aandacht en planning dan de traditionele lichte achtergrond. Het vereist ook meer gebruikerstests om ervoor te zorgen dat de balans goed is voor de lancering. Niet alle merkschema's werken met donkere achtergronden. Ook niet alle producten of onderwerpen werken ermee.
Sommige klanten ervaren donkere achtergronden nog steeds als vroeger, negatief. Zelfs als je ervan overtuigd bent dat een donkere achtergrond de beste keuze is, kan het moeilijker zijn om je cliënt te overtuigen dan wanneer je de traditionele weg zou volgen.
2. Zorgvuldige planning
Alle ontwerpkeuzes vereisen een zorgvuldige planning, kleur, lettertype en afbeeldingskeuze. Het gebruik van donkere achtergronden voegt daar nog meer aandacht aan toe. Wit/donkere ruimte wordt nog belangrijker om licht in het donker te stoppen en ervoor te zorgen dat tekst leesbaar is. Afbeeldingen en ontwerpelementen hebben een echte scheiding nodig om ze leesbaar te houden en om te voorkomen dat licht of kleur naar andere gebieden lekt.
Hierdoor kan het ontwikkelproces bij een donkere achtergrond langer duren. Mogelijk zijn meer gebruikerstests vereist en moet mogelijk ook rekening worden gehouden met meer verfijningen van de mobiele ervaring.
3. Zorgvuldige balans
Het gebruik van donkere elementen in een ontwerp voegt gewicht toe aan een pagina. Te veel gewicht en de pagina kan omslachtig en zwaar aanvoelen. Dat geldt des te meer als je te maken hebt met donkere achtergronden. Elke pagina moet zeer zorgvuldig worden uitgebalanceerd om te voorkomen dat hij zwaar aanvoelt en om zijn inherente elegantie naar voren te brengen in plaats van onhandigheid.
Het is een moeilijke vraag en vereist veel verfijning en veel wit/zwarte ruimte op de pagina om het in balans te houden.
4. Toegankelijkheid
Een aspect van donkere ontwerpen dat niet veel aandacht krijgt, is toegankelijkheid. Elk webontwerp moet in de allereerste stadia van de planning rekening houden met toegankelijkheid. Gelukkig kunnen de meeste gebruikers uw pagina lezen en begrijpen, zolang u zich aan de algemene regels voor hoog contrast tussen tekst en achtergrond houdt.
De Richtlijnen voor toegankelijkheid van webinhoud (WCAG) vereist een 4.5.1 kleurcontrast tussen tekst en achtergrond voor normale tekst en 3:1 voor grote tekst. Het suggereert witte tekst voor zwarte achtergronden, maar er is enige speelruimte voor andere kleuren zolang de contrastverhouding zo breed mogelijk blijft.
Ik noemde astigmatisme eerder omdat dit een beperking 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 beperking is in een wereld van vele, ongeveer 33% van de Amerikanen heeft een vorm van astigmatisme. Als je dat uitbreidt naar een wereldwijd publiek, kan bijna een derde van je potentiële publiek in een of andere 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. Ze bevatten:
- Wanneer u die eerste visuele impact wilt maken.
- When dark past bij de merkidentiteit van de klant.
- Bij het presenteren van luxe of hoogwaardige producten of diensten.
- Of het ontwerp modern of minimalistisch is.
- Wanneer je drama of mysterie moet creëren in een ontwerp.
Wanneer je geen donkere achtergrond moet gebruiken
Evenzo zijn er momenten waarop een donkere achtergrond niet uw beste optie is en ten koste van alles moet worden vermeden. Zelfs als de klant erop staat er een te gebruiken.
- Wanneer de pagina inhoud zwaar is.
- Wanneer de merkstem het niet ondersteunt.
- Wanneer bekend is dat de doelgroep er niet goed op reageert.
- Wanneer er veel aan de hand is met de pagina en wit / zwarte ruimte een premie is.
- Wanneer de bedoeling B2B of officieel is, zoals de overheid.
10 voorbeelden van donkere achtergrondthema's
Om je te laten zien wat ik bedoel met donkere achtergronden die er geweldig uitzien als ze goed worden gedaan, heb ik tien uitstekende thema's verzameld die ze gebruiken. Elk is iets anders qua ontwerp, maar ze hebben allemaal één ding gemeen: ze gebruiken donkere achtergronden voor een maximaal effect.
1. Divi met lay-outpakket voor webfreelancers
Het Divi WordPress-thema moet een van de meest flexibele zijn. Hoewel veel van de sjablonen een lichte achtergrond hebben, kunt u deze binnen enkele seconden omkeren. Voeg het Web Freelancers Layout Pack toe aan Divi en je hebt een fantastische website met een donkere achtergrond voor elk gebruik.
Het enige dat u hoeft te doen, is de twee thema's installeren, het thema activeren, een pagina openen en de achtergronden donker maken. Gebruik vervolgens de optie 'Achtergrondkleur uitbreiden' op paginasecties om alles op één lijn te brengen.
Koop Divi tot april 10 met 2024% korting
2. Astra met fotograaf-startsite
Het gebruik van het Astra-framework met de installatie van de Fotograaf-demosite levert een uitstekende website op met een zwarte achtergrond. Goed gebruik van de ruimte, contrasterende lettertypen en een minimalistisch ontwerp zorgen ervoor dat dit thema opvalt.
Bekijk de Fotografie Starterssite
3. Genesis met Parallax Pro
Parallax Pro is een thema voor de Genesis framework dat een afwisselend zwart-wit ontwerp met groot effect gebruikt. Het is een ander eenvoudig ontwerp dat de pagina-inhoud laat schitteren en een uitstekend voorbeeld geeft van hoe donkere achtergronden zo goed kunnen werken.
4. Lens van PixelGrade
Lens From PixelGrade gebruikt een rasterontwerp om ons een portfolio of afbeeldingsshowcase te geven met een donker thema. De donkere achtergrond is alleen echt zichtbaar in het zijmenu en het thema gebruikt op een zeer interessante manier contrasterende kleuren, 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 eind april 2024.
5. Divi met Elektricien Dark Pack
Nog een Divi-thema, dit keer de Electrician Landing Page in dark. Dit is een thema van zeer hoge kwaliteit met een donkere achtergrond, scherpe typografie, goed gebruik van afbeeldingen en enkele complementaire kleuren om interesse toe te voegen. Dit is een persoonlijke favoriet en ik denk dat het verbazingwekkend goed werkt.
6. Aldo van ThemeRex
Aldo van ThemeRex is een thema dat een elegante uitstraling eenvoudig maakt. Het is een inspanningless thema dat voor veel onderwerpen zou werken en veel pagina-inhoud in evenwicht brengt met een donkere achtergrond zonder de pagina te overbelasten. Het is een zeer geslaagd ontwerp dat goed werkt op elk schermformaat.
7. Neve Pro met donkere parallax-afbeeldingen
Neve Pro met Dark Parallax Images gebruikt het Neve-thema met al zijn kracht, snelheid en functies. Gecombineerd met een donkere achtergrond en een aanvullend thema, is dit WordPress-thema een van de beste die er is. Pagina's zijn goed uitgebalanceerd, het laadt snel, de inhoud leidt de lezer soepel over de pagina en het ontbreekt je aan niets.
8. Vertellen met gamerlay-out
De Telling with Gamer Layout is een uitstekend voorbeeld van het gebruik van andere gedurfde kleuren om een donkere achtergrond te verrijken. Laat je niet misleiden door de naam van de gamer, je zou dit thema voor alles kunnen gebruiken en het zou er nog steeds geweldig uitzien. Een sterk menu, uitstekende lay-out, uitstekende scherpte en contrast en goed gebruik van de ruimte zijn slechts enkele van de pluspunten.
9. Volgende
Nextout is een zeer stijlvol WordPress-thema dat een lichtere donkere achtergrond gebruikt met contrasterende en complementaire kleuren. Met een aantrekkelijke bovenste schuifregelaar scrol je naar beneden in een betegelde lay-out die zich perfect zou lenen voor beeldgeoriënteerde websites. Met gelikte navigatie en doordachte lay-outs is het hier zeker een van de betere webthema's.
10. Hestia Pro met donkere parallax-afbeeldingen
Hestia Pro met Dark Parallax Images is een ander zeer gelikt thema dat donkere achtergronden in evenwicht brengt met lichte elementen, contrasterende kleuren en uitstekende typografie. Pagina's zijn rijk maar niet overvol en de balans is precies goed, welk type scherm je ook gebruikt. Het kan op elk apparaat werken, voor elk onderwerp en het is zeker een aanrader.
Als je meer wilt weten over Hestia - bekijk dit artikel op Collectiveray.
Conclusie: donkere achtergronden gebruiken 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 mogen worden overtreden, kunnen sommige dat wel. Zoals het traditionele zwart op wit ontwerp dat al sinds de 17 . bij ons isth eeuw.
Ik denk dat donkere achtergronden er geweldig uit kunnen zien als ze met een zorgvuldig oog worden gedaan. Ze maken die eerste indruk en verdwijnen vervolgens naar de achtergrond. Ze werken goed in de meeste lichtomstandigheden en een goed uitgebalanceerde pagina met slim gebruik van de ruimte kan ervoor zorgen dat die achtergrond het product of de bedoeling van een pagina beter benadrukt dan witte achtergronden.
Donkere ontwerpen passen niet bij elk project of elke intentie en vereisen veel meer planning, verfijning en testen dan witte achtergronden. Maar goed gedaan, ik denk dat al die extra tijd en moeite het zeker waard kunnen zijn!
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
en nog veel meer ...