Dimme das Licht, entspann deine Augen und spare deine Energie. Dark Mode Design ist einer der größten Designtrends und hochkarätige Marken wie WhatsApp, Instagram, Google, Facebook und Apple sind bereits auf den Dark-Mode-Zug aufgesprungen.

Illustration einer app im dark mode design
Dark Mode Illustration von Vladanland

Schauen wir uns mal an, was diese Top-Marken machen und wie du Dark Mode UI in deine eigenen Designs einbringen kannst. Du erfährst die Vor- und Nachteile des Dark Mode und die besten Techniken, wenn du für den Dark Mode designst, damit deine Web- und App-Designs perfekt funktionieren und aussehen.

Was ist Dark Mode?

Der Dark Mode ist eine Benutzeroberfläche (UI), bei der der Hintergrund vorwiegend in dunklen Farben gehalten ist – in der Regel Schwarz oder einem Grauton. Er ist die Abkehr von der sonst weißen UI, die jahrzehntelang von Designern genutzt wurde. Als Antwort auf die zunehmende Zeit, die wir am Bildschirm verbringen, haben Entwickler herausgefunden, dass dunkle Benutzeroberflächen die Augen schonen, besonders in Situationen mit wenig Umgebungslicht oder in der Nacht. Weniger Anstrengung für die Augen bedeutet weniger Kopfschmerzen und ein besseres Erlebnis.

Instagram dark mode app design
Instagram Dark Mode UI
Google Fit dark mode app design
Google Fit Dark Mode UI via The Verge
WhatsApp on desktop dark mode app design
WhatsApp auf dem Desktop in Dark Mode UI via What’s App

Für viele neu ist, dass der Dark Mode alles andere als neu ist.

Erinnerst du dich an den grünen Computer-Code, der in Matrix vor einem schwarzen Hintergrund regnete? Das war eine Anspielung an den ursprünglichen Dark Mode: die altmodischen, monochromen Monitore der ersten Computer.

Alter computer mit grünem text auf schwarzem hintergrund
Die ersten Heimcomputer mit grünem Text auf schwarzem Hintergrund sind der Ursprung des Dark Mode.

Dieser klassische, dunkle Look kam in den 80ern aus der Mode. Stattdessen sah man nun schwarzen Text auf weißem Hintergrund, was wie Tinte auf Papier aussehen sollte.

Dies war beinahe drei Jahrzehnte lang die Norm, bis der Dark Mode 2010 auf dem Windows 7 Phone sein Comeback gab. Als Google bestätigte, dass der Dark Mode Akku spart, fügten sie ihn 2018 ihrem Android-Betriebssystem hinzu. Ein Jahr später folgte Apple mit einem Dark Mode für iOS und iPad OS.

Dark mode vs. light mode in app design für iOS 13
Dark Mode in iOS 13 via 9to5Mac

Vorteile des Dark Mode

Der Dark Mode schont nicht nur die Augen (wenn er richtig gemacht wird), sondern spart auch Akku und kann sogar gesünder sein. Schauen wir uns mal die praktischen Vorteile an, die der Dark Mode gegenüber dem Light Mode hat.

Schont die Augen

Du solltest deine Augen nicht spüren. Aber jeder, der für längere Zeit Daten auf einem Bildschirm analysiert, weiß, dass man sie doch spürt. Das sogenannte Computer Vision Syndrome (CVS) äußert sich durch Augenschmerzen, verschwommene Sicht, Doppelbilder, Kopfschmerzen, Nacken- und Rückenschmerzen und mehr. Bei Tabellen und Diagrammen kann der Dark Mode helfen, den Schmerz zu reduzieren.

Dark mode app design
Dieses grüne Logo funktioniert sehr gut mit dem App-Design im Dark Mode. Design von Anish Daga.

Bessere Sichtbarkeit bei geringem Umgebungslicht

Wenn du schläfst und jemand das Licht anschaltet, bekommst du Kopfschmerzen. Dasselbe Prinzip greift, wenn Menschen spätabends oder frühmorgens am Computer arbeiten. Der Dark Mode reduziert dieses helle Licht und macht es leichter, Dinge in Umgebungen mit wenig Licht zu sehen.

Schont deinen Akku

Bestimmte Technologien, wie beispielsweise OLED-Bildschirme, können schwarze Pixel ausschalten, wenn sie nicht genutzt werden. Der Dark Mode nutzt vermehrt schwarze Pixel, wodurch das Gerät weniger Energie verbraucht.

Gibt einen emotionalen Schub

