Entwerfen einer Webseite oder eines Ablaufs
Lies zuerst web-craft. Eine bestehende DESIGN.md oder ein Designsystem ist maßgeblich: Folge ihr, erfinde keine neue Richtung für ein bestehendes Produkt.
1. Richtung vor Code (neue Produkte und neue große Oberflächen)
Entscheide und notiere kurz:
| Entscheidung | Antwort |
|---|---|
| Benutzer und Aufgabe | Wessen Aufgabe wird durch diese Oberfläche erleichtert? |
| Priorität | Was muss zuerst gesehen und getan werden? |
| Komposition | Redaktioneller Fluss, geteiltes Layout, dichter Arbeitsbereich, Produktschaufenster oder etwas anderes |
| Typografie | Schriftcharakter, Maßstab, Zeilenlänge, Schriftsystemabdeckung für jede geplante Sprache |
| Visuelles Material | Echte Produktbilder, Fotografie, Illustration, Diagramme oder schriftgeführt |
| Oberfläche und Dichte | Rahmen, Tonalität, Weißraum, Datendichte, Seitenrhythmus |
| Bewegung | Funktionelles Feedback plus narrative Bewegung nur dort, wo das Produkt sie benötigt |
| Signaturdetail | Ein oder zwei konsistente Details, die die Marke unterstützen |
Referenzen: Die bestehende Marke steht an erster Stelle, dann das, was der Benutzer angegeben hat. Für eine neue Richtung wähle einige passende Quellen aus und sag, was jede beiträgt (Dichte, Fotografie, Rhythmus, Interaktion, Schriftart). Adjektive wie „modern“ oder „sauber“ sind keine Entscheidung. Kopiere keine Logos, Texte oder eine gesamte Komposition. Optionen für ein neues Produkt müssen sich in Komposition und Priorität unterscheiden, nicht nur in der Farbe. Details: references/direction-and-references.md, references/composition.md, references/typography.md.
2. Tokens
Farbe (semantisch, hell und dunkel), Schriftmaßstab, Abstände, Radius, Elevation und Bewegung leben als Tokens an einem Ort und werden auf das Theme des Kits abgebildet. Elevation ist begrenzt: zuerst Rahmen und Oberflächenton, einige einlagige niedrig-opake Schattentokens für schwebende Schichten, hellere Oberflächen anstelle von Schatten im Dunkelmodus und keine animierte box-shadow. Details: references/tokens-color-elevation.md.
3. Text und Hierarchie
Jeder Text hat eine Aufgabe. Standardmäßig kein Eyebrow über einer Überschrift (nur Fortschritt, ein Datum, ein übergeordnetes Objekt oder rechtlicher Kontext; Stufenbezeichnungen wie „Premium“ werden ein Badge auf dem Feature). Subtitel bleiben nur für Umfang, Ergebnis, Risiko oder eine konkrete Tatsache. Überschriftsebenen folgen der Struktur, nicht der Schriftgröße. Platzhalter ersetzen nie Beschriftungen. Schaltflächen sagen, was passiert. Details: references/copy-hierarchy.md.
4. Zustände
Erstelle eine Zustandsmatrix für jede Datenoberfläche und jedes Formular: anfängliches Laden (layout-angepasstes Skelett, verzögert, um ein Flackern zu vermeiden, statisch bei reduzierter Bewegung), leer (erste Nutzung vs. keine Ergebnisse), Fehler mit Wiederholung und gespeicherten Daten, Aktualisieren, Seitenungsfehler, Senden, Erfolg, Verboten, Nicht gefunden, Offline. Details: references/states.md.
5. Formulare
Validiere beim Verlassen des Feldes, validiere erneut bei Änderung, sobald ein Fehler angezeigt wird, asynchrone Prüfungen entprellt. Beim Absenden mit Fehlern: Fokussiere das erste ungültige Feld, scrolle es unterhalb eines eventuell vorhandenen sticky-Headers in den sichtbaren Bereich, öffne den eingeklappten Abschnitt oder Schritt, der es enthält, und zeige bei langen Formularen eine Fehlerübersicht. Meldungen sagen, was falsch ist und wie es behoben wird, befinden sich neben dem Feld und sind mit aria-describedby verknüpft. Der Senden-Button ist nur während des Sendens deaktiviert. Server-Fehlermeldungen landen auf ihren Feldern mit demselben Scroll- und Fokusverhalten. Details: references/forms.md.
6. Bewegung
Fülle die Bewegungsmatrix (references/motion-matrix.md) aus, bevor du eine Bibliothek auswählst:
- Buttons und Links: Hover, wo Hover existiert, gedrückt, focus-visible, laden, deaktiviert.
- Dialoge, Sheets, Menüs, Popovers, Toasts: immer eine Ein- und eine Ausgangsanimation (Deckkraft plus eine kleine Skalierung oder Verschiebung, Ausgang endet vor dem Entfernen), Fokusfalle und Rückkehr, Schließen. Details:
references/overlays.md. - Listen: Einfügen, Entfernen und Neuanordnen sind verständlich.
- Diagramme: ein kurzes Einzeichnen beim ersten Anblick, Übergänge bei Datenänderung, keine oberhalb einer gemessenen Datenmenge, keine bei reduzierter Bewegung; Tooltips über Tastatur erreichbar und eine tabellarische Alternative. Details:
references/charts.md. - Marketing-Erzählung: begrenzt, produktspezifisch, verbirgt niemals Inhalte hinter einer Animation.
Dauer, Beschleunigung und Entfernung stammen aus den Tokens. Nicht jede Seite bekommt denselben fade-up-Versatz. Keine künstliche Verzögerung bei Formularen oder Datenbildschirmen. Reduzierte Bewegung wird zentral behandelt und umfasst CSS, Bibliotheken und Video.
7. Responsive
Haltepunkte folgen dem Inhalt. Definiere, was Navigation, Filter, Tabellen, sticky-Aktionen, Dialoge und Popovers auf einem schmalen Bildschirm tun. Überprüfe 320 px, lange übersetzte Texte, 200 % Zoom, Touch und Tastatur. Ein Web-Dialog wird nicht standardmäßig zu einem React Native Bottom Sheet. Details: references/responsive.md.
8. Überprüfe das Ergebnis
Sieh dir das Ergebnis in einem Browser bei mobilen und Desktop-Breiten an, in beiden Themes und beiden Sprachen, nur mit der Tastatur und mit aktivierter reduzierter Bewegung. Ein statischer Screenshot überprüft keine Bewegung; interagiere damit.
Wenn ein Kit über sehr unterschiedliche Produkte hinweg wiederverwendet wird, führe den Divergenztest in references/pilot-divergence.md durch.