Pipeline & Workflow
Kernfrage
Wie bleibt Gestaltung über viele Anwendungen einheitlich?
Je mehr Anwendungen eine Marke hat, desto wichtiger wird ein System: wiederverwendbare Regeln und Bausteine, die Konsistenz sichern und Zeit sparen. Für digitale Produkte heisst dieses System Design System.
Lernziel: Du kannst den Aufbau eines Design Systems erklären, Design Tokens definieren und eine Übergabe an die Entwicklung vorbereiten.
Ein System ist schneller als hundert Einzelentscheide.
5.1 / Aufbau
Von kleinen Bausteinen zu ganzen Seiten.
Ein Design System besteht aus mehreren Ebenen:
01
Tokens
Grundwerte für Farben, Schriftgrössen und Abstände.
02
Komponenten
Wiederverwendbare Bausteine wie Buttons, Karten und Formulare.
03
Muster
Kombinationen für wiederkehrende Aufgaben, etwa einen Bestellprozess.
04
Dokumentation
Regeln, Beispiele und Begründungen.
Brad Frost beschreibt diesen Aufbau im Atomic Design mit dem Bild von Atomen, Molekülen und Organismen: Kleine Teile werden zu grösseren kombiniert.
Kleine Teile, grosse Wirkung.
5.2 / Design Tokens
Gestaltungsentscheide als Werte.
Design Tokens speichern Gestaltungsentscheide als benannte Werte: Farben, Schriftgrössen, Abstände, Radien. Ändert sich ein Wert, ändert er sich überall.
Ein Abstandssystem auf Basis von 4 oder 8 Pixeln und eine typografische Skala mit festem Verhältnis sorgen für Rhythmus und Ordnung.
Benennen statt kopieren.
5.3 / Übergabe an die Entwicklung
Gemeinsam statt über den Zaun werfen.
Bei der Übergabe an die Entwicklung braucht es mehr als Bilder: Masse, Zustände wie Hover oder Fehler, das Verhalten auf verschiedenen Bildschirmgrössen und alle Assets in den richtigen Formaten.
Am besten arbeiten Gestaltung und Entwicklung früh zusammen. Ein gemeinsames Verständnis der Komponenten spart Rückfragen und verhindert, dass das Ergebnis vom Entwurf abweicht.
Früh reden spart spätes Korrigieren.
Übung
Ein kleines Design System
Aufgabe: Baut ein kleines Design System für eine Marke, etwa Gartenglück.
SCHRITT 1
Definiert mit dem Werkzeug Farben, Abstände und Schriftgrössen.
SCHRITT 2
Gestaltet drei Komponenten mit allen Zuständen: Button, Karte, Eingabefeld.
SCHRITT 3
Dokumentiert, wann welche Komponente eingesetzt wird.
SCHRITT 4
Gestaltet mit dem System eine neue Seite.
Auswertung: Wie schnell lässt sich mit dem System eine neue Seite gestalten?