UI-Komponenten
Gute Komponenten entstehen nicht durch Zufall. Jeder Button, jede Card und jedes Formular-Feld folgt Regeln — zu Hierarchie, Proportionen und States. Wer diese Regeln kennt, baut konsistente UIs, ohne jede Entscheidung neu treffen zu müssen.
- Die drei Hierarchie-Stufen von Buttons verstehen und visuell korrekt umsetzen (Primary, Secondary, Tertiary)
- Card-Anatomie kennen: Header, Body, Footer, Eyebrow — und wissen, wann welches Element zum Einsatz kommt
- Form-Felder mit klaren visuellen States gestalten (Default, Focus, Error, Disabled, Success)
- Konsistente Komponenten-Proportionen aufbauen: Padding, Border-Radius und Font-Size als System
- Interaktive States (Hover, Active, Focus) als integralen Teil des Designs begreifen, nicht als Nachgedanke
Gute Komponenten entstehen nicht durch Zufall. Jeder Button, jede Card und jedes Formular-Feld folgt Regeln — zu Hierarchie, Proportionen und States. Wer diese Regeln kennt, baut konsistente UIs.
Die Anatomie guter Komponenten
Grundbausteine: Container (äußerer Rahmen), Content (Text, Icons, Bilder), States (Interaktion). Alle guten Komponenten folgen den gleichen Säulen.
Hierarchie
Primary, Secondary, Tertiary Buttons. Nur eine Primary Action pro Bereich — damit weiß der Nutzer, was am wichtigsten ist.
Proportionen
Padding, Border-Radius, Font-Size bilden zusammenhängendes System. Nicht jeder Button bekommt eigene Maße — es gibt klare Regeln.
States
Hover, Focus, Active, Disabled, Error sind kein Nachgedanke — sie kommunizieren wichtiges. Jeder State sieht visuell unterschiedlich aus.
Button-Hierarchie: Die drei Stufen
Primary, Secondary, Tertiary — drei Stufen für Klarheit. Wenn alle Buttons gleich aussehen, kann der Nutzer nicht erkennen, welche Aktion die wichtigste ist.
Wichtigste Action — volle Farbe, volle Aufmerksamkeit
Wichtige, aber weniger prominente Action — Border statt Fill
Optionale Action — nur Text, minimale Aufmerksamkeit
Formular-States: Mehr als nur ein Border
Default, Focus, Error, Disabled, Success — alle visuell unterscheidbar. States kommunizieren Status und Feedback dem Nutzer.
Default
Normales Aussehen, keine Aktion vom Nutzer erwartet
Focus
Tastatur-Navigation oder Klick. Deutliches visuelles Feedback (border color oder outline)
Error
Eingabe ungültig. Rote Farbe, Error-Message darunter
Disabled
Feld nicht verfügbar. Reduzierte Opazität, grauer Text, Cursor: not-allowed
Success
Eingabe erfolgreich validiert. Grüne Farbe, optional Checkmark-Icon
Card-Anatomie: Struktur statt Chaos
Klare Leserichtung: Eyebrow → Titel → Beschreibung → Footer. Nicht jede Card braucht alle Teile, aber die Reihenfolge sollte konsistent sein.
Card Titel
Beschreibung oder Content der Card — hier steht die wichtigste Info