Gestaltung für helle und dunkle Designs

Sie haben es wahrscheinlich gespürt, ohne es zu benennen. Sie öffnen spät abends eine App und der Bildschirm strahlt weißes Licht in einen dunklen Raum, und Sie zucken zusammen und greifen nach dem Helligkeitsregler. Dann schalten Sie dieselbe App auf ihr dunkleres Aussehen um, und Ihre Schultern entspannen sich ein wenig. Dieser kleine Moment der Erleichterung ist der Grund, warum das Design für helle und dunkle Themen stillschweigend zu einer normalen Erwartung und nicht mehr zu einem cleveren Extra geworden ist. Die Leute möchten, dass die Website zu dem Raum passt, in dem sie sich befinden.

Dieser Leitfaden handelt davon, eine Website zu erstellen, die in beiden Modi bewusst wirkt, nicht eine, bei der der dunkle Modus ein hastiger nachträglicher Einfall mit grauem Text auf beinahe Schwarz ist. Wir werden behandeln, wie Themes tatsächlich unter der Oberfläche funktionieren, wie man Farben auswählt, die zwischen ihnen übersetzt werden, was mit Bildern und Schatten zu tun ist, welche Barrierefreiheitsfallen zu vermeiden sind und wie man das Ganze testet, ohne sein Wochenende zu verlieren. Sie müssen keinen Code schreiben, um dem zu folgen, sondern nur die Entscheidungen verstehen, die ein Theme fertig wirken lassen.

Was wir wirklich unter einem Thema verstehen

Ein Theme ist einfach eine koordinierte Reihe von Farben und Oberflächen, die die gesamte Website teilt. Ein helles Theme verwendet dunklen Text auf hellem Hintergrund. Ein dunkles Theme kehrt dies um und verwendet hellen Text auf dunklem Hintergrund. Der Trick ist, dass Sie nicht zwei unabhängige Websites entwerfen. Sie entwerfen ein System mit zwei Outfits, und das Ziel ist, dass beide Outfits so aussehen, als gehörten sie zur selben Marke.

Wenn Sie einen umfassenderen Einblick in die Argumente für die erstmalige Bereitstellung einer dunkleren Option wünschen, werden die Kompromisse gut in Websites im Dark Mode dargelegt. Dieser Artikel geht davon aus, dass Sie sich entschieden haben, beides zu unterstützen, und nun möchten, dass es poliert und nicht zusammengeschraubt wirkt.

Denken Sie in Tokens, nicht in festen Farben

Die nützlichste Idee beim Theming ist das Farbtokens. Anstatt zu sagen „Diese Überschrift ist dunkelblau“, sagen Sie „Diese Überschrift verwendet die Primärtextfarbe“, und dann definieren Sie, was dieses Token in jedem Theme bedeutet. Im hellen Modus könnte das Primärtext-Token fast schwarz sein, und im dunklen Modus wird es fast weiß. Da jede Überschrift auf dasselbe Token verweist, werden beim Wechsel des Themes alle auf einmal aktualisiert.

Dieser Benennungsansatz hält die beiden Themes synchron und erspart Ihnen die Jagd nach verstreuten Farben auf der gesamten Website. Sie benötigen typischerweise Tokens für Hintergründe, Oberflächen wie Karten, primären und sekundären Text, Rahmen und eine kleine Reihe von Akzent- und Statusfarben wie Erfolg und Fehler. Wenn diese Namen stimmen, besteht der Rest der Arbeit darin, zwei Werte pro Token einzugeben, anstatt jeden Bildschirm neu zu gestalten.

Eine Markenfarbe verankert lassen

Ihre primäre Markenfarbe, die Farbe, die die Menschen mit Ihnen verbinden, sollte in beiden Themen erkennbar bleiben. Sie benötigt möglicherweise eine etwas hellere oder gesättigtere Version im dunklen Modus, damit sie nicht verschwindet, aber die Familie sollte sich gleich anfühlen. Hier zahlt sich das umfassendere Denken in Schriftarten und Farben für Ihre Website und die markenspezifischen Leitlinien in der Marken-Typografie aus, denn eine konsistente Identität lässt beide Modi intentional wirken.

