Jansens Pott im neuen Dark Design – dunkel und grün

Veröffentlicht: 19. Februar 2022

Autor: Thomas Jansen

Ihr habt es vielleicht bemerkt, unser Blog hat eine komplett neue Optik bekommen. Grün, dunkel, also Richtung Dark Design mit Kompromissen. Die Kompromisse sind wir eingegangen, da viele Seitenbesucher gerne Texte auf hellem Hintergrund lesen. Wie wir das am Ende umgesetzt haben, wollen wir hier kurz beschreiben.

Neues Dark Design – dunkel, grün, abseits vom All-White-Mainstream

Dark Design, also ein dunkles Design, auf vielen mobilen Geräten ist das mittlerweile einstellbar. Und gerade Thomas ist ein riesiger Fan des Dark Designs. Auf seinen Geräten ist das überall dauerhaft aktiviert, selbst am Notebook. Daher gingen wir schon länger mit der Idee schwanger, auch dem Blog ein dunkles Aussehen zu verleihen. Ganz besonders finden wir das im Bereich Fotodarstellung einfach schön. Bilder wirken auf einem dunklen Hintergrund einfach besser. Nicht umsonst sind sehr viele Fotografen-Seiten dunkel gestaltet.

Stimmungslage zum Dark Design

Im Vorfeld haben wir die Stimmung zum Dark-Design auf einem Blog mal abgeklopft. In einer Reiseblogger-Gruppe gab es zu fast 100 Prozent negatives Feedback. Ganz besonders, wenn es darum geht, längere Texte auf dunklem Hintergrund lesen zu müssen. In einer kleinen, bei Weitem nicht repräsentativen, Umfrage bei Twitter war die Meinung eher gespalten. Die Mehrheit empfand ein Dark Design als gut. Aber auch hier kam die Einschränkung, nicht für lange Texte.

Also, was tun?

Farbauswahl – Grün wird die Farbe des Blogs

Die Bedenkzeit haben wir genutzt, um zunächst über die primäre Farbe des Blogs nachzudenken. Seit dem Start ist das Blau gewesen, mal mehr, mal weniger, hier und da mit ein wenig Orange gekreuzt. Und ganz ehrlich? Wir konnten das Blau nicht mehr sehen.

Inspiriert durch ein paar andere Seiten, haben wir uns dann für die Farbe Grün entschieden. Und zwar ein dunkles, schmutziges Grün.

Der erste Schritt war es dann, erst mal das Blau vom Blog zu tilgen und durch die Grüntöne zu ersetzen. Dabei kam uns das neue, verbesserte Farbmanagement unseres Avada-Themes zu Hilfe. Hier können Farben definiert und benannt werden, welche man dann später an allen Elementen einfach auswählen kann. Ändert man nun die Farbe in der Übersicht, dann wirkt sich das sofort auf alle Elemente im Blog aus, wo die Farbe zugeordnet ist. Tolle Sache.

Kompromisse – Beiträge nicht alle im Dark Design

Die letzten Tage haben wir dann genutzt, um auf das Dark Design umzustellen. Allerdings sind wir hierbei einen Kompromiss eingegangen. Beiträge mit viel Text haben im Content-Bereich einen hellen Hintergrund. Somit können die Texte weiter gut und augenschonend gelesen werden. Beiträge, die nur oder größtenteils aus Fotos bestehen, bekommen einen dunklen Hintergrund.

Helles Design bei Texten
Dunkles Design im Fotoalbum

Gesteuert wird das über ein Tag. Zuerst hatten wir überlegt, es über die Kategorie zu filtern. Das kann uns später aber mal auf die Füße fallen, wenn wir einen Beitrag eigentlich lieber in einer anderen Kategorie als „Fotoalbum“ haben wollen. Daher haben wir uns für das Tag „dark“ entschieden. Das ist dahin gehend praktisch, weil wir die Schlagwörter sowieso nur zu Steuerung im Hintergrund nutzen. Die tauchen nirgendwo sichtbar auf dem Blog auf.

Im Avada Layout-Builder haben wir jetzt zwei Beitrags-Layouts, welche über das Tag gesteuert werden.

Layout-Builder Avada

Am Ende mussten wir nur einen Änderung per CSS machen. Die Überschriften werden auch im Dark Design in Dunkelgrün geschrieben. Das kann man im Content-Bereich des Layout-Builder nicht beeinflussen. Aber wir haben der Content-Box dann einfach die Klasse „dark-design“ gegeben und die Überschriften per CSS auf Weiß gesetzt.

Startseite, Themenseiten und Archive im Dark-Design

Als Nächstes kam die Startseite dran. Diese erscheint nun, wie alle Themenseiten, im Dark-Design. Alle wichtigen Informationen und Linkboxen haben dort aber eine Farbe als Kontrast. Dazu haben wir neue Masken-Funktion von Avada für Fotos genutzt. Titelbilder und Vorschaubilder werden jetzt in einem Sechseck angezeigt. Mit dieser Funktion kann jedes Foto in einer Maske, in einer beliebigen Form dargestellt werden. Dafür stehen im Standard einige zur Verfügung. Wer eine andere Form haben möchte, kann einfach eigene Masken hochladen. Einfach ein Bild hochladen, wo die Form des Bildes schwarz ist.

Fotomasken in Avada

Für die Anzeige von Blogbeiträgen auf der Startseite, den Themenseiten und der Archivseiten war das über die selbst definierten Post-Cards schnell erledigt.

Etwas mehr Aufwand waren die anderen Boxen auf den genannten Seiten, welche manuell eingebunden waren. Hier mussten wir die Masken manuell einmal zufügen. Die restliche Formatierung der Boxen, Hintergrund und den Farbbalken oben konnten wir über das Farbmanagement zentral steuern.

