Ontwerp met donkere kleuren verwijst naar een stijl en aanpak voor het creëren van een visueel ontwerp dat berust op het gebruik van diepe, rijke kleurenschema's, meestal met een overwicht aan donkere tinten. Deze ontwerpstijl is de afgelopen jaren populair geworden en kan op verschillende gebieden worden gebruikt, waaronder webdesign, grafisch ontwerp, interieurontwerp en andere.

Dim de lichten, ontspan uw ogen en bespaar energie. De donkere modus is een van de meest populaire ontwerptrends, en merken van wereldklasse zoals WhatsApp, Instagram, Google, Facebook en Apple zijn al aan boord van de donkere modus-ontwerptrein gestapt.

Laten we eens kijken naar wat deze topmerken doen en hoe u een gebruikersinterface in de donkere modus aan uw eigen projecten kunt toevoegen. Je zult meer te weten komen voors en tegens donkere modus en eenvoudige donkere modus-ontwikkelingstips om ervoor te zorgen dat uw website- en app-ontwerpen er perfect uitzien en functioneren.

Gedrukt marketingmateriaal

Wat is de donkere modus? Ontwerp in donkere kleuren

De donkere modus is een gebruikersinterface (UI) bij weinig licht die een donkere achtergrondkleur als hoofdkleur gebruikt kleur - meestal zwart of grijstint. Dit is het tegenovergestelde van de standaard witte gebruikersinterface die ontwerpers al tientallen jaren gebruiken. Als reactie op onze toegenomen schermtijd hebben ontwikkelaars ontdekt dat interfaces met donkere thema's de vermoeidheid van de ogen helpen verminderen, vooral bij weinig licht of 's nachts. Minder vermoeide ogen betekende minder hoofdpijn en een betere werkervaring.

Instagram-app-ontwerp in donkere modus Ontwerp in donkere kleuren

Gebruikersinterface voor donkere modus van Instagram

 

WhatsApp op desktopapplicatieontwerp in donkere modus Ontwerp in donkere kleuren

WhatsApp in de donkere gebruikersinterface van het bureaublad via What's App

Google Fit app-ontwerp in de donkere modus

Gebruikersinterface van Google Fit in de donkere modus

 

Maar de donkere modus is niet echt iets nieuws.

Ontwikkeling van posters. 5 regels

Herinner je je de groene computercode die op een zwarte achtergrond regende in The Matrix? Dit was een knipoog naar de oorspronkelijke donkere modus: de ouderwetse monochrome monitoren van vroege computers.

Vroege homecomputer met groene tekst op zwart

Vroege homecomputers met groene tekst op zwart waren de donkere modus van OG.

 

Deze klassieke, donkere look raakte in de jaren '80 uit de mode en werd vervangen door zwarte tekst op een witte achtergrond, waarmee inkt op papier werd gesimuleerd. Ontwerp in donkere kleuren

Wat is videoreclame? Definitie, typen en trends

Dit was bijna dertig jaar de norm totdat de donkere modus in 7 terugkeerde in Windows Phone 2010. Nadat Google had bevestigd dat de donkere modus de batterij spaart, hebben ze de functie in 2018 aan hun Android-besturingssysteem toegevoegd. Een jaar later volgde Apple met de donkere modus op iOS en iPadOS.

Donkere modus en lichte modus in iOS 13-appontwerp

Donkere modus in iOS 13

Voordelen van het gebruik van de donkere modus. Ontwerp in donkere kleuren

De donkere modus is niet alleen prettiger voor de ogen (als het goed wordt gedaan), maar bespaart ook de levensduur van de batterij en kan zelfs gezonder zijn. Laten we eens kijken naar de praktische voordelen van de donkere modus ten opzichte van de lichte modus.

Vermindert vermoeide ogen

Je zou je ogen niet moeten voelen. Maar iedereen die lange tijd schermdata analyseert, weet dat je dit na een tijdje ook gaat doen. Computer Vision Syndroom (CVS) omvat oogpijn, wazig zien, dubbel zien, hoofdpijn, nek-/rugpijn en meer. Als het om grafieken en grafieken gaat, kan de donkere modus letterlijk de pijn helpen verminderen.

Applicatieontwerp in donkere modus Ontwerp in donkere kleuren

Dit groene logo past goed bij dit app-ontwerp met een donker thema.

 

Verhoogt de zichtbaarheid bij weinig licht

Als je slaapt en iemand doet een fel licht aan, dan krijg je hoofdpijn. Hetzelfde principe geldt voor mensen die laat in de avond of vroeg in de ochtend achter een computerscherm werken. De donkere modus vermindert deze schittering en maakt het gemakkelijker om inhoud te bekijken bij weinig licht.