Der Dunkelmodus ist nicht nur ein invertierter Hellmodus

Der häufigste Fehler besteht darin, ein helles Design zu nehmen und jede Farbe buchstäblich zu invertieren. Rein weißer Text auf reinem Schwarz ist harsch und kann Text flimmern lassen oder das Gefühl vermitteln, als würde er vibrieren, ein Effekt, der als Halation bekannt ist. Echte dunkle Designs sind sanfter. Hintergründe sind normalerweise ein sehr dunkles Grau statt absolutes Schwarz, und Text ist ein Off-White statt blendendes Weiß. Der Kontrast ist immer noch stark, aber nicht strafend.

Oberflächen verhalten sich auch anders. Im hellen Modus trennen Sie eine Karte vom Hintergrund mit Schatten. Im dunklen Modus zeigen sich Schatten kaum, daher trennen Sie Oberflächen, indem Sie sie stattdessen etwas heller als den Hintergrund machen. Eine Karte, die über der Seite schwebt, ist ein bisschen heller, nicht dunkler. Dieses richtige Schichten macht eine dunkle Benutzeroberfläche so, dass sie Tiefe hat, anstatt flach auszusehen.

Beachten Sie Ihren Kontrast in beide Richtungen

Barrierefreiheit ist der Bereich, in dem viele duale Themen-Websites stillschweigend versagen. Ein Grau, das auf weißem Hintergrund perfekt lesbar ist, kann auf dunklem Hintergrund unleserlich werden, und umgekehrt. Sie müssen den Kontrast in jedem Theme separat überprüfen und nicht davon ausgehen, dass das Bestehen in einem Theme das Bestehen im anderen bedeutet. Weit verbreitete Richtlinien zur Barrierefreiheit legen Mindestkontrastverhältnisse zwischen Text und seinem Hintergrund fest, und deren Einhaltung in beiden Modi ist nicht verhandelbar, wenn Sie möchten, dass jeder Ihre Inhalte lesen kann.

Dies ist die gleiche Sorgfalt, die den Grundlagen der Web-Barrierefreiheit zugrunde liegt. Achten Sie besonders auf Sekundärtext, Platzhaltertext in Formularen und deaktivierte Zustände, die am wahrscheinlichsten unter den Schwellenwert fallen, wenn Sie die Themen wechseln.

Bilder, Logos und Icons sorgfältig behandeln

Fotos überstehen einen Themenwechsel meist, können aber auf einer dunklen Seite wie leuchtende Rechtecke wirken. Eine dezente Umrandung oder eine leichte Abdunklung sehr heller Bilder hilft ihnen, sich bequemer einzufügen. Logos und Icons benötigen mehr Aufmerksamkeit. Ein Logo, das für einen weißen Hintergrund entworfen wurde, kann auf einem dunklen Hintergrund verschwinden oder schwer wirken, daher benötigt man oft eine helle Variante des Logos für den dunklen Modus.

Icons, die als einfache Linien oder Formen gezeichnet sind, sind am einfachsten, da man sie mit einem Token einfärben kann, sodass sie sich automatisch neu einfärben. Detaillierte, vollfarbige Illustrationen sind schwieriger und benötigen manchmal eine zweite Version. Dies ist ein Grund, warum einfache, flexible Bilder besser altern, ein Thema, das in Auswahl von Website-Bildern behandelt wird.

Respektieren Sie die Wahl des Besuchers

Die meisten modernen Geräte ermöglichen es Benutzern, eine systemweite Präferenz für hell oder dunkel einzustellen. Eine gut aufgebaute Website kann diese Präferenz erkennen und im passenden Thema starten, sodass ein Besucher, der sein Telefon im dunklen Modus betreibt, automatisch auf Ihrer dunklen Website landet. Diese kleine Höflichkeit lässt die Website von der ersten Sekunde an aufmerksam wirken.

Es ist auch eine gute Praxis, einen manuellen Umschalter anzubieten, damit Benutzer die Standardeinstellung bei Bedarf überschreiben können, und ihre Wahl bei zukünftigen Besuchen zu speichern. Der Umschalter sollte leicht zu finden, aber nicht aufdringlich sein, oft in der Kopf- oder Fußzeile platziert. Gut gemacht, trägt dieser Respekt vor der Präferenz genau zu einem professionell aussehenden Website bei.

