7 handige tips voor het ontwerpen van een donkere gebruikersinterface

Donkere gebruikersinterfaces hebben aan populariteit gewonnen en veel applicaties bieden nu de mogelijkheid om te schakelen tussen een lichte en donkere modus. Het implementeren van een donkere gebruikersinterface kan echter een uitdagende taak zijn die zorgvuldige aandacht vereist voor de gebruikte kleuren, lettertypen, afbeeldingen en spatiëring.

Eventuele fouten in deze elementen kunnen resulteren in een slechte gebruikerservaring. De volgende tips zouden u moeten helpen bij het ontwerpen van uw eerste donkere gebruikersinterface.

1. Gebruik geen puur zwart

Vermijd bij het ontwerpen van een donkere gebruikersinterface het gebruik van puur zwarte achtergronden. Het is beter om een ​​donkere grijstint te gebruiken. Bijvoorbeeld, Het materiaalontwerpthema van Google beveelt de kleur #121212 aan.

Een zwarte achtergrond in combinatie met witte tekst kan te veel contrast hebben en vermoeide ogen veroorzaken. Donkere grijstinten kunnen in plaats daarvan gemakkelijk schaduwen, diepte en hoogte weergeven.

2. Zorg ervoor dat het tekstcontrast voldoet aan de WCAG 2.0-richtlijnen

Kies een kleurencombinatie die een goed contrast biedt, zodat de tekst leesbaar is. WCAG 2.0-richtlijnen stellen dat tekst of afbeeldingen van tekst een contrastverhouding van minimaal 4,5:1 moeten hebben en dat grote tekst (minstens 18 punten of 14 punten vet) een contrastverhouding van minimaal 3:1 moet hebben.

Er zijn verschillende hulpmiddelen om het kleurcontrast te controleren, waaronder de GOLF Chrome-extensie die ook controleert hoe toegankelijk de kleuren zijn.

3. Kies de juiste letterstijl

U moet ook rekening houden met de lettertypestijlen van uw tekst, inclusief de grootte, het gewicht en de regelhoogte. Als u op zoek bent naar lettertype-opties, vergeet dan niet dat die er zijn genoeg sites die gratis lettertypen aanbieden. Gebruik voor de lettergrootte waarden die voldoende zijn om ervoor te zorgen dat de tekst duidelijk en zichtbaar is op een donkere achtergrond.

Overweeg de volgende stijlen voor een webpagina:

lichaam {
font-familie: "KoerierNieuw", monospace;
lettertypegrootte: 12px;
lettertype dikte: 200;
lijnhoogte: 1; 
kleur: #333333;
}

De lettertypefamilie is moeilijk leesbaar, de lettergrootte is te klein en het lettertype is te licht. Deze stijlen maken de pagina moeilijk leesbaar, zoals u kunt zien op de onderstaande schermafbeelding.

Hieronder staan ​​enkele geschikte stijlen die u in plaats daarvan zou kunnen gebruiken.

lichaam {
font-familie: "Ariaal", schreefloos;
lettertypegrootte: 16px; 
lettertype dikte: 400; 
lijnhoogte: 1.5; 
kleur: #FFFFFF;
Achtergrond kleur: #121212; 
}

En hier is de resulterende pagina:

4. Vermijd verzadigde accentkleuren

Verzadigde kleuren kunnen te helder en wazig zijn op donkere achtergronden. Gebruik in plaats daarvan kleuren die minder intens en gedempt zijn. Zo creëer je een gebruikersinterface met zichtbare tekst.

Overweeg deze twee knopstijlen om dit te demonstreren:

/* Verzadigd blauw */
.btn-verzadigd-blauw {
Achtergrond kleur: #121212;
kleur: #0e0bf6;
}
/* Gedempt blauw */
.btn-gedempt-blauw {
Achtergrond kleur: #121212; 
kleur: #4c5ab3;
}

De verzadigde blauwe kleur is misschien te helder en moeilijk leesbaar op een donkere achtergrond, terwijl de gedempte blauwe kleur een goed contrast biedt en gemakkelijker te lezen is.

Een hulpmiddel als aannemelijk is handig voor het genereren van kleurencombinaties die voldoen aan de toegankelijkheidsrichtlijnen.

5. Gebruik negatieve ruimte om te voorkomen dat u een zware gebruikersinterface maakt

Een donker kleurenpalet kan de gebruikersinterface zwaar maken voor gebruikers. Bij correct gebruik kan negatieve ruimte u helpen belangrijke UI-elementen te markeren en tekst gemakkelijk te scannen maken. Voldoende tussenruimte kan het ontwerp ook schoner en moderner maken.

Neem bijvoorbeeld De bestemmingspagina van Apple. Ruimte tussen elementen zorgt ervoor dat de pagina er zeer modern en visueel interessant uitziet, waardoor belangrijke elementen opvallen.

6. Gebruik verschillende kleurschakeringen om diepte toe te voegen aan de gebruikersinterface

Bij het ontwerpen van lichte gebruikersinterfaces kunt u schaduwen gebruiken om diepte en hoogte aan elementen toe te voegen. Vanwege de donkere achtergronden zijn schaduwen echter soms moeilijk te zien in donkere gebruikersinterfaces.

U kunt diepte bereiken in een donkere gebruikersinterface door meerdere tinten donkere kleuren te gebruiken. In plaats van slechts één donkere achtergrond kunt u bijvoorbeeld lichtere tinten van dezelfde kleur toevoegen aan verschillende elementen zoals knoppen en modals.

7. Zorg ervoor dat uw afbeeldingen overeenkomen met de donkere gebruikersinterface

U hoeft niet dezelfde afbeeldingen te gebruiken voor de lichte modus en de donkere modus. U kunt de donkere modus gebruiken CSS-mediaquery's om afbeeldingen uit te schakelen die overeenkomen met de donkere gebruikersinterface telkens wanneer de gebruiker naar de donkere modus schakelt.

Als u bijvoorbeeld een specifiek achtergrondpatroon wilt toepassen op gedeelten van uw pagina in de donkere modus, kunt u de klassenaam .bgpattern gebruiken en de volgende code toevoegen aan uw stylesheet.

@media (geeft de voorkeur aan kleurenschema: donker) {
/* Pas deze stijl alleen toe in de donkere modus */
.bgpatroon {
achtergrond afbeelding: url("/donker.jpg");
 }
}

Deze mediaquery zorgt ervoor dat de achtergrondafbeelding waarnaar wordt verwezen alleen wordt weergegeven als het door de gebruiker gewenste kleurenschema donker is.

Wanneer gebruik je een donkere gebruikersinterface?

Donkere UI-ontwerpen zijn een geweldige manier om uw website of applicatie een moderne esthetiek te geven. Ze kunnen ook vermoeidheid van de ogen minimaliseren en de levensduur van de batterij verlengen. Donkere gebruikersinterfaces zijn echter niet geschikt voor elke toepassing en u moet altijd rekening houden met het merk en de gebruikersgroep.

Over het algemeen zijn donkere gebruikersinterfaces het meest geschikt voor merken die prioriteit geven aan luxe, prestige, minimalisme of mysterie. Ze kunnen ook een uitstekende keuze zijn voor dashboards en visualisatietools.