Dark-Design auf dem Foto-Blog – Tipps und Erfahrungen

Veröffentlicht: 03. März 2022

Autor: Herr Tommi

Die Umstellung unseres Blogs auf das Dark-Design hat einige Reaktionen ausgelöst. Kritik, Lob und einige Fragen, worauf man bei dieser Art der Darstellung achten sollte. Wir möchten Euch hier ein paar Tipps geben, Erfahrungen zusammenfassen und Links zu interessanten Beiträgen im Netz liefern.

Dark-Design – Für welche Seiten ist das sinnvoll?

Für welche Art von Blogs oder Webseiten ist das Dark-Design überhaupt eine mögliche Variante? Nun, wir würden sehr textlastigen Blogs nicht dazu raten, komplett auf ein dunkles Design umzustellen. Viele Leser mögen keine langen Texte auf dunklem Hintergrund lesen, das wird oft als anstrengend empfunden. Wir sind aus diesem Grund den Kompromiss eingegangen, dass unsere Beiträge immer noch auf einem hellen Hintergrund zu lesen sind.

Für Landingspages, Startseiten, Übersichts- und Themenseiten ist das Dark-Design allerdings eine schöne Alternative zu den unzähligen All-White-Seiten. Auch für Fotobeiträge, mit keinem oder sehr wenig Text, ist das Dark-Design ein schöner Rahmen.

Und ihr solltet Nerven haben. Denn es wird bei einer Umstellung Kritik kommen. Damit müsst Ihr umgehen können. Denkt aber daran, dass dunkle Designs immer beliebter werden. Nicht umsonst bieten viele Smartphones und Tablets einen Dark-Modus an, der sehr viel genutzt wird. Und allen Unkenrufen zum Trotz, auch tagsüber, nicht nur beim Lesen am Abend im Bett. Wir haben zudem die Erfahrung gemacht, dass Kritik deutlich mehr von anderen Bloggern kam. Normale Leser des Blogs stehen dem Thema viel offener gegenüber. Übrigens, die Kritik, welche wir bekommen haben, war konstruktiv und hat auch noch zu Anpassungen geführt. An dieser Stelle einmal Danke für die offenen Worte.

Und man muss beim Dark-Design sagen, dass es sich dabei nicht um einen reinen Schwarz-Modus handelt. Es dürfen Farben genutzt werden. Genauso wie beim hellen Seiten muss nicht alles nur schwarz-weiß sein.

Eine Farbpalette ist Gold wert

Bei der ganzen Umstellung haben wir die Farbpalette unseres Avada-Themes lieben gelernt. Ohne diese Möglichkeit hätten wir die Umstellung vermutlich nicht gemacht. Alle Hintergründe und Texte per CSS zu formatieren ist machbar, keine Frage. Aber die Farbpalette ist doch um einiges komfortabler. Wir definieren dort die Farben, geben denen einen Namen und können diese Farben dann den Elementen zuordnen. Wollen wir dann eine Farbe ändern, ändern wir die Farbwerte nur in der Palette.

Avada Farbpalette

Aktuell haben wir dort 32 Farben definiert. Text- und Linkfarben, Farben für Hintergünde, Symbole, Störer, Boxen, Icons, Rahmen, Überschriften und so weiter.

Wichtig – Texte müssen lesbar sein

Eine notwendige Sache beim Dark-Design ist die Lesbarkeit von Texten. Diese Texte sollten nicht zu lang sein. Ganze Beiträge, wie diesen hier, würden wir eher nicht auf einem dunklen Hintergrund veröffentlichen. Und zur guten Lesbarkeit gehört ein hoher Kontrast. Ist dieser aber zu stark, wird das Lesen auch anstrengend.

Wir hatten zum Anfang die Texte alle in komplett weiß gehalten, mit 100% Deckkraft. Dazu war der Hintergrund ein grün, welches mit der Zeit immer dunkler wurde. Inzwischen sind wir bei sehr dunklen Grautönen im Hintergrund gelandet und die Texte sind weiß und gelb für Überschriften und Links. Zusätzlich spielen wir noch mit der Deckkraft der Texte.

  • Wichtige Texte, wie Überschriften oder Fettdruck haben eine Deckkraft von 87%
  • Zweitrangige Texte und Beschreibungstexte haben eine Deckkraft von 70%