Beibehalten des stabilen Layouts über alle Themes hinweg

Das Wechseln von Themen sollte Farben und Oberflächen ändern, aber nicht die Anordnung der Elemente. Wenn Ihr dunkles Theme unterschiedliche Abstände oder Schriftgrößen verwendet, wirkt die Website wie zwei verschiedene Produkte. Verlassen Sie sich auf ein konsistentes Raster- und Layoutsystem, sodass die Struktur identisch bleibt und sich nur die Farbpalette ändert. Der Besucher sollte das Gefühl haben, die Lichter im selben Raum gedimmt zu haben, und nicht ein neues Gebäude betreten zu haben.

Beachten Sie die Zwischenzustände

Hover-Effekte, Fokusringe, ausgewählte Elemente und Ladezustände müssen in beiden Themes definiert werden. Diese werden leicht vergessen, weil sie nur bei Interaktion erscheinen, aber genau hier zeigt ein halbfertiges Theme seine Schwächen. Ein Button, der in Ruhe gut aussieht, aber im dunklen Modus einen unsichtbaren Hover-Zustand hat, untergräbt die Eleganz alles um ihn herum. Dieselbe Liebe zum Detail, die die visuelle Hierarchie verbessert, gilt auch für diese stillen Momente.

Lassen Sie kein zweites Theme die Website verlangsamen

Die Unterstützung von zwei Themes sollte das Gewicht Ihrer Website nicht verdoppeln. Ein häufiger Fehler besteht darin, zwei komplette Sätze von Bildern, Icons oder Stilen zu laden und diese jedem Besucher zu liefern, was die Seite stillschweigend aufbläht und sie träge macht. Der bessere Ansatz ist, so viel wie möglich zwischen den Themes zu teilen und nur die wenigen Dinge auszutauschen, die sich tatsächlich unterscheiden, wie eine Logo-Variante oder einige Farbwerte. Die Struktur, das Layout und die meisten Assets bleiben gleich.

Es lohnt sich auch, ein störendes Aufblitzen zu vermeiden, wenn die Seite zum ersten Mal geladen wird, wobei ein Besucher kurz das falsche Theme sieht, bevor das richtige einrastet. Die frühzeitige Behandlung der Präferenz, bevor die Seite gerendert wird, sorgt für ein reibungsloses Erlebnis. Theming als Teil der Gesamtgeschwindigkeit und nicht als nachträgliche Ergänzung zu behandeln, ist die gleiche Denkweise, die hinter einer Website steckt, die sich schnell und durchdacht anfühlt, und es zahlt sich aus, wenn Ihre Website im Laufe der Zeit wächst.

Testen Sie, wie es eine echte Person tun würde

Der einzige Weg zu wissen, ob Ihre Themes funktionieren, ist, sie tatsächlich zu verwenden. Sehen Sie sich jede wichtige Seite in beiden Modi an, auf einem Telefon und einem größeren Bildschirm, in einem hellen und einem gedämpften Raum. Achten Sie besonders auf Formulare, Tabellen, Warnungen und alle Stellen, an denen Farbe eine Bedeutung hat. Bitten Sie ein paar Leute, die nicht involviert waren, den Schalter umzulegen und Ihnen zu sagen, ob etwas kaputt aussieht oder schwer zu lesen ist.

Bauen Sie diese Überprüfung in Ihren breiteren Prozess ein, anstatt sie als letzten Ansturm zu behandeln. Wenn Sie eine Aktualisierung planen, passt Theming natürlich zu der Art zukunftsorientierten Denkens, das in Ihre Website zukunftssicher machen beschrieben wird. Und wenn Sie Hilfe dabei benötigen, beide Themes wirklich fertig wirken zu lassen, können Sie uns jederzeit kontaktieren.

Häufig gestellte Fragen

Referenzen

1. W3C. "Web Content Accessibility Guidelines (WCAG)." w3.org.
2. Nielsen Norman Group. "Dark Mode vs. Light Mode." nngroup.com.
3. Apple. "Human Interface Guidelines: Dark Mode." developer.apple.com.