Ihr Browser ist veraltet
Um sicher im Internet zu surfen und moderne Websites richtig darzustellen, empfehlen wir Ihnen ein Update.
Hier auf Updates prüfen
schließen

21.01.2025

Das Design eines Dark-Mode - Guidelines

Das Design eines Dark-Mode - Guidelines

Der Dark Mode erfreut sich bei Nutzern seit ein paar Jahren immer größerer Beliebtheit und so setzen sich auch zunehmend mehr Designer und Entwickler mit dieser Thematik auseinander. Neben der Tatsache, dass er eine augenschonende Alternative für die Nutzung in dunklen Umgebungen darstellt, vermittelt er zudem eine moderne und ästhetische Wirkung. Die Gestaltung eines Dark Modes erfordert jedoch besondere Sorgfalt, um sowohl die Benutzerfreundlichkeit (UX) und Funktionalität als auch die visuelle Gestaltung (UI) optimal umzusetzen.

UX/UI-Aspekte beim Dark Mode Design

1. Lesbarkeit

Die Lesbarkeit spielt nicht nur im Dark Mode eine zentrale Rolle. Um einen guten Lesefluss zu gewährleisten, ist es essenziell, dass Texte und interaktive Elemente einen ausreichenden Kontrast zum Hintergrund aufweisen. Zur Sicherstellung der Einhaltung der WCAG-Richtlinien (Web Content Accessibility Guidelines) ist die Verwendung entsprechender Tools zu empfehlen.

2. Reines Schwarz meiden

Reines Schwarz – sprich #000000 – sollte vermieden werden, da auch dies für die Augen anstrengend sein kann. Stattdessen sollten verschiedene dunkle Grautöne verwendet werden, wie beispielsweise #121212 oder #1E1E1E.

3. Kontextuelle Anwendbarkeit

Der Dark Mode erweist sich insbesondere in dunklen Umgebungen als vorteilhaft, kann jedoch in hellen Umgebungen als unangenehm empfunden werden. Aus diesem Grund sollte den Nutzern die Möglichkeit geboten werden, zwischen Light Mode und Dark Mode zu wechseln.

4. Farben anpassen

Farben zeigen auf dunklen Hintergründen häufig eine andere Wirkung als auf hellen. Sie erscheinen oft satter oder heller. Um zu vermeiden, dass Akzentfarben zu grell wirken und die Harmonie des Designs beeinträchtigen, ist eine entsprechende Anpassung erforderlich.

Umsetzung eines Dark Modes in Figma

1. Farbvariablen erstellen

Figma bietet die Möglichkeit Farbpaletten und eigene Bibliotheken zu erstellen, um Farben, Texte und Effekte global zu organisieren und so die Einheitlichkeit zu gewährleisten. Hier ist es sinnvoll eine eigene Palette für den Dark Mode anzulegen, um später schnell zwischen den Modi wechseln zu können.

2. Komponenten erstellen

Das Erstellen von Komponenten vereinfacht und beschleunigt die Konzeption. So können wieder verwendbare Elemente wie Buttons, Karten oder Navigationselemente erstellt und mit wenigen Klicks überall eingefügt werden. So kann auch für jede Komponente eine Dark-Mode-Variante erstellt werden und in diesen somit auch im Prototype einfach zu wechseln.

3. Prototyping mit Light/Dark-Toggle

Durch die Komponenten können verschiedene Zustände wie Light und Dark Mode visuell dargestellt werden.

Hilfreiche Tools

Viele der Tools bieten zudem Plugins für Browser und Figma an, sodass die Arbeit mit ihnen weiter erleichtert wird.

Adobe Farbpaletten

  • Generiert Farbpaletten und hilft, Farben mit geringem Kontrast zu optimieren
  • Unterstützt das Testen von Farbkompatibilität für dunkle Designs

https://color.adobe.com/de/

Kontrast Checker

  • Prüft den Kontrast zwischen Text- und Hintergrundfarben
  • Zeigt an, ob die Farben den WCAG-Anforderungen entsprechen

https://accessibleweb.com/color-contrast-checker/

Coolors

  • Ein intuitiver Farbpaletten-Generator
  • Zeigt die Farben in verschiedenen Themes

https://coolors.co/

Realtime Colors

  • Eignet sich zum Testen einer Farbpalette

https://www.realtimecolors.com/

Schlussgedanke

Ein gut ausgestalteter und durchdachter Dark Mode ist mehr als nur eine optische Entscheidung. Er verbessert auch die Benutzerfreundlichkeit und Barrierefreiheit eines Produkts. Durch die Berücksichtigung grundlegender UX- und UI-Prinzipien sowie die Verwendung moderner Tools können ästhetisch ansprechende und funktionale Designs entwickelt werden. Eine sorgfältige Planung der Umsetzung mit einer klaren Strategie und ausgiebigen Tests sind für ein optimales Ergebnis unerlässlich. Es sollte zudem sichergestellt werden, dass der Dark Mode weiterhin die Markenidentität widerspiegelt und nicht zu stark von der ursprünglichen Designästhetik abweicht.

Kontakt

Für Ihre Fragen, Anregungen und Anmerkungen haben wir immer ein offenes Ohr.

Sie können uns natürlich auch telefonisch erreichen:
034298 / 208 478

Erfahrungen & Bewertungen zu norules-webdesign