Was ist ein Design System?
Ein Design System, auch Designsystem, beschreibt eine Sammlung (techn. Bibliothek) von wiederverwendbaren Komponenten, Richtlinien und Standards. Sie definieren, wie ein Produkt oder eine Marke sich äußerlich präsentieren, sich haptisch anfühlen bzw. verhalten. Sie ermöglichen Designer:innen, Designentwürfe digitaler Produkte und Dienstleistungen auf Basis klarer Regeln, Standards und allgemein gültigen Prinzipien zu vereinheitlichen. Es ist ein wichtiger Bestandteil des UX-Designs sowie für die Entwicklung und unterstützt Unternehmen dabei, die konsistenten Stil- und Interaktionsrichtlinien einzuhalten. Mitarbeitende greifen dabei auf verschiedene Anwendungen, Daten, und Quellen zurück, die zuvor allesamt als Teil des Designsystems definiert wurden.
Design System: wichtige Bestandteile
Ein Design System besteht aus verschiedenen Bestandteilen, die ähnlich wie bei einem Uhrwerk, wie Zahnräder ineinandergreifen. Es ist daher ein systematischer Designansatz inkl. Richtlinien, Prinzipien, Philosophien, Code und fertig erstellten Vorlagen bzw. Beispielen. Sämtliche Bestandteile bilden zusammen die »single source of truth«, in die sämtliche Elemente zusammengefasst sind, die es Teams ermöglicht »gemeinsam« digitale Produkte zu entwerfen, zu realisieren und zu entwickeln.
Atome (Building Blocks) – dabei handelt es sich um eine ausführliche Dokumentation, inkl. Anwendungsbeispiele für Benutzeroberflächen und standardisierte Typografien (Muster). Sie beschreiben Dinge wie Farben, Schriftarten, Iconography, Layout und Interaktionsmuster.
Module / Komponentenbibliothek (Pattern Library) – auf Basis der Atome entstehen Module, Komponenten und Templates - sprich, eine Sammlung von vordefinierten UI-Komponenten, die in der Regel als Code-Snippets oder als Designs zur Verfügung stehen.
Principles (Rules) – Festlegungen der Regeln für Design und Interaktion/Animationen sowie für die technische Umsetzungen. Sie dienen als Leitfaden für Entscheidungen und helfen dabei, eine konsistente und benutzerfreundliche User Experience zu gewährleisten. Principles können beispielsweise die Verwendung von typografischen Regeln, Farbschemata oder Interaktionsmuster betreffen.
Dokumentation (Style Guide) – sie zeigt auf, wie das Design System genutzt werden sollte, damit es unternehmensweit und standardisiert funktioniert. Dort sind neben Design- und Entwicklungsprozess auch Ablage, Tools wie auch die Benutzung der Komponentenbibliothek beschrieben.
Wichtig: Es können jedem Design System, je nach Anforderungen, zusätzlich individuelle Bestandteile zugeordnet werden. Zudem ist es möglich, die Inhalte der Bestandteile individuell zu gestalten.
Design systems often contain design information as a style guide; colors, typography, and styles used throughout the UI elements. The collection of standards, principles and consistent UI elements makes the design system valuable as a single source of truth for the entire organization.
Robert Gourley
Im folgenden Video geht Vy Alechnavicius auf generelle Fragen rund ums Design System ein.
Warum ein Design System?
Design Systeme umfassen, wie oben anklingen lassen, visuelle Elemente wie Farben, Schriftarten und Icon-Sets, aber auch Interaktionsmuster und Benutzerflussdiagramme. Im Kern beschleunigt ein Design System den Prozess vom Entwurf hin zum finalen Produkt und der Weiterentwicklung des jeweiligen Designs; wiederverwendbare Elemente stehen immer zur Verfügung und müssen nicht für jedes Projekt von Grund auf neu entworfen werden. Auch wenn es sich seltsam liest: Das Design rückt somit etwas in den Hintergrund, der Designprozess dagegen in den Fokus. Designer:innen können sich mehr auf die Funktionalitäten (Logik) einer geplanten Mensch-Maschine-Interaktion konzentrieren, weniger auf das durch das Design System festgelegte Erscheinungsbild.
Wichtig: Ein Design System sollte nicht als starres Regelwerk betrachtet werden, sondern als lebendige Bibliothek samt softwarebasierten Entwicklungswerkzeugen (Adobe Creative Suite, Figma usw.). Ein Design System entwickelt sich fortlaufend weiter, auch um den Bedürfnissen der Anwender:innen und Kund:innen gerecht zu werden - alles auf Basis eines »Human Center Design«-Ansatzes. Zudem entwickelt sich ein Design System fortlaufend weiter, um der technischen Weiterentwicklung, dem stetigen Fortschritt gerecht zu werden.
Vorteile zusammengefasst
Entlastung der Design- und Entwicklungs-Ressourcen
Einheitliche Sprache innerhalb der beteiligten Teams
Beschleunigung der Workflows, schnellere Umsetzung von Projekten
Schaffung einer visuellen Konsistenz bei Produkten und Benutzeroberflächen
Keine große Einarbeitung in das jeweilige System nötig
Skalierbarkeit durch Modularität
Zentralisierte Designvorlagen, meist mit Suchfunktion
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.
