Ratgeber

Webdesign-Trend: Was taugt der Dark Mode für Websites?

Dark Mode extrem. (Bild: Shutterstock)

Der Dunkelmodus war eines der meistgewünschten Features auf Smartphones. Sollten wir nun auch unsere Websites im Dark Mode gestalten?

Was zunächst wie ein Sonderwunsch derer schien, deren Smartphones über unterdurchschnittliche Akkulaufzeiten verfügten, hat sich schnell zu einem massiven Trend verfestigt. Heute bieten sowohl Android wie iOS einen Dunkelmodus für ihr jeweiliges Mobilbetriebssystem. Apple ist schon den nächsten Schritt gegangen und hat seinem macOS ebenfalls einen Dark Mode verpasst.

Dem mit der Zeit gehenden Webdesigner stellt sich damit unweigerlich die Frage, ob er seinen Kunden wenigstens zusätzlich eine dunkel gehaltene Version der Website anbieten sollte. Ergäbe das Sinn und was wäre dabei zu beachten? In der Design-Community wird die Sinnhaftigkeit des Dunkelmodus für Websites durchaus kontrovers diskutiert.

Schauen wir zunächst auf die eher objektiven Vorteile, die eine dunkle Variante einer Website bringen kann und unter welchen Voraussetzungen das so ist.

Vorteil: Der Dunkelmodus kann Strom sparen

Der Grund für die Einführung eines dunklen System-Themas liegt in Smartphones und deren zunehmender Verbreitung. Die Bildschirme werden immer größer, die Prozessoren immer schneller, aber die Batterien nicht in gleichem Maße größer oder auch nur besser. Energiesparen lautet daher nach wie vor das Gebot der Stunde.

Und gerade bei den heute üblichen OLED-Bildschirmen lässt sich mit einem dunklen Betriebssystem-Thema Strom sparen. Schwarz bedeutet bei OLED, dass die LED aus bleibt, während Weiß bedeutet, dass die LED mit voller Kraft leuchtet, mal von Helligkeitsregelungen abgesehen. Fazit: Mehr Strom lässt sich nicht sparen als mit dieser radikalen Variante, nämlich Schwarz als Standardfarbe. Untersuchungen zeigen Sparpotenziale von bis zu 30 Prozent mit entsprechend verlängerten Laufzeiten.

Bei einem Nicht-OLED-Display geht die Rechnung indes nicht auf. Die verbrauchen immer die gleiche Menge an Strom, egal, welche Farbe dargestellt werden muss.

Übersetzt auf eine Website bedeutet das, dass der Designer Besucher beim Stromsparen unterstützen würde, wenn er ein dunkles Webdesign, möglichst mit hohem Schwarzanteil anbieten würde, sofern diese Besucher mit einem OLED-Display surfen. Man könnte auch sagen: Hmm.

Vorteil: Der Dunkelmodus ist (oft) besser für die Augen

Eine Lichtquelle direkt auf die Augen eines Menschen zu richten gilt nicht umsonst als beliebte Foltermethode. Helles Licht löst Stress aus und kann den Tag-Nacht-Rhythmus eines Menschen total durcheinander bringen. Deshalb integrieren die Smartphone- und vermehrt auch die Monitor-Hersteller sogenannte Blaulichtfilter in ihre Produkte.

Es – Achtung – leuchtet ein, dass das nicht gesund ist. (Foto: Shutterstock)

Die lassen das Licht wärmer erscheinen, indem sie den Anteil der Strahlung aus dem blauen Spektrum, die üblicherweise als kalt empfunden wird, reduzieren. So soll vor allem am Abend vermieden werden, dass die körpereigene Melatonin-Bildung gehemmt wird, die wiederum dafür sorgen soll, dass der Mensch die nötige Bettschwere empfindet und sich zur Ruhe begibt.