Nun mussten nur noch die Hintergründe der Archivseiten auf dunkel umgestellt werden und auf den Themenseiten haben den Wechsel von dunkel auf hell noch mal angepasst. Damit waren die Inhalte auf Dark Design so weit umgestellt.

Header und Menü

Beim Menü haben wir nur die Anpassung der Farben vorgenommen und den Menübereich ein wenig höher gemacht. Das wirkte im dunklen Design sonst arg gequetscht. Den Hintergrund bei den ausgeklappten Menüs haben wir hell gelassen. Das ist jetzt ein schöner Kontrast zum Inhalt, wenn die Menüs darüber liegen.

Die Schrift im Menü haben wir ein wenig vergrößert. Diese war vorher doch arg klein und schwer zu lesen. Jetzt passen aber nicht mehr alle Kategorien ins Menü. Naja, wir haben die nicht soooo wichtigen Kategorien nun unter „Mehr…“ zusammengefasst.

Wichtig – danach die Performance checken

Nach den Änderungen, und dem Umzug zum neuen Hoster, waren wir natürlich gespannt, was die Performance des Blogs sagt. Wir haben doch viele grafische Elemente eingebaut. Aber, Entwarnung. das sieht gut aus.

Performance nach Umzug und Neudesign

Das sieht doch brauchbar aus, damit können wir gut leben. Und wieder der Beweis, auch ein mächtiges Theme wie Avada bekommt man schnell, wenn man es nicht übertreibt und im Hintergrund ein gutes Caching und ein schneller Server arbeitet.

Arbeiten abgeschlossen und trotzdem nicht fertig

Wir haben die Arbeiten nun abgeschlossen. Aber richtig fertig sind wir noch nicht, wie immer. Ein paar Kleinigkeiten stören uns noch. Mit der Hintergrundfarbe der kleinen Boxen sind wir noch am Hadern. Vielleicht ändern wir diese erneut. Zudem  haben wir gestern versucht, im Header einen Förderturm einzublenden. Nicht als Logo, aber als Bezug zum Pott aus dem Pott. Leider macht das auf dem iPhone einige Probleme, wenn wir im Header Bilder einfügen. Da müssen wir mal forschen, was der Grund dafür ist.

Jetzt interessiert uns natürlich, wie gefällt Euch unser neues Design? Wir wissen, dass wir uns damit abseits vom Mainstream bewegen. Wir haben uns trotzdem bemüht, kein 90er Jahre Bernstein-Monitor-Design entstehen zu lassen. Schreibt uns gerne Eure Meinung in die Kommantare.

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 & NRWE-BikeZoosFotografieTierfotografieFlugzeugfotografieSpieleckeGequatsche

Noch mehr aus diese Kategorie:

  • Dark-Design auf dem Blog – Tipps und Erfahrungen
    Kategorien: BloggenVeröffentlicht am: 03. März 2022
  • Avada-Theme: Neuerung in Version 7.6
    Kategorien: BloggenVeröffentlicht am: 29. Dezember 2021
  • Alfahosting Webhosting V2 – Unser Umzug auf das neue Paket
    Kategorien: BloggenVeröffentlicht am: 19. November 2021
  • Domainwechsel und ein neuer Name für den Blog – Erfahrungsbericht
    Kategorien: BloggenVeröffentlicht am: 01. November 2021

3 Kommentare

  1. herbert 20. Februar 2022 um 23:32 - Antworten

    Hallo Thomas,
    mir sind letzte Woche schon die sechseckigen Titelbilder augefallen. Leider nicht mein Ding. Ich finde es beschneidet die Fotos und damit die Übersicht sehr stark. (Design schlägt Nutzen) Die Hintergrundfarbe ist leider auch nicht meins. Es errinert mich stark an Nato-Oliv der Bundeswehr. Aber jeder wie er will. Ich bin ja ehe der farbintivere Typ. Ich bleib euch treu, muss aber ehrlich gestehen wenn ich neu auf eueren Blog gestoßen wäre hätte ich warscheinlich wegen der dunklen farblosen Optik schneller weitergeblättert als bei einer etwas stimmungsvolleren Farbe.

    Gruß
    Herbert

    • Thomas Jansen 21. Februar 2022 um 9:06 - Antworten

      Moin Herbert,

      na, das Wichtigste ist doch, dass Du weiter hier vorbei kommst. :-)

      Du schreibst, die Seite wirkt dunkel und farblos. Ok, dunkel soll sie sein. Aber farblos? Welche Farbe hättest Du denn in so einem Fall genommen, das würde mich wirklich interessieren? Blau wollte ich nicht mehr nehmen. Andere Farben habe ich getestet, Dunkelrot, ein dunkles Gelb und noch ein paar weitere Farbtöne. Gefallen hat mir nichts davon. Auch ein dunkles Gau hatte ich überlegt, aber das war wirklich zu farblos.

      Das mit den Masken auf den Fotos soll auch dazu dienen, die optische Dominanz der Bilder auf den Übersichtsseiten einzudämmen. Da auf den Seiten recht viele Dinge verlinkt sind, mit Vorschaubildern, war diese Bilderflut zu überwältigend. Ob das aber dauerhaft so bleibt, also mit den Masken, kann ich noch nicht sagen.

      LG Thomas

  2. herbert 21. Februar 2022 um 22:46 - Antworten

    Hallo Thomas,

    Nimm mein Gefasel mit den Farben nicht so ernst. Das wichtigste ist doch der Inhalt und da bin in vielen Punkten eurer Meinung und habe ähnliche Interessen. Eine Farbe vorschlagen ist schwierig. Ein guter Freund von mir ist Malermeister. Der sagt immer bei fünf Farbvorschlägen gibt es 10 Meinungen.

    Gruß

    Herbert

Schreibe einen Kommentar