Makeover für Design02

[Matthias Scharwies]

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.

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 vom 22.02.2013 ↩︎

2. SELF-Blog: Weihnachtsbrief 2013 vom 22.12.2013 ↩︎

[kai345]

printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

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?

Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. Vielleicht spiele ich später™ mal ein wenig damit herum. Die Wahrscheinlichkeit, daß ich es schlichtweg vergesse, liegt zur Zeit allerdings sehr sehr hoch.

Der blau-graue Text im violetten Beispiel ist schlicht unlesbar; der kleine Weiße ist schon schwierig

/K

[Matthias Scharwies]

Servus!

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?

Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. ...

Der blau-graue Text im violetten Beispiel ist schlicht unlesbar; der kleine Weiße ist schon schwierig

Du meinst nav ul a? Ich würde gerne erst einmal den Hintergund festlegen.

Im blauen, und roten Theme habe ich jetzt einen einfachen Verlauf - ist das so ok?

Im violetten Theme gibt es einen Verlauf von dunkel und hellviolett; auf Vorschlag von Gunnar.

In den Dark Mode-Themes gelb, grün, und ornage weiß ich noch nicht, wie ich's machen soll - im Grünen habe ich den Verlauf nicht nur im Header - gut so?

Gelb ohne Verlauf ist mir zu dunkel.

Orange hat eben noch den repeating-linear-gradient() - einmal lassen oder es lieber einheitlich darstellen?

Navigation

Ja. Allerdings ist der dunkel-orange Text für mich schon kaum mehr lesbar. Diese Farbe sollte ersetzt werden. ...

Im blauen Theme habe ich die Navigation jetzt mit hintergund versehen:

nav a {
  background: var(--accentColor1);
  color: var(--backgroundColor2);
  text-decoration: none;
  display: inline-block;
	font-size: 1.2em;
  padding: 0.5em;
}

nav a:hover,
nav a:focus {
  background: var(--backgroundColor2);
  color: var(--accentColor1);
}

Wie sieht das aus? Soll ich das in allen light Themes blau, rot und violett, evtl auch orange so machen?

Gelb und grün haben genug Kontrast, da könnte man es so lassen?

Linkfarbe(n)

Im blauen und violetten Theme sind Links in Akzentfarbe, das passt vom kontrast, gelb auf Lila hat sallerdings nur 2.34:1 - zu wenig - habt ihr Ideen?

In Rot geht's grad noch, aber skyblue auf rot ist auch schon zu wenig.

Grün auf grau und blau auf Orange haben beide viel zu wenig - Vorschläge anyone?

---

Das Beispiel soll die verschiedenen Akzentfarben vorstellen, aber eben auch, wie man sie erfolgreich einsetzt!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich hab in deinem Posting das Markdown für die Fußnoten korrigiert.

Die Anzeige der Versions-Historie ist buggy:

• Meine Änderungen sind die mit „bearbeitet von Matthias Scharwies 2021-09-18 14:37“ betitelten.
• „bearbeitet von Gunnar Bittersmann 2021-09-18 14:58“ war ich nicht.

Ticket angelegt.

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Ich hab in deinem Posting das Markdown für die Fußnoten korrigiert.

danke, aber was hast du gemacht? Hatte erfolglos runmprobiert.

Die Anzeige der Versions-Historie ist buggy:

• Meine Änderungen sind die mit „bearbeitet von Matthias Scharwies 2021-09-18 14:37“ betitelten.
• „bearbeitet von Gunnar Bittersmann 2021-09-18 14:58“ war ich nicht.

Ticket angelegt.

danke!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

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

Das kann ja durchaus seinen Charme haben – je nach Kontext. Worauf kommt es an: auf die Umrisse der Person oder die Umrisse des Gesichts?

Die Mitte finde ich besser - ihr auch?

Nein. Der Unteschied zwischen hellgrau und dunkelgrau ist zu groß. Zu unruhig, um Schrift draufzutun.

Unten finde ich zu bunt

Augenkrebs.

Warum sollen es überhaupt Streifen sein? „Schrägstreifen wirken kränklich.“ —Otto

Der Gradient bei „violett“ hat doch was Schönes. Warum den nicht überall?

Bei violett wurde die Hintergrundfarbe für die Ansicht auf schmalen Viewports vergessen? (Fast hätte ich „Mobilansicht“ gesagt. 😉)

Dass der Farbkontrast für schwarze Schrift nicht ausreicht, ist auch bei „blau“ der Fall.

Links ist Platz, rechts kleben die Boxen am Rand? Oben darf es auch ein bisschen mehr sein.

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

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

Das kann ja durchaus seinen Charme haben – je nach Kontext. Worauf kommt es an: auf die Umrisse der Person oder die Umrisse des Gesichts?

Gute Frage, so habe ich es noch gar nicht geshen!

Unten finde ich zu bunt

Augenkrebs.

Warum sollen es überhaupt Streifen sein? „Schrägstreifen wirken kränklich.“ —Otto

keine Ahnung. Im Original waren keine Streifen, wsl. haben Matthias Apsel und ich / oder nur ich) die reingetan, weil's eben geht; bzw. um drei Hintergründe zu demonstrieren.

Der Gradient bei „violett“ hat doch was Schönes. Warum den nicht überall?

Weil ich bis eben nur je einen Farbton hatte. Auch eine accentColor2 hatte ich, entgegen des Original-Entwurfs, „vergessen“.

Schaut mal nur den header-Hintergrund an - sieht das gut aus? Die Textfarbe würde ich dann später anpassen

Bei violett wurde die Hintergrundfarbe für die Ansicht auf schmalen Viewports vergessen? (Fast hätte ich „Mobilansicht“ gesagt. 😉)

Ja, da muss alles überprüft werden!

Dass der Farbkontrast für schwarze Schrift nicht ausreicht, ist auch bei „blau“ der Fall.

Ja, ich will aber erst mal die Hintergu+´ünde, bzw. evtl einen zweiten Farbton ausgehend von der Akzentfarbe finden, dann reparier ich die Textfarben.

Links ist Platz, rechts kleben die Boxen am Rand? Oben darf es auch ein bisschen mehr sein.

95% + %5 margin = 105% ? Gefixt!

😷 LLAP

Herzliche Grüße

Matthias Scharwies