Studien rund um die Gefährlichkeit von Blaulicht gibt es viele. Manche schreiben von erhöhten Krebsrisiken, manche bringen Kurzsichtigkeit damit in Verbindung. Handfeste Belege gibt es bislang nicht. Dennoch wird jeder, der schon einmal einen Blaulichtfilter im Einsatz hatte, bestätigen, dass die Augen entspannter auf längere Leseeinsätze reagiert haben. Dabei gilt, je dunkler der Bildschirm, desto entspannter die Augen, vorausgesetzt, das Kontrastverhältnis zwischen Vorder- und Hintergrund bleibt gewahrt.

So lautet die Regel. Sie hat allerdings eine Ausnahme. Überall da, wo das Gerät in hellen Lichtbedingungen genutzt wird, also etwa im hellen Sonnenlicht, verkehrt sich der Effekt. Unter diesen Bedingungen erschwert der Dark Mode den Konsum der gebotenen Inhalte und erhöht sogar den Stress für die Augen.

Übersetzt auf eine Website bedeutet das, dass der Designer die Seitenbesucher mit einer dunklen Gestaltung beim gesunden Sehen unterstützen könnte. Dabei wird es allerdings sehr auf den Zweck der Website ankommen. Das schauen wir uns später noch genauer an.

Auf jeden Fall würden wir zwei Versionen einer Website brauchen. Der Dark Mode kann nur zusätzlich zum Einsatz kommen. Denn sicherlich wollen wir den Seitenbesuchern auch unter hellen Lichtbedingungen den Besuch der Website nicht erschweren.

Zwischenfazit: Es gibt objektive Vorteile, aber nicht für jeden

Die erwähnten Vorteile gelten im Wesentlichen für Smartphone-Nutzer, die sich ihre Geräte viel zu lange und viel zu dicht vor die Augen zu halten pflegen. Fun-Fact am Rande: Der durchschnittliche Smartphone-User scrollt in einem Jahr in etwa so weit, wie der Mount Everest hoch ist.

Die Besucher, die eine Website über einen großen Desktop-Monitor besuchen, werden in der Regel nicht im Dunkelmodus unterwegs sein und ohnehin das Browserfenster nicht voll aufgezogen haben. Hier konkurriert die Website also mit weiteren Fenstern um die Aufmerksamkeit des Betrachters. Der potenziell Zen-artige Beruhigungseffekt des Dark Mode kann so kaum einsetzen. Dennoch mag sich der Dunkelmodus unserer Website ganz gut neben dem dunklen Adobe Photoshop machen, dass der Besucher gleichzeitig geöffnet halten könnte.

Schauen wir nun also auf die subjektiven Vorteile, die der Dunkelmodus bei einer Website entfalten kann.

Vorteil: Der Dunkelmodus legt einen klaren Fokus

Wir kennen es alle vom Sehen in der Dunkelheit. Der beleuchtete Bereich wird zum Zentrum unserer Aufmerksamkeit, während alle anderen Bereiche mehr oder weniger stark mit dem Hintergrund verschmelzen. So funktioniert der Dark Mode.

Die Architekten von Moon Safari spielen mit dem Schlaglicht in ihrem dunklen Design. (Screenshot: t3n)

Unsere Inhalte stechen gleichsam aus der Dunkelheit hervor und können leichter identifiziert und aufgenommen werden. Mit einem passenden Inhaltekonzept lassen sich Websites so weit aufmerksamkeitsstärker gestalten. Die konventionelle Gestaltung mit einem hellen Hintergrund erfordert andere Strategien der Hervorhebung von Inhalten. Optisch ist im hellen Licht zunächst alles gleichberechtigt.

Semi-Vorteil: Der Dark Mode liegt im Trend

Ist euer Produkt oder das eures Auftraggebers besonders am modernen Zeitgeist orientiert, so sollte sicherlich schon aus Gründen der Trendigkeit über einen Dark Mode für die entsprechende Website nachgedacht werden. Immerhin könnt ihr so beweisen, dass der Seitenbetreiber mit der Zeit geht und modern ist.