Viele Nutzer des Dark Mode nutzen ihn eher aus Gesundheitsgründen und weil er den Akku schont und weniger aus ästhetischen Gründen. Der Dark Mode erinnert sie daran, dass sie etwas tun, das ein klein wenig gesünder ist, was ein gutes Gefühl in ihnen hervorruft – ein bisschen so, wie wenn du deinen wiederverwendbaren Einkaufsbeutel nutzt.

Beugt ADHS vor

Nun…auf gewisse Weise zumindest. Weißes Licht und Farben lassen deine Aufmerksamkeit abdriften, wodurch es schwerer ist, sich zu konzentrieren. Der Dark Mode steigert die Konzentration, indem er sie auf die Inhalte deiner Benutzeroberfläche lenkt und der Content so hervorsticht, wohingegen der Hintergrund verschwindet.

Nachteile des Dark Mode

Wie alles im Leben hat auch der Dark Mode seine Nachteile. Schauen wir uns mal die Gründe an, weshalb der Dark Mode ein Nachteil für dich sein könnte.

Verringert die emotionale Bindung

Leuchtende Farben können heitere Emotionen erzeugen. Wenn es das ist, wonach deine Betrachter suchen, kann das Abdunkeln der Farben eine mentale Barriere für sie schaffen. Es wird ihnen schwerer fallen, eine emotionale Bindung zum Dark Mode aufzubauen. Wenn deine Marke motivierend, inspirierend oder spirituell ist, kann der Dark Mode ein Wagnis sein. Wenn leuchtende Farben heitere Emotionen erzeugen können, kann auch das Gegenteil der Fall sein. Wer also ist deine Zielgruppe? Enttäusche sie nicht.

Verkleinert den Raum

Räume mit dunklen Wänden können sich klaustrophobisch anfühlen. Auf einem Gerät kann der Dark Mode denselben Effekt haben. Wenn du ein Raumgefühl schaffen möchtest, kann der Dark Mode dazu führen, dass der Raum sich kleiner anfühlt.

Kontrastarme Farben können schwer lesbar sein

Wenn du deine Farben und Kontraste beim Designen eines Dark Mode für eine Website oder App nicht richtig hinbekommst, kann dadurch der Text schwerer zu lesen sein, also behalte dies im Hinterkopf, wenn du eine E-Mail, App oder ein Webdesign im Dark Mode erstellst.

Wie du den Dark Mode im Design nutzt

Dark Mode Design kann überall funktionieren. Von Apps über Smartwatches bis hin zu Fernsehern. Dieser Designtrend kann deine Marke voranbringen. Wenn du es richtig anstellst, kann der Dark Mode sogar richtig erfolgreich sein. Wenn du es allerdings falsch machst, könnte dein Design Nutzer sofort abschrecken. Hier sind ein paar Tipps, wenn du eine Website oder App im Dark Mode designst.

Wann du den Dark Mode nutzt

Wenn er zu deinen Markenfarben passt

Wenn die Farbpalette deiner Marke bereits mit dem Dark Mode kompatibel ist, hast du Glück gehabt.

Dark mode app design
Dark Mode App-Design von velinsi.

Überlege es dir zweimal, wenn du scheinbar deine ganze Marke umkrempeln musst, um den Dark Mode nutzen zu können. Wenn deine Marke auf ein breites Farbspektrum angewiesen ist, ziehe ein helleres UI in Erwägung. Nicht das komplette Farbspektrum liest sich gut auf dunklen Hintergründen.

Wenn du deine Branche unterstreichen willst

Der Dark Mode ist auch nützlich, um bestimmte Branchen zu betonen. Marken beispielsweise, deren Fokus auf dem Nachtleben liegt, eignen sich perfekt für den Dark Mode, da ihr energiegeladener Content häufig mit einem dunklen Hintergrund kombiniert wird.

Wenn du minimalistisch wirken willst

Wenn deine Designästhetik bereits minimalistisch ist, hast du gute Voraussetzungen für den Dark Mode. In Situationen, in denen der Content hauptsächlich aus Text besteht, kann ein dunkles UI zu Problemen mit der Lesbarkeit führen. In der Regel verstärkt der Dark Mode visuelle Unordnung, wodurch ein optisch überfrachteter Bildschirm noch chaotischer wird.

Wenn du Emotionen erzeugen möchtest

Versuchst du, eine bestimmte emotionale Reaktion zu erzeugen? Beispielsweise eine geheimnisvolle Stimmung oder ein bisschen Drama? Da schlechte Sichtbarkeit Neugier weckt und emotionale Spannung verstärkt, könnte der Dark Mode perfekt für deine Marke sein.

dark mode web design
Dark Mode Webdesign von novidraft

Als Statussymbol

