DogFatherGitandClaude Opus 5 95f54fd211 Die ganze Oberflaeche spricht jetzt dieselbe Sprache wie die Zeichen ...

"bring alles auf dieses niveau -- texte, kacheln, hinweise, titel,
buttons, einfach alles."

Berechtigt, und der Fehler war meiner: Die Kachelzeichen sind Koerper
geworden, alles andere blieb flach. Ein plastisches Zeichen neben einem
gemalten Knopf sieht nicht nach "teilweise gut" aus, sondern nach
Versehen.

Ab jetzt gelten fuer JEDES Bauteil dieselben drei Regeln -- dieselben,
nach denen auch die Zeichen gebaut sind:

  1. LICHT VON OBEN. Eine helle Kante an der Oberkante, in der Mitte am
     staerksten, nach aussen auslaufend. Echtes Licht auf einer Kante
     sieht so aus; eine durchgehend gleich helle Linie ist ein Strich.
  2. TIEFE NACH UNTEN. Ein versetzter Schatten -- wie bei jedem
     Gegenstand, der auf etwas liegt. Ohne ihn klebt ein Element auf der
     Seite, statt darauf zu liegen.
  3. VERLAUF STATT FLAECHE. Oben eine Spur heller als unten. Kaum zu
     sehen, aber ohne ihn bleibt jede Flaeche tot.

Und eine vierte, nur fuer Bedienbares:
  4. WAS MAN DRUECKT, GEHT HINEIN. Beim Klick kehrt sich die Woelbung um:
     Licht nach unten, Schatten nach oben. Das ist der Unterschied
     zwischen "es passiert etwas" und "ich habe etwas gedrueckt".

ANGEFASST -- beide Seiten, nicht nur eine:

  Workspace (gate.css, gilt auf jeder Seite)
    Knoepfe, Schritte, Abmelden, Stufenknoepfe, Suchknopf
    Eingabefelder, Auswahlfelder, Suchfeld -- die bekommen die Woelbung
      ABSICHTLICH ANDERSHERUM: Ein Feld, in das man schreibt, ist eine
      Mulde, kein Knopf. Licht unten, Schatten oben.
    Marken, Rollenabzeichen, Zaehler, Filterchips
    Hinweisflaechen, Notizen, Call-Raum, Codekasten
    Ueberschriften und Schilder

  Oeffentliche Seite (main.css)
    Knoepfe (btn, btn-primary, btn-outline) samt geschliffener Kante
    Marken und Abzeichen
    Ueberschriften

Der Textschatten aendert die FARBE nicht -- die Kontrastpruefung misst
weiter denselben Wert --, legt den Text aber auf die Seite, statt ihn in
den Hintergrund zu mischen.

Alles gedeckt. Diese Bauteile stehen zu Dutzenden auf einer Seite, und
was einzeln beeindruckt, blendet im Dutzend.

GEPRUEFT, zehn Laeufe, alle gruen: Buehne 38 (Textkontrast an echten
Bildpunkten), Rollen 97, Handy 50, Formulare 19, Grosscheck 15,
Lesbarkeit 14 -- dazu die vier Laeufe der oeffentlichen Seite
(Startseite, Design, Barrierefreiheit, Tastaturbedienung).

Co-Authored-By: Claude Opus 5 <[email protected]>

2026-09-03 07:20:47 +02:00

1016 KiB

1440x950px

Raw History