Der E-Bike-Hersteller Vanmoof wechselt in seiner Produktpräsentation zwischen dem hellen und dem dunklen Modus hin und her. Wäre er besser beim hellen Modus geblieben. (Screenshot: t3n)

Nachdem wir die Vorteile herausgearbeitet haben, beschäftigen wir uns mit den Nachteilen des Dark Mode für Websites. Die stellen die sprichwörtliche Kehrseite der Medaille dar.

Nachteil: Der Dark Mode kann nur eine Option sein

Wenn die Zielgruppe des geplanten Design-Projekts in größerem Maße mit Smartphones oder Tablets surft, dann kann der Dark Mode eine sinnvolle Form der Darstellung sein. Da wir aber niemanden ausschließen wollen, zumindest keine offensichtlich großen Gruppen oder auch nur die Smartphone-Nutzer unter heller Sonneneinstrahlung, müssen wir den Dunkelmodus neben ein konventionelles Design stellen.

Für die Industriedesigner des Berliner Studios Maertens ist der Dark Mode integraler Bestandteil des Seitendesigns. Alle Inhaltselemente sind darauf optimiert. (Screenshot: t3n)

Wir gestalten also schlussendlich die Website zweimal. Einmal in einer dunklen Fassung, einmal in einer hellen. Das erhöht den Aufwand im Zweifel deutlich. „Wieso? Da nehme ich doch einfach zwei unterschiedliche Farbpaletten und aktiviere die nach dem Stand der Sonne oder per Klick“. So mag der pragmatische Designer denken. Das kann funktionieren.

Wenn der Inhalt jedoch aus einem intensiven Gemisch aus Texten, Bildern und Tabellen besteht, ist der Einsatz einer dunklen Farbpalette nicht so einfach. Manche Inhalte eignen sich besser für die vom Papier gewohnte Darstellung des Schwarz auf Weiß. Nicht jedes Logo wird sich zudem ohne Weiteres mit einer dunklen Farbpalette vertragen. Transparente PNG werden im Zweifel furchtbar aussehen.

Nachteil: Der Dark Mode schränkt das Design ein

Auf einem weißen Hintergrund können wir prinzipiell mit allen Farben arbeiten, die der Farbraum uns anbietet. Nutzen wir einen dunklen Hintergrund, sind wir auf helle Farben für den Vordergrund festgelegt. Die müssen zudem so kräftig sein, dass sie nicht vom Hintergrund förmlich verschluckt werden.

Die Wein- und Delikatessenverkäufer von Atlas können wunderbar als Negativbeispiel herhalten. (Screenshot: t3n)

Gerade bei Texten kann das zur Herausforderung werden. Die sollten auf dunklen Hintergründen ganz grundsätzlich mit etwas stabileren Strichstärken und klarer Geometrie versehen sein. Groteske funktionieren besser als Schriften mit Serifen. Die etwas spielerische Verwendung des Google-Font-Verzeichnisses verbietet sich an dieser Stelle komplett. Zu berücksichtigen ist dabei ebenso, dass Nutzer an Smartphones, anders als Monitor-Verwender, die Helligkeitswerte ihrer Geräte ständig verändern. Ihr müsst also dafür sorgen, dass eure Texte auch bei niedrigen Helligkeitswerten lesbar bleiben.

Nachteil: Der Dark Mode ist nicht für jede Website geeignet

Webdesign ist maximal Gebrauchskunst. Gestaltung für das Web verfolgt stets einen Zweck und ist, zumindest in der Regel, nicht sich selbst genug. Von daher ist das oberste Designprinzip stets die Zielerreichung.

Wenn die Website etwa das Ziel verfolgt, eine bestimmte Dienstleistung oder Produkt zu verkaufen, dann muss sich das Design auf dieses Ziel ausrichten. Damit verbieten sich viele gestalterische Spielzüge von selbst. In diesem Zusammenhang ist der Dark Mode als ein solcher Spielzug zu betrachten. Unterstützt der Dunkelmodus das Ziel der geplanten Website, sollte er ohnehin ernsthaft überlegt und mit dem Kunden diskutiert werden. Ist das nicht der Fall, sollte er nicht umgesetzt werden.