Wenn du ein Gefühl von Status erzeugen möchtest, kann der Dark Mode ein effektives Tool sein. Dunklere Farben wecken Emotionen, die mit Luxus und Wohlstand assoziiert werden. Wenn du Aufmerksamkeit auf feinste Handarbeit lenken möchtest, denke über den Dark Mode nach.

Dark mode Webdesign für Luxusuhrenmarke
Ein elegantes, hochwertiges dunkles Webdesign von Aneley.

Die besten Techniken für Dark Mode Design

Es gibt bestimmte Prozesse, die bei der Erstellung eines UI im Dark Mode richtig funktionieren müssen. Schließlich soll dein Ergebnis richtig gut werden, nicht wahr?

1. Nicht zu dunkel

Verleger nutzen kein rein weißes Papier, weil der Kontrast zur schwarzen Druckerfarbe zu stark ist. Dadurch würdest du die Augen zusammenkneifen und dies kann zu Kopfschmerzen führen. Dasselbe gilt für digitale Geräte. Halte dich fern von reinem Schwarz. Es strengt die Augen an, auf einen Bildschirm mit hohem Kontrast zu schauen. Gute Farben für den Dark Mode sind Grautöne in Kombination mit blassen Farben.

Dark mode app design für ein digitales magazin
App-Design im Dark Mode von Neolist.

2. Der richtige Kontrast

Dark Mode Hintergründe müssen dunkel genug sein, um weißen Text darstellen zu können. Die Empfehlung aus den Richtlinien zu Googles Material Design lautet, ein Kontrastverhältnis von Text zu Hintergrund von mindestens 15,8:1.

3. Entsättigte Farben

Nutze auf dunklen Hintergründen keine stark gesättigten Farben. Die Schatten scheinen oftmals zu „vibrieren“, wenn sie auf dunklen Oberflächen betrachtet werden. Verwende stattdessen entsättigte Farben wie Pastelltöne und gedeckte Farben – Farbtöne, denen Grau und Weiß beigemischt ist.

Denke auch darüber nach, die Farbpalette deiner Marke anzupassen. Das Blau deines Unternehmens könnte sich auf Schwarz anders lesen als auf Weiß. Farben müssen im Dark Mode oft angepasst werden, um dieselben Reaktionen auszulösen, die sie im Light Mode auslösen.

via Sergey Zolotnikov

4. Nutze die richtigen „On Colors“

Was sind „On Colors“? Das sind Farben, die auf Elementen und wichtigen Oberflächen erscheinen. Sie werden in der Regel für Schriftzüge verwendet. Die Standardfarbe des Dark Mode ist reines Weiß (#FFFFFF). Das solltest du nicht nutzen. #FFFFFF wirkt auf dunklen Hintergründen, als würde es vibrieren. Nimm stattdessen ein Hellgrau.

5. Dreh nicht einfach alles um

Wenn du vom Standardmodus auf den Dark Mode wechselst, gibt es wahrscheinlich ein paar wertvolle visuelle Anhaltspunkte im ursprünglichen Theme. Drehe die Farben nicht einfach um, um dein dunkles Theme zu erstellen. Es könnte sein, dass du Farben, die einen psychologischen Zweck erfüllt haben, in bedeutungslose, gedeckte Farben umwandelst. Gehe bei der Wahl deiner Farben bewusst vor.

6. Setz auf Tiefe

Je höher eine Ebene ist, umso heller sollte sie sein. Dies wird eine visuelle Hierarchie im Dark Mode erzeugen, die von den meistgenutzten Elementen zu den am wenigsten genutzten Elementen geht.

Dark mode visuelle hierarchie
Helle Farben oben erzeugen eine visuelle Hierarchie. Via Sublime Text.

7. Teste und biete Freiheit

Teste sowohl die Dark Mode- als auch die Light Mode-Version. Experimentiere mit beiden Stilen und nimm die entsprechenden Änderungen basierend auf dem Feedback der Nutzer vor. Letzten Endes sind die Vorlieben der Leute unvorhersehbar, also zwinge deinen Nutzern nichts auf. Lass sie zwischen Light Mode und Dark Mode wechseln. Dies gibt ihnen die Chance, Freiheit und Kontrolle über ihr eigenes Erlebnis zu haben.

Mach es dunkel!

Die Dark-Mode-Revolution geht gerade erst los. Daher ist jetzt der perfekte Moment, auf ein dunkles Theme zu setzen und kreativ zu sein. Mach dich bereit, ein Vorreiter des Dark Mode zu werden!

Du möchtest mehr über Webdesign erfahren? Schau dir unseren Artikel dazu an, wie man eine Website kreiert.

Du möchtest das perfekte Design im Dark Mode für deine Marke?
Uunsere Designer kreieren etwas Einzigartiges für dich.