Website

Design je product en website voor Dark Mode

5 min leestijd

Er zijn bepaalde dingen waar je rekening mee moet houden als je een design voor een website maakt. Eén daarvan is het verschil tussen een Light en Dark Mode versie. Dit zodat je er zeker van kan zijn dat beide versies toegankelijk en leesbaar blijven en bezoekers een consistent gevoel hebben.

Design je product en website voor Dark Mode

Net als veel andere gebruikers ben ik voorstander van het gebruik van een donkere modus oftewel Dark Mode bij tekstverwerkers, omdat deze meer rust creëren wanneer je een langere tijd achter elkaar werkt. Deze dark mode is in de loop der tijd ook overgekomen naar webdesign.

Het implementeren van Dark Mode in producten en websites

Het implementeren van dark mode in native apps op je pc of Mac is een duidelijke keuze, maar voor producten en websites is het minder duidelijk. Als je ervoor kiest om het doen, kun je gebruik maken van de media query om te detecteren of een gebruiker zijn besturingssysteem is ingesteld in Light of Dark Mode namelijk:

@media (prefers-color-scheme:dark{ /* dark mode style*/ }

Je kan hierbij uit 3 waarden kiezen:

  • no-preference: iemand heeft geen voorkeur opgeven voor Light of Dark
  • Light: de gebruiker heeft het Light Theme geselecteerd.
  • Dark: de gebruiker heeft het Dark Theme geselecteerd.

CSS Custom Properties

De aangepaste eigenschappen van CSS oftewel de Custom Properties zijn ideaal te gebruiken met de hierboven genoemde media Query.

Je kan met enkele lijnen CSS code je kleuren definiëren voor de Light mode en met behulp van de @media query een set alternatieve kleuren bepalen voor Dark Mode. Je bent hierin niet alleen gelimiteerd tot kleuren maar als je wilt kun je afhankelijk van Light of Dark Mode heel je website aanpassen. Of een totaal ander ontwerp per mode slim is, laat ik even in het midden. Een goed voorbeeld om in gedachten te nemen is het veranderen van de Typography zodat de leesbaarheid op je site in zowel Light als Dark hetzelfde blijft.

Ontwerpen voor Dark Mode

De keuze van je dark mode kleuren hangen af van de volgende 3 criteria:

  • Complimenteren ze de look en feel van andere apps en je OS in Dark mode.
  • Ze moeten zorgen voor toegankelijkheid en leesbaarheid.
  • En ze moeten je identiteit blijven uitstralen ongeacht welke mode de gebruiker kiest.

Het kiezen van kleuren

Het is geen simpele kwestie van je huidige kleuren omkeren, lichte achtergronden worden zwart, en zwarte tekst wordt wit. Witte tekst op een zwarte achtergrond is namelijk weer vermoeiend voor de ogen van een gebruiker, met name bij het lezen van lange stukken.

Een goede balans tussen contrast en het gebruik van gebroken wit en/of grijstinten is een goede manier om dit op te lossen.

Kleur contrast en toegankelijkheid.

Je moet altijd in gedachten houden als je een website ontwerpt dat je website toegankelijk en leesbaar is voor al je gebruikers. Zeker als je aan de slag gaat met contrast in je ontwerp. Het checken van je kleurencontrast vroeg in de ontwerpfase kan toekomstige problemen met leesbaarheid voorkomen.

Typografie

Als je ontwerpt voor dark mode ben je niet gelimiteerd aan het veranderen van kleuren alleen, een andere optie om in gedachte te nemen is het veranderen van je lettertypes. Lettertypes met lichte kleuren op een donkere achtergrond  hebben een hoger contrast dan wanneer je deze twee omdraait. Dus zorg ervoor dat je Dark Mode ontwerp makkelijker leesbaar is door het toevoegen van meer witruimte of donkerruimte in je tekst.

Je kan experimenteren met een verschil van lijnhoogte van 0.2rem tussen je Light en Dark Mode Queries in je CSS.

Dit waren enkele punten die je in gedachten moet nemen als je je website wilt voorzien van een Dark Mode. Ben je benieuwd naar de mogelijkheden van jouw website of kunnen we je ergens mee van dienst zijn? We horen het graag!

Ook interessant

Wireframe, een solide basis voor je website
2 min leestijd

Wireframe, een solide basis voor je website

Website: De website ontwikkeling bij Nederdesign gaat via een structureel traject. Bij de website ontwikkeling starten we met een wireframe. Maar wat is dit precies en hoe ‘lees’ je deze?

Lees meer
Visuele hiërarchie
2 min leestijd

Visuele hiërarchie

Website: Hiërarchie is belangrijk in een website. Binnen één oogopslag moet duidelijk zijn wat het meest belangrijk is op de website. Visueel doe je dit met (tekst)grootte, kleuren en meer.

Lees meer
Iconen, musthaves op je website
5 min leestijd

Iconen, musthaves op je website

Website: Iconen zijn onderdeel van je website. Of het nu gaat over een idee op papier, een digitaal prototype of een website die live staat.

Lees meer
Bekijk alle berichten