Wer bis hierhin dabei geblieben ist, wird nun vielleicht einwenden, wir hätten aber weiter oben die schiere Trendigkeit des Dark Mode als Vorteil hervorgehoben. Das ist auch richtig. In dem Falle, in dem eine Marke ihre eigene Trendigkeit dadurch unterstützen will, dass sie einen Designtrend für ihre Website umsetzen lässt, wird diese wahrgenommene Trendigkeit zu einem der Ziele des Designs für diese Seite. Und dann ist es kein Widerspruch mehr.

TLDNR: Der Dark Mode ist kein Selbstzweck

Der Dunkelmodus hat technische und physiologische Vorteile im Einsatz auf Smartphones. Diese Vorteile lassen sich nur ganz eingeschränkt auf das Webdesign übertragen. Hier müssen eigene Vorteile als Argumente für seinen Einsatz gefunden werden. Das kann der stärkere inhaltliche Fokus bei dunklen Designs oder die zur Schau gestellte Trendigkeit der Marke sein.

Wichtig bleibt das oberste Designprinzip der Zielerreichung. Unterstützt der Dark Mode die definierten Ziele einer Website nicht, sollte er nicht eingesetzt werden.

Passend dazu: 32 Tools, auf die Webdesigner für gute Farbkombinationen und Farbverläufe schwören

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
Zero
Zero

Ich mag es, wenn Websites einen Darkmode haben, insbesondere, wenn sie „preferred-color-scheme“ unterstützen und sich so automatisch der Einstellung des Betriebssystem anpassen. Denn wenn mein Betriebssystem Abends schön selbst auf Dunkelmodus schaltet, kann ich das plötzliche Blenden heller Webseiten beim Aufruf nicht ausstehen.

Für Desktop-Browser gibts zwar Extensions, die einen Dark Mode von Webseiten erzwingen können, aber das ist nicht immer 100%ig zuverlässig und schön. Trotzdem ist mir das immer noch lieber, als mir bei Dunkelheit die Augen weg zu brennen.
Und am mobilen Safari gibts solche Extensions leider gar nicht.

Ich hoffe, dieser „Trend“ setzt sehr weit durch im Web. Aber eben nicht (nur) mit Switch, sondern mit automatischer Anpassung ans Betriebssystem.

Antworten
webdesign köln

Webdesign und der Dark Mode… interessanter Gedanke. Aber auch mit dem letzten Satz auf den Punkt gebracht: „Wichtig bleibt das oberste Designprinzip der Zielerreichung. Unterstützt der Dark Mode die definierten Ziele einer Website nicht, sollte er nicht eingesetzt werden.“

Ich habe gerade interessehalber geschaut, was es kostet ein Smartphone aufzuladen.
Laut E.ON im Schnitt pro Aufladung 0,069 cent. Bei 30 % Einsparungen wie oben beschrieben, bedeutet das knapp 0,02 cent weniger. Tjooo :-) Dann kommt man mit dem Smartphone „10 Minuten“ länger durch den Tag aber Unternehmen dürften dann erst mal das doppelte zahlen für 2 Varianten der Webseite :-). Kann den Webdesignern ja nur recht sein :-).

Antworten
hauke-social-media

Super Artikel, ihr bringt es auf den Punkt. Es ist nicht empfehlenswert auf Zwang einen Dark Mode für sämtliche Websites einzurichten. Wenn es aber zur Zielumsetzung der Website passt, dann ist dagegen einzuwenden. Die Möglichkeit bei leseintensiven Seiten die Seite selbständig auf dunkel zu schalten bietet natürlich auch eine super User Experience.

Grüße hauke-social-media

Antworten
Oliver Schwarz
Oliver Schwarz

Guter Artikel! Danke. Wir haben es bei http://www.schwarzdesign.de mal umgesetzt. Optional. Ist kein Riesenaufwand, wenn man es von Anfang an auf dem Plan hat.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung