Was ist ein Designsystem, warum kleine Teams eines brauchen
Warum ein Designsystem einem kleinen Team mehr Zeit spart als einem großen, und womit ein paar wiederverwendbare Bausteine schon reichen.
rabbitclip-TeamVeröffentlicht: 5 Min. Lesezeit
Kurz gesagt
Ein Designsystem ist eine einzige Quelle, die die wiederkehrenden Bausteine einer Marke bündelt, Farbe, Typografie, Buttons, Formulare, Karten, damit eine neue Seite oder Funktion aus diesen fertigen Bausteinen entsteht, statt jedes Mal von Grund auf neu gestaltet zu werden. Für ein kleines Team heißt das: nie wieder die Frage 'wie sollte dieser Button eigentlich aussehen' neu stellen zu müssen.
Ein Designsystem klingt nach einem Luxus für große Unternehmen, dabei ist eher das Gegenteil wahr: Ein kleines Team mit knappen Ressourcen kann es sich am wenigsten leisten, Zeit mit dem Ausbügeln von Inkonsistenz zu verlieren.
Dieser Beitrag zeigt, was ein Designsystem tatsächlich ist und was es einem kleinen Team konkret bringt. So klein der Umfang auch ausfällt, der Nutzen wirkt in dieselbe Richtung.
Was ein Designsystem tatsächlich ist
Ein Designsystem dokumentiert die visuelle Sprache einer Marke, Farbpalette, Typografie, Abstandsregeln, zusammen mit den wiederverwendbaren Bausteinen, die aus dieser Sprache entstehen: Buttons, Formularfelder, Karten, Hinweise, alles an einem Ort.
Es kann ein Dokument sein, eine Code-Bibliothek oder beides zusammen. Wichtig ist, dass eine Designerin oder ein Entwickler beim Bau einer neuen Seite auf einen fertigen Baustein zurückgreift, statt jedes Mal neu zu fragen, welche Farbe der Button haben soll.
Taucht der Buchungsbutton einer Spa-Kette auf jeder Seite in einem leicht anderen Grünton auf, ist das ein handfestes Zeichen dafür, dass ein Designsystem fehlt.
Eine Designerin muss dieses System nicht allein aufbauen; früh mit dem Entwickler zu klären, wie jeder Baustein im Code heißt, senkt später den Klärungsaufwand deutlich.
Warum es gerade für ein kleines Team zählt
In einem großen Team ist Inkonsistenz ein Übersehensproblem; in einem kleinen ist sie ein Zeitproblem. Diskutiert ein Zwei- oder Dreierteam bei jeder neuen Seite erneut Farbe, Abstand und Schriftgröße, fließt diese Zeit nicht in die eigentliche Arbeit, den Inhalt oder das neue Feature.
Kommt bei einem Arbeitskleidungshersteller eine neue Produktkategorie hinzu, erledigt ein bestehendes Designsystem diese Arbeit in Stunden; ohne eines dauert es Tage. Der Unterschied liegt darin, ob jedes Element von einer leeren Seite aus entworfen wird.
Die gesparte Zeit zeigt sich nicht nur beim Design, sondern auch bei der Entwicklung; mit einer fertigen Komponentenbibliothek greift ein Entwickler auf einen bestehenden Baustein zurück, statt ein neues Formular von Grund auf zu codieren, was auch das Fehlerrisiko senkt.
Was ohne Designsystem passiert
Mit der Zeit sammeln sich auf einer Website Dutzende von Button-Stilen, Formularfeldern und Überschriftengrößen an, die nicht ganz zueinander passen. Das wird für den Besucher zu einer verwirrenden Erfahrung und für das Team zu einer Last, bei jeder Änderung zu prüfen, ob es auf den anderen Seiten genauso aussieht.
Ein häufiges Beispiel ist die zehn Jahre alte Website eines Herstellers, deren in verschiedenen Zeiträumen ergänzte Seiten völlig unterschiedlich wirken; jede Seite trägt den Geschmack der Person, die sie damals gestaltet hat.
Womit ein kleines Team anfängt
Ein umfassendes Konzern-Designsystem ist nicht nötig; es reicht, mit einer Handvoll Grundbausteinen zu starten: einer Hauptfarbpalette, zwei oder drei Schriftgrößen sowie einheitlichen Button- und Formularfeld-Stilen.
Liegen diese Grundbausteine in einer Code-Bibliothek, etwa einer gemeinsamen Komponentendatei, wird eine neue Seite durch Aufrufen dieser Bausteine zusammengesetzt; eine Farb- oder Größenänderung erfolgt an einer Stelle und wirkt auf die gesamte Website.
Ein praktischer Startpunkt ist, die drei meistgenutzten Seiten der bestehenden Website zu prüfen und die dort wiederkehrenden Elemente aufzulisten; diese Liste liefert einen schnelleren Start als ein System von Grund auf zu entwerfen.
- Eine Hauptpalette und Nebenfarben werden an einer Stelle festgelegt
- Zwei oder drei Schriftgrößen werden bestimmt (Überschrift, Fließtext, Kleintext)
- Button-, Formularfeld- und Karten-Bausteine werden im Code wiederverwendbar gemacht
- Eine neue Seite wird aus diesen Bausteinen zusammengesetzt statt von Grund auf entworfen
Was ein Designsystem beim Wachstum bringt
Wächst ein Unternehmen und braucht eine neue Filialseite, eine neue Produktkategorie oder eine neue Kampagnenseite, erledigt eine Website mit Designsystem diese Ergänzung in Tagen; ohne eines dauert es Wochen.
Zudem gibt ein Designsystem einer neuen Designerin oder einem neuen Entwickler im Team einen einzigen Bezugspunkt; die visuelle Sprache der Marke wird aus einer Quelle gelernt, nicht seitenweise zusammengesucht.
Wer für die Pflege des Designsystems zuständig ist
Ein Designsystem bleibt nach dem Aufbau nicht von selbst aktuell; jemand muss Farb-, Bauteil- oder Regeländerungen im Blick behalten. In einem kleinen Team fällt diese Verantwortung meist der Designerin oder dem erfahrensten Entwickler zu, eine eigene Rolle muss dafür nicht geschaffen werden.
Ist die Zuständigkeit unklar, sammelt sich mit der Zeit wieder Inkonsistenz an: Jemand fügt einen neuen Button-Stil hinzu, niemand prüft, ob er zum bestehenden System passt, und das System zerfällt von selbst. Deshalb lohnt es sich, die Prüfung des bestehenden Systems vor jedem neuen Baustein zur festen Gewohnheit zu machen.
Beauftragt das Marketing-Team eines Herstellers eine Agentur, die das bestehende Designsystem nicht kennt, mit einer neuen Kampagnenseite, wirkt diese Seite visuell abgekoppelt vom Rest der Website; das zeigt, dass ein Designsystem nicht nur aufgebaut, sondern auch gepflegt werden muss.
Diese Verantwortung klingt nach einer schweren Last, ist in der Praxis aber klein; eine Stunde Durchsicht im Monat reicht für die meisten kleinen Teams.
Ein Designsystem ist nicht der Luxus eines großen Konzerns, sondern die Art, wie ein kleines Team seine eigene Zeit schützt. In einem Erstgespräch mit rabbitclip werden die Inkonsistenzen der bestehenden Website gemeinsam aufgespürt und geklärt, wo ein Grund-Designsystem ansetzen sollte. Selbst ein kleiner Anfang ist stets besser als gar keiner. Kleine Inkonsistenzen, die sich über Zeit ansammeln, kommen am Ende teurer als ein einziger großer Fehler.
Häufige Fragen
Ist ein Designsystem nur etwas für große Unternehmen?
Nein, im Gegenteil, gerade ein kleines Team schützt seine Zeit damit am meisten; der Umfang kann entsprechend klein bleiben. Der Umfang wächst mit dem Unternehmen mit.
Wie lange dauert der Aufbau eines Designsystems?
Ein Grundsystem aus Farbe, Typografie und ein paar Bausteinen lässt sich in Tagen aufbauen; ein umfassendes System hängt von der Projektgröße ab.
Kann ein Designsystem nachträglich zu einer bestehenden Website hinzukommen?
Ja, bestehende Seiten werden geprüft, wiederkehrende Bausteine erkannt und in das System überführt.
Ist ein Designsystem nur eine visuelle Angelegenheit?
Nein, es umfasst auch die Wiederverwendung von Bausteinen im Code; deshalb betrifft es sowohl Designerin als auch Entwickler.
Muss ein Designsystem an ein einziges Designwerkzeug gebunden sein?
Nein, es sollte sowohl in der Designdatei als auch im Code bestehen; driften beide auseinander, wird das System mit der Zeit inkonsistent. Das kann so einfach sein wie eine gemeinsame Komponentendatei im Code anzulegen.
