Was ist ein Design System?

Design System: Definition und Bestandteile

Ein Design System ist mehr als ein Styleguide. Der Styleguide beschreibt, wie die Marke aussieht: Farben, Schriften, Bildsprache. Ein Design System ergänzt ihn um fertige, in Code umgesetzte Komponenten wie Schaltflächen, Formularfelder, Tabellen und Meldungen, um Regeln für Abstände und Raster und um Hinweise zur Verwendung. Design und Entwicklung greifen auf dieselbe Quelle zu, und nicht jede Schaltfläche wird neu erfunden.

Grundlage sind Design Tokens: benannte Werte für Farben, Schriftgrößen, Abstände oder Rundungen. Wird ein Token geändert, aktualisiert sich das Erscheinungsbild überall. Aus den Tokens werden Komponenten aufgebaut und mit ihren Zuständen definiert: normal, Hover, Fokus, deaktiviert und Fehler. So lassen sich Aussehen und Verhalten aller Bauteile einheitlich und nachvollziehbar steuern.

Vorteile und Grenzen

Der Gewinn liegt in Konsistenz und Tempo: Neue Seiten und Funktionen entstehen aus vorhandenen Bausteinen, statt jedes Mal neu entworfen und programmiert zu werden. Barrierefreiheit mit ausreichenden Kontrasten, Tastaturbedienung und sichtbarem Fokus lässt sich einmal sauber lösen und gilt dann überall. Auch Änderungen am Markenauftritt sind zentral möglich.

Dem stehen Aufwand und Pflege gegenüber: Ein Design System braucht Verantwortliche, Regeln für Erweiterungen und Dokumentation, sonst veraltet es. Für eine kleine Website mit wenigen Seiten ist es überdimensioniert; ein schlanker Satz aus Komponenten und Tokens genügt dort meist. Der Aufwand sollte sich an der Zahl der Anwendungen und Beteiligten orientieren.

• Design Tokens: Farben, Typografie, Abstände, Schatten
• Komponentenbibliothek im Design-Werkzeug und im Code
• Layout-Raster und Regeln für responsive Ansichten
• Vorgaben zu Barrierefreiheit und Bedienung
• Dokumentation mit Beispielen und Verwendungsregeln

Praxis­bei­spiel: Website, Portal und App aus einem Guss

Ein Mittelständler hat eine Unternehmenswebsite, ein Kundenportal und eine Mitarbeiter-App, die von verschiedenen Dienstleistern zu verschiedenen Zeiten entstanden sind. Schaltflächen sehen unterschiedlich aus, Formulare verhalten sich anders, und die Markenfarbe ist in drei Varianten im Einsatz. Neue Mitarbeiter und Dienstleister brauchen jedes Mal Erklärungen, welche Variante die richtige ist.

Nach der Einführung eines Design Systems nutzen alle drei Anwendungen dieselben Tokens und Komponenten. Ein neues Formular entsteht in Stunden, die Bedienung wirkt vertraut, und ein späterer Farbwechsel ist an einer einzigen Stelle erledigt, statt in drei Projekten einzeln. Auch Tests und Prüfungen der Barrierefreiheit müssen nur einmal je Komponente erfolgen.

Worauf Unternehmen achten sollten

Beginnen Sie klein: mit den Komponenten, die tatsächlich oft vorkommen, nicht mit einer Bibliothek auf Vorrat. Legen Sie fest, wer Änderungen entscheidet, und pflegen Sie die Dokumentation mit. Typische Fehler sind ein Design System, das nur im Design-Werkzeug existiert und nicht im Code, ein Aufbau ohne Barrierefreiheit und mangelnde Akzeptanz im Team.

Nano Concepts entwickelt gemeinsam mit der Partneragentur LOMA DESIGN Design Systems für Websites, Portale und Apps, einschließlich der Komponenten in der eingesetzten Technologie, etwa React. So bleibt Ihr Auftritt über alle Kanäle und Projekte hinweg einheitlich. Das spart langfristig Abstimmung und verhindert Wildwuchs.