Screendesign
Design-Systeme im Screendesign – gemeinsame Sprache für Teams
Ein Design System ist mehr als eine Komponentenbibliothek — es ist eine gemeinsame Sprache zwischen Design und Entwicklung. Es definiert wie ein digitales Produkt aussieht, sich verhält und sich weiterentwickelt. Große Unternehmen wie Google (Material Design), IBM (Carbon) und Salesforce (Lightning) haben eigene Design Systems veröffentlicht.
Aufbau eines Design Systems
Design Tokens definieren
Tokens sind die Grundbausteine: Farben, Abstände, Schriftgrößen, Radien, Schatten. Sie werden als benannte Variablen definiert (z.B. --color-primary, --space-m) und in allen Komponenten verwendet. Änderungen an Tokens propagieren automatisch durch das gesamte System.
Komponentenbibliothek aufbauen
Atome zuerst (Button, Input, Badge), dann Moleküle (Suchfeld, Card), dann Organismen (Navigation, Form). Jede Komponente mit allen Varianten und States dokumentieren. In Figma: Auto Layout, Varianten und Interactive Components nutzen.
Dokumentation
Jede Komponente braucht: Verwendungszweck, Do/Don't-Beispiele, Code-Referenz (wenn vorhanden), Barrierefreiheits-Hinweise. Tools: Storybook (für Code-Komponenten), Zeroheight oder Supernova (für Design-Dokumentation).
Governance
Wer darf das System ändern? Wie werden neue Komponenten aufgenommen? Wie werden Breaking Changes kommuniziert? Ein Design System ohne Governance veraltet schnell. Klare Verantwortlichkeiten definieren.
Häufig gestellte Fragen zum Thema Design-Systeme
Nein — kleine Projekte mit einem Designer und einem Entwickler brauchen kein vollständiges Design System. Aber Design Tokens (Farben, Abstände als Variablen) lohnen sich fast immer. Ein vollständiges System lohnt sich ab mehreren Designern oder mehreren digitalen Produkten.
Grundlegendes System (Tokens + 20-30 Kernkomponenten): 2-4 Monate. Vollständiges, dokumentiertes System: 6-12 Monate. Design Systems sind nie fertig — sie entwickeln sich mit dem Produkt weiter.