Texte Deckkraft

Den Tipp haben wir aus einer super Anleitung zur Gestaltung von Dark-Themes von Chethan. Wir selber finden die Texte dadurch auch angenehmer zu lesen, als wenn sie 100% Deckkraft haben. Bei voller Deckkraft sind sie zu dominant, überstrahlen den Hintergrund und wirken dadurch unscharf.

Farben im Blog

Zu Beginn der Umstellung war unsere Idee, einen dunklen, farbigen Hintergrund zu haben. Im Laufe der letzten Tage wurde dieser aber immer dunkler und farbloser. Denn uns störte der Look, der doch sehr dominant war. Mit „helleren“ Farben wirkte es wie ein Bonbon, je dunkler es wurde, desto weniger stört die Farbe. Trotzdem sind wir jetzt bei zwei dunklen Grautönen als Hintergrund für die Inhalte gelandet.

  • Dunkles Dunkel: #212121
  • Helles Dunkel: #2d2d2d

Diese beiden Grautöne lassen sich gut unterscheiden, wenn sie direkt nebeneinander liegen.

Hintergrundfarben

Bei Auflistungen von verschiedenen Bereichen ist das schön, um die optisch ganz dezent voneinander abzugrenzen. Das genau war übrigens ein Problem bei den grünen Hintergründen. Da war eine Farbe dann immer zu dominant oder man konnte sie kaum auseinanderhalten.

Grün für Störer und Boxen

Die grünen Hintergründe werden nun im Bereich des Headers eingesetzt. Störer und Boxen, mit besonderen Inhalten, sind ebenfalls in Grün gehalten, um diese optisch hervorzuheben.

Störer in Grün

Zusätzlich haben wird diese Störer und auch die Bannerbilder auf den Themenseiten mit einem ausgefransten Rand versehen. Ja, über Geschmack lässt sich streiten, uns gefällt es.

Farbe für Links, Überschriften, Effekte

Zu Beginn hatten wir die Überschriften in den dunklen Bereich einfach weiß. Das war uns aber doch ein wenig zu farblos. Also musste zu dem dunklen Grün als Grundfarbe eine gute Farbe für hervorgehobene Elemente her. Naheliegend war erst mal der Gedanke an die Komplementärfarbe im Farbkreis. Also rot oder rot-violett. Ähm, nee, das ist nicht unsere Farbe.

Also haben wir uns verschiedene Farbpaletten und Generatoren im Netz mal angeschaut.

Farbwahl

Fündig geworden sind wir dann bei mycolor.space. Dort wurde uns dann Gelb, der Nachbar im Farbkreis angezeigt. Eine gute Idee, welche wir direkt übernommen haben. Das ist dann auch nicht allzu weit von dem Orange entfernt, welches wir in den hellen Bereichen für Links nutzen.

Wir haben den Gelbton noch ein wenig angepasst und setzen diesen nun für Überschriften, Links und Buttons ein. Eine etwas dunklere, ins Grüne verschobene Variante dient als Farbe für Trennlinien.

Typografie – die richtige Schriftart

Noch mal zurück zu den Texten, konkret zur Schriftart. Kleine, dünne Buchstaben sind auf dunklem Hintergrund keine gute Idee. Was auf einem weißen Hintergrund gut funktioniert, verschreckt bei einem Dark-Design die Leser. Beim Dark-Design sollten die Texte 2-3 Pixel größer sein. Zudem sollten die einzelnen Buchstaben und Ziffern nicht zu filigran oder zu dünn sein. Ebenso wird empfohlen, auf Serifen-Schriften zu verzichten.

Wir haben uns am Ende dafür entschieden, unsere geliebte Schriftart Barlow Semi Condensed weiterzunutzen. Allerdings haben wir die Standard-Texte von der Stärke 300 auf 400 umgestellt. Somit sind die Zeichen nun ein wenig dicker. Überschriften haben weiter die Stärke 700.

