Ein Design-System ist eine gemeinsame Sammlung aus Gestaltungswerten, wiederverwendbaren Bausteinen und Regeln, mit der Websites und Anwendungen einheitlich und schneller entstehen. Es besteht aus drei Teilen: den Werten (etwa Farben, Schriften und Abstände), den Bausteinen (Buttons, Formulare, Karten) und der Dokumentation, die beschreibt, wann welcher Baustein passt. Für Unternehmer ist es vor allem ein Werkzeug gegen Wildwuchs.
Woraus besteht ein Design-System?
Die Werte legen fest, wie Ihre Marke in der Oberfläche aussieht. Fachleute sprechen von Design Tokens: benannte Werte für Farben, Schriftgrößen, Abstände, Rundungen und Schatten. Statt „dieses Blau“ an zwanzig Stellen einzutragen, steht dort „Hauptfarbe“. Ändern Sie den Wert einmal, gilt er überall.
Die Bausteine sind fertige Teile wie Schaltflächen, Eingabefelder, Karten, Navigation oder Hinweisboxen. Jeder Baustein hat Zustände: normal, berührt, ausgewählt, fehlerhaft, deaktiviert. Die Dokumentation erklärt schließlich, wann Sie welchen Baustein einsetzen und welche Texte dazugehören. Öffentliche Beispiele sind das GOV.UK Design System und das US Web Design System.
Wann lohnt sich ein Design-System für ein kleines Unternehmen?
Ein Design-System lohnt sich, wenn dieselben Bausteine oft vorkommen und mehrere Personen sie verwenden. Typische Auslöser sind eine Website mit vielen Seitentypen, eine Website plus Kundenportal oder App, ein Team, das selbst Seiten baut, oder mehrere Dienstleister, die am selben Auftritt arbeiten.
Für eine Landingpage oder einen schlanken Firmenauftritt mit wenigen Unterseiten ist es in der Regel zu viel. Dort reichen eine Seite mit Farben, Schriften und Abständen sowie ein paar fertige Bausteine. Beschreiben Sie diese Regeln im Brand Guide, bevor Sie ein vollständiges System planen.
| Stufe | Umfang | Sinnvoll für |
|---|---|---|
| Stilrichtlinie | Eine bis vier Seiten mit Werten und Beispielen | Kleine Websites, Soloselbstständige |
| System „light“ | Tokens, rund zehn Bausteine, kurze Nutzungshinweise | Unternehmenswebsite mit mehreren Seitentypen |
| Vollständiges System | Umfangreiche Bibliothek, Dokumentation, Versionierung | Mehrere Produkte, größere Teams |
Welchen Nutzen hat es im Alltag?
Der wichtigste Nutzen ist Konsistenz. Ein Button sieht überall gleich aus, und jede neue Seite wirkt wie aus einem Guss. Das erleichtert die Orientierung und stärkt den Eindruck von Sorgfalt.
Hinzu kommt Geschwindigkeit: Wer auf fertige Bausteine zurückgreift, muss nicht jede Seite neu gestalten und entwickeln. Änderungen, etwa eine neue Hauptfarbe, lassen sich an einer Stelle vornehmen. Schließlich kann Barrierefreiheit einmal sauber in die Bausteine eingebaut werden, statt auf jeder Seite neu geprüft zu werden. Mehr zum Zusammenspiel von Gestaltung und Bedienbarkeit lesen Sie in UI- und UX-Design: Der Unterschied und warum beides zählt.
Wie starten Sie mit einem kleinen System?
Beginnen Sie mit einer Bestandsaufnahme: Welche Elemente kommen auf Ihren Seiten tatsächlich vor? Legen Sie Werte für Farben, Schriften und Abstände fest. Bauen Sie dann die zehn Bausteine, die Sie am häufigsten brauchen, und beschreiben Sie knapp, wann sie passen. Erweitern Sie das System nur, wenn eine echte Seite einen neuen Baustein verlangt.
Benennen Sie außerdem eine verantwortliche Person und legen Sie fest, wie Änderungen entstehen. Ohne diese Zuständigkeit veraltet ein System, und Ausnahmen wuchern wieder.
- Alle vorhandenen Seitenelemente gesammelt und Doppelungen erkannt
- Werte für Farben, Schriften, Abstände und Rundungen festgelegt
- Die häufigsten Bausteine samt Zuständen gestaltet
- Kontrast und Tastaturbedienung in den Bausteinen geprüft
- Kurze Hinweise zur Verwendung notiert
- Verantwortliche Person und Änderungsprozess benannt
Fazit: Klein anfangen, bewusst wachsen
Ein Design-System ist kein Muss für jedes Unternehmen, aber ein wirksames Mittel, wenn Ihr Auftritt wächst. Starten Sie mit einer kleinen Bibliothek und pflegen Sie sie. Wenn Sie wissen möchten, ob sich das für Ihr Vorhaben lohnt, sehen Sie sich unser Grafik- und UI-Design an oder sprechen Sie uns an.
