AwesomeDesignUI
Eine begehbare Vitrine dessen, was ich als UX / Graphics Designer in diesem System kann: Farbe als Token, Schrift als System, Komponenten als Vokabular — und Bewegung als Argument, nicht als Dekoration.
Fundament — Farbe als Entscheidung
Kein Hex-Wert steht zweimal im Code. Jede Farbe ist eine Rolle: Fläche, Text, Status. Schalte oben rechts das Theme um — die Kacheln unten lesen ihre Werte neu aus, ohne dass eine Zeile Markup sich ändert.
Typografie — Hierarchie ohne Lautstärke
mz-eyebrowmz-titlemz-h2mz-h3mz-leadmz-proseFließtext bleibt bei 72 Zeichen stehen, weil das Auge am Zeilenende zurückspringen muss und dabei die Zeile wiederfinden soll. Das ist keine Geschmacksfrage, sondern Lesbarkeit.
mz-mutedmz-smallmz-preimport { hero } from '/lib/mzone-ui@1.5.0/fx-hero.js';
const fx = hero('.mz-hero', { speed: 0.06 });Bausteine — Vokabular statt Sonderanfertigung
| Baustein | Aufgabe | Zustand |
|---|---|---|
| mz-stat | Kennzahl mit Einheit und Notiz | stabil |
| mz-pill | Status in einem Wort | stabil |
| mz-tabs | Sichten trennen, ARIA-konform | neu |
| mz-t-* | Mikro-Interaktion, reines CSS | Schaufenster |
| fx-* | Canvas- und WebGL-Atmosphäre | dosiert |
Warum ein Vokabular und kein Stylesheet pro Seite?
Mikro-Interaktionen — jede anfassbar
Alles hier unten reagiert auf Klick. Eine Mikro-Interaktion ist eine Antwort des Systems: sie sagt ich habe dich gehört, in unter 300 Millisekunden.
Bewegung — Atmosphäre, dosiert
Fünf Hintergründe, aber immer nur einer läuft: der aktive Tab. Das ist die Regel, an die ich mich halte — Bewegung kostet Aufmerksamkeit und Akkulaufzeit, also bezahlt sie dafür mit Wirkung.
Bei prefers-reduced-motion treten alle Effekte zurück und die Seite bleibt vollständig benutzbar. Das ist kein Zusatz, sondern Teil der Gestaltung.
Choreografie — der Blick wird geführt
Gute Oberflächen fallen nicht auf. Sie geben Antwort, wenn man etwas tut, sie halten still, wenn man liest, und sie bleiben benutzbar, wenn Bewegung abgeschaltet, das Netz langsam oder der Bildschirm klein ist. Alles auf dieser Seite ist an dieser Regel gemessen worden.