Bespaart batterijvermogen

Sommige digitale gadgets met OLED-schermen kunnen zwarte pixels uitschakelen wanneer ze niet worden gebruikt. De donkere modus gebruikt een groter aantal zwarte pixels, waardoor het apparaat minder stroom verbruikt.

Geeft een emotionele lading

Veel UI-gebruikers in de donkere modus kiezen ervoor om energie- en gezondheidsredenen in plaats van esthetische redenen. De donkere modus herinnert hen eraan dat ze iets gezonders doen, wat hen een goed gevoel geeft, zoals het gevoel dat u krijgt als u uw herbruikbare spullen laadt plastic tas of een fles water.

Voorkomt ADD. Ontwerp in donkere kleuren

Ja soort van. Wit licht en kleuren hebben de neiging uw aandacht af te leiden, waardoor het moeilijk wordt een taak uit te voeren. Een gebruikersinterface in de donkere modus kan de focus verbeteren door uw concentratie te richten op de inhoudsgebieden van uw interface, waardoor die inhoud naar voren komt en de achtergrond vervaagt.

Nadelen van het gebruik van de donkere modus

Zoals alles heeft de donkere modus zijn nadelen. Laten we eens kijken naar de redenen waarom een ​​donker thema een nadeel kan zijn voor uw doeleinden.

Kan de emotionele band verminderen. Ontwerp in donkere kleuren

Helder kleuren kunnen levendige emoties oproepen. Als dit is waar je kijkers naar op zoek zijn, kan het donkerder maken van de kleuren een mentale barrière voor hen vormen. Ze zullen het moeilijker hebben om een ​​emotionele connectie te maken met een duister onderwerp. Als uw merk motiverend, inspirerend of spiritueel van aard is, kan de gebruikersinterface in de donkere modus een gok zijn. Hoewel felle kleuren sterke emoties kunnen oproepen, kan het tegenovergestelde waar zijn. Dus wie is je publiek? Verbrand ze niet als ze op zoek zijn naar een lift.

Comprimeert de ruimte

Kamers met donkere muren kunnen claustrofobisch aanvoelen. Op een apparaat kan de donkere modus op dezelfde manier werken. Als je een gevoel van ruimte probeert te creëren, kan een donkere interface de ruimte kleiner laten lijken.

Kleuren met een laag contrast kunnen moeilijk leesbaar zijn. Ontwerp in donkere kleuren

Als u kleuren en contrasten niet goed begrijpt website ontwikkeling of apps met een donker thema, dit kan ervoor zorgen dat tekst moeilijk leesbaar is, dus houd hier rekening mee wanneer u uw e-mail, app of website in de donkere modus ontwerpt.

Hoe de donkere modus in het ontwerp te gebruiken

Ontwerp in de donkere modus kan overal werken. Van mobiele apps tot smartwatches en tv-interfaces: deze designtrend kan uw merk vooruit helpen. Als je het goed doet, kan de donkere modus werken als gangbusters. Als u het verkeerd doet, kan uw ontwerp gebruikers onmiddellijk afschrikken. Hier zijn enkele basistips voor het ontwerpen van een donkere website of app-interface:

Wanneer moet u de donkere modus gebruiken? Ontwerp in donkere kleuren

Kies uw merkkleuren

Wanneer het bestaande kleurenpalet merk al compatibel met de donkere modus, de goden van de donkere modus glimlachen naar je.

App-ontwerp in de donkere modus

App-ontwerp in de donkere modus

 

Denk er twee keer over na om voor donker te kiezen als u het gevoel heeft dat u uw merk moet aanpassen aan de esthetiek. Als uw merk een breed scala aan kleuren moet gebruiken, overweeg dan een lichtere interface. Het volledige kleurenspectrum is moeilijk leesbaar tegen een donkere achtergrond.

Breng uw branche onder de aandacht. Ontwerp in donkere kleuren

De gebruikersinterface in de donkere modus is ook handig voor het verbeteren van specifieke industrieën. Merken die zich richten op het nachtleven en entertainment zijn bijvoorbeeld ideaal voor de donkere modus, omdat hun energierijke inhoud in het echte leven vaak gepaard gaat met donkere achtergronden.

Ga voor minimalistisch

Als uw ontwerpesthetiek al minimalistisch is met beperkte inhoud, is uw omgeving geschikt voor de donkere modus. In een situatie waarin tekst de hoofdinhoud is, kan een donkere interface het lezen moeilijk maken. Doorgaans vergroot de donkere modus de visuele rommel, waardoor een rommelig scherm nog chaotischer wordt.

Roep emoties op

