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.
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.
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.
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.
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.
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.
Ü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.
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.
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.
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.
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.
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.
