Makeover für Design02 von Matthias Scharwies, 18.09.2021 14:37

Makeover für Design02

Matthias Scharwies 18.09.2021 14:37 (Versionen)

Servus!

die fertigen Layouts wurden ursprünglich ja 2013 ^[1] im Rahmen eines Wettbewerbs von designen-lassen.de erstellt und sind ^[2] immer wieder überarbeitet worden:

2014 wurden sie mit den damals „neuen“ HTML5-Elementen versehen.
2018 wurden die verbliebenen floats auf Grid Layout umgestellt
2021 erhielt Design 01 eine „dunkle Seite …“

Design 02 "Man with Hat"

In der 2014er Version gibt es einen Style-Switcher für 6 verschiedene Farben, deren Kontraste teilweise nicht ausreichen. Icons sind teiltransparente Rastergrafiken, bei den die Akzentfarben durchscheinen.

Im 2021er Entwurf

ermöglichen custom properties mit mehreren Akzentfarben die Einhaltung der WCAG-Richtlinien.
- orange, gelb und green sollen Dark Mode werden, die anderen heller.
sind die Icons Inline-SVGs, die ebenfalls gestylt werden können.
sind die LoremIpsum-Texte durch Inhalt ersetzt worden.

Fragen

Der Header besteht aus mehreren Hintergründen, wobei im Original (oben) nur wenig Kontrast zwischen Mann und Hintergrund ist.

Die Mitte finde ich besser - ihr auch?

Unten finde ich zu bunt, wollte ich nur mal ausprobieren. Der wiederholende Verlauf ist von 2014 - im violetten und roten Theme habe ich einen „normalen“ Verlauf verwendet.

Habt ihr Vorschläge für den Header?

Die Icons sind nun Inline-SVGs und aus einem Guß.

Das gelbe Theme gefällt mir, da das Dark mode-Icon mit der blauen Akzentfarbe übereinstimmt.

Rot geht auch

Im Violet-Theme beißt sich imho das blau mit dem dunkelviolet (#9357b9). Deshalb würde ich das Dark Mode-Icon aber entweder mit einem sehr hellen violet (iih!) oder dunkel-violettem Hintergrund darstellen.