Zo verbeter je je Dark UI ontwerp

Op steeds meer apparaten en apps wordt het aangeboden: Dark Mode. Nachtmodus, donkere modus, zwarte modus of hoe je het wil noemen, is een relatief nieuwe ontwikkeling in softwareland. Wij developers beïnvloeden hoe snel de donkere modus algemeen geaccepteerd zal zijn. In deze blog geven we je een paar korte tips om betere donkere user interfaces op te leveren.

Wat is Dark Mode?

Sinds de komst van computers was een donker scherm met lichte tekst de standaard. Maar toen GUI’s hun intrede deden werd Light Mode de normaal; donkere tekst op een lichte achtergrond.

Er zijn verschillende studies die beweren dat Light Mode beter is voor je ogen, maar tegelijkertijd zijn er ook studies die het tegenovergestelde beweren. Zeker in webapplicaties is het ongetwijfeld persoonlijke voorkeur. Ik denk dat het ook zeer afhankelijk is van de omgeving waarin iemand het product gebruikt. Als je in een donkere omgeving werkt is het wel zo prettig als het scherm daarop aansluit, nietwaar?

6 tips om jouw Dark-UI-ontwerp te verbeteren

1. Gebruik geen puur zwart.

   Gebruik puur zwart alleen voor teksten in light mode. In donkere modus zorgt puur zwart namelijk snel voor een te hoog contrast.

2. Beperk kleur saturatie.

   Waarschijnlijk ken je het natuurverschijnsel Aurora Borealis wel. Het poollicht. Foto’s doen geloven dat de kleuren met hoge kleurverzadiging zichtbaar zijn in de lucht. Hoewel de natuur ons leert veel saturatie te hanteren in de nacht geldt dit niet voor Dark UI. Een hoge saturatie heeft namelijk een negatief effect op het contrast van het ontwerp waardoor gebruikers langer moeten zoeken voordat ze bepaalde handelingen kunnen voltooien.

3. Voorkom schaduwen.

   Waarom geen schaduwen? Nou…, denk er zo eens over na: waar moeten schaduwen vandaan komen als het donker is? Tenzij je een lantaarnpaal in je ontwerp hebt kan je schaduwen dus lekker laten zitten. Mocht je toch iets accent willen aanbrengen, probeer dan eens iets met glow (dus het element geeft zelf licht).

4. Creëer een diepte effect.

   In light mode is het erg eenvoudig: je creëert diepte door met schaduwen te werken. Maar hoe maak je dit diepte effect zonder schaduwen? Een mogelijkheid is de helderheid van een element te verminderen. Hierdoor verdwijnt het element een beetje naar de achtergrond. De vuistregel in deze is: hoe belangrijker het element, hoe helderder het moet zijn. Zoals gezegd bereik in je Dark Mode contrastverschillen door met de doorzichtigheid van wit te spelen.

5. Gebruik wél puur wit.

   In tegenstelling tot zwart moet je juist wel puur wit gebruiken voor teksten. Om hiërarchie in je ontwerp te creëren kan je spelen met de doorzichtigheid van het wit. Eventueel is het ook mogelijk een aantal tinten grijs te gebruiken. Het nadeel is dat je bij elk component wat je wilt hergebruiken moet nadenken waar het in je ontwerp gaat voorkomen. Het component mag namelijk niet dezelfde achtergrondkleur hebben als de parent. In Light Mode los je dit soort probleempjes op met schaduw, maar die optie heb je dus niet in Dark Mode. Doorzichtig (puur) wit werkt daarentegen eigenlijk altijd.

6. Bied de gebruiker naast automatisch switchen ook de optie om handmatig te switchen.

   Automatisch switchen naar Dark Mode? Wij gebruiken veel TailwindCSS. TailwindCSS kan automatisch switchen tussen donkere- en lichte modus. Het werkt enorm gaaf maar zoals gezegd is donkere of lichte modus vaak persoonlijke voorkeur.