Jede Unterseite sieht ein bisschen anders aus.
Design-System & Komponenten
Einmal entschieden, überall gleich.
Wenn jede Seite ein bisschen anders aussieht, liegt das selten am Geschmack — meist fehlt ein System. Farben, Abstände, Schriftgrößen und Komponenten werden einmal festgelegt und dann überall abgerufen.
Ausgangslage
Typisch, wenn Sie
hier landen.
Neue Seiten dauern lange, weil alles neu entschieden wird.
Externe Dienstleister treffen die Gestaltung nicht.
Leistungsumfang
Das ist enthalten.
Design-Tokens für Farbe, Typografie, Abstände, Radien, Schatten und Bewegung
Komponenten mit allen Zuständen: Ruhe, Fokus, Hover, deaktiviert, Fehler
Hell- und Dunkelfassung, wenn sinnvoll
Dokumentation, die auch Fremde verstehen
Konsistenzprüfung des Bestands
Nutzen
Was sich ändert.
Neue Seiten entstehen aus vorhandenen Bausteinen.
Auch wenn andere weiterarbeiten, bleibt der Auftritt geschlossen.
Eine Änderung an der Farbe wirkt überall, nicht an 40 Stellen von Hand.
Ablauf
In drei Schritten.
Bestand sichten
Was existiert bereits, was widerspricht sich.
Festlegen
Tokens und Komponenten definieren.
Übergeben
Dokumentation und Beispielseiten.
Fragen
Was hier gefragt wird.
Lohnt sich das bei einer kleinen Seite?+
Ab etwa zehn Seiten fast immer. Darunter reicht ein sauberer Styleguide.
Bekommen wir das auch für Figma?+
Ja, die Tokens lassen sich in beide Richtungen übergeben.
Weitere Themen