The Dark Mode rises: Warum die dunkle Bildschirm-Ansicht besonders kluges Design braucht

Hast du deinen Bildschirmhintergrund in Apps wie Facebook, Twitter, Google Maps oder Slack auch schon auf den Dark Mode umgestellt? Die Zahl der Nutzer:innen, die diese Ansicht wählen, steigt stetig. Die Texte sind hell eingefärbt, außen herum bleibt es dunkel. Die dunkle Variante sieht auf dem Bildschirm oft ästhetischer aus, schont die Augen und spart Akkuleistung. Aber Vorsicht, neben den Vorteilen gibt es aus Marketingsicht ein paar Nachteile: Der Dark Mode ist schnell aktiviert, aber genauso schnell kann er ein gutes Design zerschießen. Denn nicht immer funktioniert die schwarz-weiß-Umkehr automatisch – zum Beispiel macht so mancher Mail-Client aus einer klar strukturierten Mail einen unansehnlichen Flickenteppich. Wenn du aber bei der Webentwicklung auf einige Details achtest, punktet dein Content im „normalen“ und im dunklen Modus.

Erfolgsfaktor Testing

Der wichtigste Schritt ist seit der Einführung des Dark Mode das Testen. Denn was in der Theorie funktioniert, hakt manchmal in der Praxis und selbst das beste Design kann an den Besonderheiten einzelner Programme scheitern. Mail Clients oder Apps stellen die HTML-Inhalte im Dark Mode teils unterschiedlich dar. Das können nur systematische Praxistests verhindern. Deshalb solltest du deine Mails und andere betroffene Inhalte in verschiedenen Varianten und auf unterschiedlichen Geräten testen. Ist alles in Dark Mode invertiert worden oder nur ein Teil der Mail? Lassen sich die Texte in verschiedenen Mail-Clients einwandfrei lesen? Sind die Bilder, Logos und Buttons sichtbar? Zeigen sich unschöne Rahmen, die keine sein sollen? Begleitet das Testing den gesamten Erstellungsprozess, ist sichergestellt, dass alle Bausteine universell funktionieren.

Texte, die im Dunkeln überzeugen

Nichts wird so schnell weggeklickt wie der zwanzigste Newsletter im Postfach. Und das gilt ganz besonders dann, wenn das Design zerschossen ist oder Inhalte nicht richtig lesbar sind. Gleichzeitig sind besonders Mail-Clients eine Herausforderung für den Dark Mode, da jeder Anbieter die Umstellung auf den Dark Mode auf andere Weise löst. Es lohnt sich also, das Design der Mails dafür zu optimieren.

Die simple und universelle Lösung – die jedoch nicht jedem gefällt – ist eine reine Text-Mail. Hier wird schwarz auf weiß automatisch in weiß-schwarz umgewandelt und alles bleibt sauber lesbar. Plain-Text-Mails werden darüber hinaus als angenehm empfunden, sie sparen Daten und lassen sich in allen Programmen leicht öffnen. Sogar Spamfilter winken sie gern durch. Warum also die Mühe einer aufwendigen HTML-Mail für Normalansicht und Dark Mode machen? Nun ja, Logos und Farben transportieren einen Markenkern und besonders bei Produktmailings sind Bilder eigentlich unverzichtbar. Das Auge liest schließlich mit.

Es gibt einen Mittelweg, der zwar hauptsächlich auf Text setzt, aber auch Designelemente vorsieht: Erstelle den Header und das Profil in einer HTML-Ansicht, die auch im Dark Mode funktioniert (keine Sorge, wie das geht, erklären wir noch) und belasse den Textteil in der Plain-Text-Ansicht. So hast du die Kontrolle darüber, dass Header und Profil auch in Dark Mode gut funktionieren und musst nicht aufwendig die Inhalte neu anpassen – besonders wenn es sich um einen regelmäßigen Newsletter handelt.

Design-Basics für den Dark Mode

Bei der Gestaltung einzelner Elemente stellt sich immer zuerst die Frage des Hintergrundes, nämlich ob dieser Bilder oder Farbverläufe enthält. Da der Dark Mode nur Schriften umwandelt, bleiben Bilder in ihrer Farbigkeit bestehen. Stand vorher ein schwarzer Text auf einem hellen Bild, ist der Text oder ein Call-to-Action-Button im Dark Mode weiß und verschwindet vor seinem Hintergrund. Die fehlenden Kontraste machen wichtige Elemente der Mail unlesbar. Gestalte deshalb die Hintergründe per CSS so, dass der Dark Mode diese mit der Schrift umwandelt. Damit umgehst du das Problem des unsichtbaren Textes. Das Gleiche gilt übrigens auch für Farbverläufe. Auch hier können sonst die nötigen Kontraste schnell verschwinden.

Der Dark Mode bringt alles ans Licht – vor allem ungünstig ausgeschnittene Logos oder Produktbilder. Wirkt in der hellen Mailansicht dank weißer Bildhintergründe alles noch wie aus einem Guss, stechen im Dark Mode plötzlich ungleich große Ränder um die Assets herum ins Auge. Die saubere Mailansicht ist dahin. Es lohnt sich daher, sich die Mühe zu machen und alle Assets identisch zuzuschneiden. Ein transparenter Hintergrund um die Assets verhindert außerdem, dass weiße Flächen entstehen, wo keine sein sollen. 

Die Nutzer:innen nicht aus den Augen verlieren

Der Markenkern steht und fällt mit der richtigen Logo-Verwendung. Nutzt du dein Logo bereits in dunkler und freigestellter Variante, geht es im Dark Mode unter. Logos brauchen also wiederum nicht-transparente Hintergründe, um sich abzuheben. Die Lösung hierfür sind weiße Outlines oder Schattierungen rund um das Logo. Oder verwende es mit einem passenden Kontrast auf einem nicht-transparenten Hintergrund.

Für Marken und Unternehmen ist es heute unabdingbar, Kund:innen und andere Stakeholder bei jedem einzelnen Kontakt zu überzeugen. Du solltest also beim Erstellen und Testen von Inhalten stets hinterfragen, wann, wie und wo Leser:innen oder User sich mit deinen Inhalten beschäftigt. Nur dann kannst du ein wirkliches kluges Design entwerfen, das deinen Content überzeugend darstellt.