Optische Spielereien

Direkt nach der Umstellung hatten wir noch deutlich mehr optische Spielereien eingebaut. Das war dann aber doch To-Much. So haben wir die Hexagon-Darstellung der Vorschaubilder von Beiträgen wieder abgeschafft. Diese Darstellung dient nun nur noch für Bilder in Themenboxen.

Auch den Gebrauch von Trennlinien haben wir wieder zurückgeschraubt. Aktuell gibt es diese nur noch über dem Menü, über dem Footer und über dem Titelbereich in den Beiträgen.

Dafür ist an einigen Stellen ein ausgefranster Übergang zu Bildern oder Störer-Boxen dazu gekommen. Aber in begrenztem Umfang, da es sonst zu verspielt aussieht.

Fazit – Dark-Design, mal eben, das funktioniert nicht

Ihr seht, es gibt doch eine Menge Dinge, über die man sich bei der Umstellung auf ein Dark-Design Gedanken machen sollte. Mal eben umstellen, kann man machen, ist aber für professionelle Seiten sicherlich keine gute Idee. Bei einem Hobby-Blog, wie unserem, kann man das aber machen. Zumal unsere Stammleserinnen und Stammleser es eh gewohnt sind, dass sich hier alle naselang das Design verändert. Die würden sich vermutlich eher Gedanken machen, wenn hier mal zwei Wochen nichts neu aussieht.

Wenn Eurer Theme es ermöglicht, dann testet eine Umstellung erst mal an einer Dummy-Seite. Wir hatten vor der Umstellung in Avada eine Testseite für den Dark-Modus über den Layout-Builder erstellt. Damit haben wir dann die ersten Schritte getestet, bevor wir an die produktiven Seiten gegangen sind. Die ersten Versuche hätte auch wirklich keiner sehen wollen. Alternativ legt Euch einen Testblog auf einem lokalen Server oder einer Subdomain an. Direkt am lebenden Objekt zu operieren, ist keine wirklich gute Idee.

Weitere Links mit Tipps zum Design von dunklen Seiten und zum Farbdesign

Vielen Dank für Deinen Besuch

Wir freuen uns riesig über Kommentare unter dem Beitrag oder über das hemmungslose Teilen auf den Social Medias.

Schau auch mal in die anderen Themenbereiche auf dem Blog:

ReisenUSA-Reisen • Ruhrgebiet & NRWFotografie • Zoo&TiereFlugzeugfotografieBrettspiele • Gequatsche

Mehr Beiträge der Kategorie Gequatsche

  • DSGVO als Blogger
  • Todsünden beim Bloggen
  • Domainwechsel und ein neuer Name für den Blog – Erfahrungsbericht
  • Avada-Theme: Neuerung in Version 7.6
  • Jansens Pott im neuen Dark Design – dunkel und grün
  • Wir bloggen weiter. Wieso, weshalb und warum?

2 Kommentare

  1. Eddy 4. März 2022 um 8:10 - Antworten

    Das Design wohl grundsätzlich Geschmacksache. Also egal, wie die Website gestaltet ist: es wird immer diejenigen geben, die daran etwas auszusetzen haben. Mir persönlich gefällt das „Dark Design“, weil es stärkere Kontrast-Möglichkeiten bietet, als „klassisch helle“ Seiten. Gleichzeitig möchte ich gerne Text auf einem hellen Hintergrund lesen – das strengt mich weniger an und ich kann schneller lesen. Aber wie gesagt: alles Geschmacksache… :-)

  2. FinestFive 12. März 2022 um 16:54 - Antworten

    Interessanter Beitrag, danke fürs teilen der Eindrücke. Ich überlege auch schon länger das Design umzustellen. Nach ersten Tests stellt sich das leider als nicht so einfach heraus. Die Auswahl von Builder und auch Theme kann einen erhebliches Einfluss auf die flexibilität der Gestaltung haben.

    Euer neues Design finde ich übrigens gut gelungen! :)

Schreibe einen Kommentar