Probeer je een specifieke emotionele reactie op te roepen? Hou je van mysterie of een beetje drama? Omdat lage zichtbaarheid nieuwsgierigheid creëert en de emotionele spanning verhoogt, kan de donkere modus het perfecte hulpmiddel zijn voor uw merk.

donker webontwerpthema Ontwerp in donkere kleuren

Donker webdesign

 

Statussymbool. Ontwerp in donkere kleuren

Als u een gevoel van status wilt creëren, kan de gebruikersinterface in de donkere modus een effectief hulpmiddel zijn. Donkerdere kleuren roepen emoties op die verband houden met luxe en rijkdom. Als je de aandacht wilt vestigen op het goede werk, overweeg dan een gebruikersinterface in de donkere modus.

Donker thema Website-ontwerp voor een luxe horlogemerk

Elegant, kwalitatief hoogstaand website-ontwerp met een donker thema

 

Best practices voor ontwerp in de donkere modus

Er zijn bepaalde processen die correct moeten werken bij het maken van een gebruikersinterface in de donkere modus. Je wilt tenslotte dat je product geweldig is, toch? Laten we alle vakjes van onze checklist met best practices voor de donkere modus aanvinken:

1. Ga niet te donker. Ontwerp in donkere kleuren

Boekuitgevers gebruiken geen puur wit papier omdat het contrast met zwarte inkt te groot is. Hierdoor gaat u scheel kijken en kan hoofdpijn ontstaan. Hetzelfde geldt voor digitale apparaten. Blijf weg van puur zwart. Het is lastig om naar een scherm met hoog contrast te kijken. Goede kleuren in de donkere modus zijn grijstinten gecombineerd met onverzadigde kleuren.

Ontwerp in donkere kleuren Ontwerp van een mobiel digitaal tijdschrift in de Dark Mode-applicatie

Donker app-ontwerp

 

2. Zorg voor het juiste contrast

De achtergrond in de donkere modus moet donker genoeg zijn om witte tekst weer te geven. Een suggestie van Google Material Design is om een ​​contrastniveau tussen tekst en achtergrond van minimaal 15,8:1 te gebruiken.

3. Deverzadig de kleuren. Ontwerp in donkere kleuren

Blijf weg van volledig verzadigde kleuren op een donkere achtergrond. Op donkere oppervlakken lijken tinten vaak te "trillen". Gebruik in plaats daarvan onverzadigde kleuren zoals pastelkleuren en gedempte kleuren - tinten met toegevoegde grijs- en wittinten.

Overweeg bovendien om het kleurenpalet van uw merk te wijzigen. De blauwe kleur van uw bedrijf kan op zwart anders zijn dan op wit. De kleuren in de donkere modus moeten vaak worden aangepast om dezelfde respons te produceren als in de lichte modus.

4. Gebruik de juiste kleuren ‘aan’

Welke kleur? Degene die bovenop elementen en belangrijke oppervlakken verschijnt. 'Aan'-kleuren worden doorgaans gebruikt voor letters. De standaardkleur van de gebruikersinterface in de donkere modus is puur wit (#FFFFFF). Gebruik dit niet. #FFFFFF lijkt te trillen als je het tegen een donkere achtergrond bekijkt. Kies een lichtgrijze kleur.

5. Draai niet zomaar om. Ontwerp in donkere kleuren

Als je vanuit de standaardmodus overschakelt naar de donkere modus, zijn er waarschijnlijk waardevolle visuele aanwijzingen in het oorspronkelijke thema. Draai niet alleen de kleuren om om een ​​donker thema te krijgen. Misschien verander je kleuren met een psychologisch doel in betekenisloze, gedempte kleuren. Kies bewust voor kleur.

6. Duik dieper

Hoe hoger de laag, hoe lichter deze moet zijn. Dit zal creëren visuele hiërarchie in de donkere modus, die gaat van de meest gebruikte elementen op uw display naar de minst gebruikte.

Visuele hiërarchie van de donkere modus

Lichtere kleuren bovenaan creëren een visuele hiërarchie

 

7. Ervaar en bied vrijheid. Ontwerp in donkere kleuren

Test zowel de donkere als de lichte versie van uw ontwerp. Experimenteer met elke stijl en breng dienovereenkomstig wijzigingen aan op basis van gebruikersfeedback. De voorkeuren van mensen kunnen immers onvoorspelbaar zijn, dus leg de last niet op uw gebruikers. Laat ze hun display overschakelen van de lichte naar de donkere modus. Dit geeft gebruikers controle over hun ervaring en zorgt ervoor dat ze zich persoonlijker voelen.

 

Uw assistent in zakelijke reclame- en drukkerij "АЗБУКА«