Buttons & States Lab
Button-Set mit kompletter States-Matrix
- Hover, Active, Disabled, Focus
- Kontrast- und Touch-Regeln
- Benennung für Dev-Hand-off
Component Labs • online & Hamburg
Kurse, die Details messbar verbessern
Jedes Lab liefert ein Ergebnis: Komponenten-Set, Token-Sheet, States-Matrix oder Hand-off-Check. Du arbeitest an realistischen Aufgaben — damit dein UI „wie Produkt“ wirkt.
Dauer
1–2 Wochen pro Lab (flexibel)
Format
online, optional Hamburg
Output
Artefakte statt Theorie
Component Labs
Du baust Regeln, Varianten und saubere Zustände — ohne Vorlagen-Magie.
Inputs & Validation Lab
Formfelder mit Fehlern, Hinweisen, Erfolg
- Helper Text & Error Copy
- Accessibility-Basics ohne Overkill
- States konsistent in Figma
Layout Rhythm Lab
Spacing-System + Baseline-Rhythmus
- Skalen (8/12/16/24)
- Layout-Patterns & Grids
- Weniger Pixel-Diskussionen
Card & Elevation Lab
Surfaces, Schatten, Hierarchie
- Elevation Ladder (s1–s3)
- Kontrast & Trennlinien
- Schnelleres UI-Scannen
Navigation Lab
Tabs, Sidebar, Breadcrumbs
- Orientierung im Produkt
- Aktive Zustände & Fokus
- Komponenten wiederverwendbar
Motion Micro Lab
Transitions, Timing & Reduce Motion
- Motion-Regeln statt Zufall
- Sanfte Feedbacks für Hover/Fokus
- Reduce Motion respektieren
Design Tokens — in verständlich
Tokens sind nicht „Buzzword“, sondern ein kleines Wörterbuch für UI-Entscheidungen. Du lernst, wie man Skalen baut, sinnvoll benennt und im Team teilt.
Token-Skalen
Radius, Spacing, Shadow, Type — klein starten, sauber wachsen.
Benennung
Namen, die Devs verstehen: Funktion statt Geschmack.
Team-Sharing
Ein Sheet, ein Standard, weniger Diskussionen.
Beispiel: Token-Set
Radius
r8 • r12 • r16
Shadow
s1 • s2 • s3
Spacing
8 • 12 • 16 • 24
Du lernst, wie du Tokens in Figma strukturierst und dokumentierst.
Bildpfad: images/tokens-sheet.jpg
Wie du lernst
Jede Session folgt demselben ruhigen Ablauf: bauen, prüfen, vereinheitlichen, übergeben.
1) Build
Komponenten & Varianten mit Regeln anlegen.
2) Review
3-Pass-Check: Spacing, Typo, States.
3) Align
Tokens & Naming vereinheitlichen.
4) Deliver
Hand-off Pack für Devs vorbereiten.
Schnelle Anfrage
Sag uns, welches Lab dich interessiert — wir schicken dir die passende Übersicht.