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 …“**](https://blog.selfhtml.org/2021/apr/30/dark-mode-die-dunkle-seite) # Design 02 "Man with Hat" In der [**2014er** Version](https://src.selfhtml.org/designs/design02/) 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**](http://svg.bplaced.net/design02/) * 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. [](/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png) 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](http://svg.bplaced.net/design02/index.html) habe ich einen „normalen“ Verlauf verwendet. Habt ihr Vorschläge für den Header? ---------------- Die Icons sind nun Inline-SVGs und aus einem Guß. [](/images/6919d0ea-183e-11ec-a80c-b42e9947ef30.png) 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. [](/images/c2ee8e1a-1845-11ec-8772-b42e9947ef30.jpg) Habt ihr Vorschläge? ------ Zum Vergleich: der erste Entwurf 2013: <http://selfhtml.apsel-mv.de/vorschau/vorschau-21/> Herzliche Grüße Matthias Scharwies [^1]: SELF-Blog: [Neue Layout-Templates für unsere Nutzer](https://blog.selfhtml.org/2013/feb/22/unterstuetzung-von-designenlassen-de) vom 22.02.2013 [^2]: SELF-Blog: [Weihnachtsbrief 2013](https://blog.selfhtml.org/2013/dec/22/1-weihnachtsbrief-2013) vom 22.12.2013

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 …“**](https://blog.selfhtml.org/2021/apr/30/dark-mode-die-dunkle-seite) # Design 02 "Man with Hat" In der [**2014er** Version](https://src.selfhtml.org/designs/design02/) 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**](http://svg.bplaced.net/design02/) * 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. [](/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png) 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](http://svg.bplaced.net/design02/index.html) habe ich einen „normalen“ Verlauf verwendet. Habt ihr Vorschläge für den Header? ---------------- Die Icons sind nun Inline-SVGs und aus einem Guß. [](/images/6919d0ea-183e-11ec-a80c-b42e9947ef30.png) 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. [](/images/c2ee8e1a-1845-11ec-8772-b42e9947ef30.jpg) Habt ihr Vorschläge? ------ Zum Vergleich: der erste Entwurf 2013: <http://selfhtml.apsel-mv.de/vorschau/vorschau-21/> Herzliche Grüße Matthias Scharwies -- [^1]: SELF-Blog: [Neue Layout-Templates für unsere Nutzer](https://blog.selfhtml.org/2013/feb/22/unterstuetzung-von-designenlassen-de) vom 22.02.2013 [^2]: SELF-Blog: [Weihnachtsbrief 2013](https://blog.selfhtml.org/2013/dec/22/1-weihnachtsbrief-2013) vom 22.12.2013

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 …“**](https://blog.selfhtml.org/2021/apr/30/dark-mode-die-dunkle-seite) # Design 02 "Man with Hat" In der [**2014er** Version](https://src.selfhtml.org/designs/design02/) 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**](http://svg.bplaced.net/design02/) * 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. [](/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png) Die Mitte finde ich besser - ihr auch? Unten finde ich zu bunt, wollte ich nur mal ausprobieren. Der wiederholende Verlauf ist vin 2914 - 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ß. [](/images/6919d0ea-183e-11ec-a80c-b42e9947ef30.png) 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. [](/images/c2ee8e1a-1845-11ec-8772-b42e9947ef30.jpg) Habt ihr Vorschläge? ------ Zum Vergleich: der erste Entwurf 2013: <http://selfhtml.apsel-mv.de/vorschau/vorschau-21/> Herzliche Grüße Matthias Scharwies -- [^1]: SELF-Blog: [Neue Layout-Templates für unsere Nutzer](https://blog.selfhtml.org/2013/feb/22/unterstuetzung-von-designenlassen-de) vom 22.02.2013 [^2]: SELF-Blog: [Weihnachtsbrief 2013](https://blog.selfhtml.org/2013/dec/22/1-weihnachtsbrief-2013) vom 22.12.2013

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 …“**](https://blog.selfhtml.org/2021/apr/30/dark-mode-die-dunkle-seite) # Design 02 "Man with Hat" In der [**2014er** Version](https://src.selfhtml.org/designs/design02/) 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**](http://svg.bplaced.net/design02/) * 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. [](/images/0947dbbc-183e-11ec-8cbe-b42e9947ef30.png) Die Mitte finde ich besser - ihr auch? Unten finde ich zu bunt, wollte ich nur mal ausprobieren. Der wiederholende Verlauf ist vin 2914 - im violetten und roeten 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ß. [](/images/6919d0ea-183e-11ec-a80c-b42e9947ef30.png) 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. [](/images/c2ee8e1a-1845-11ec-8772-b42e9947ef30.jpg) Habt ihr Vorschläge? ------ Zum Vergleich: der erste Entwurf 2013: <http://selfhtml.apsel-mv.de/vorschau/vorschau-21/> Herzliche Grüße Matthias Scharwies -- [^1]: SELF-Blog: [Neue Layout-Templates für unsere Nutzer](https://blog.selfhtml.org/2013/feb/22/unterstuetzung-von-designenlassen-de) vom 22.02.2013 [^2]: SELF-Blog: [Weihnachtsbrief 2013](https://blog.selfhtml.org/2013/dec/22/1-weihnachtsbrief-2013) vom 22.12.2013