Designsysteme 101: Was ist ein Designsystem?
Hier erfährst du alles über die Grundlagen von Designsystemen – von der Definition über die Funktionsweise bis zu der Frage, wie sie deinen Designprozess verändern können.
Designsysteme 101: Was ist ein Designsystem? teilen
Artwork von Cynthia Alfonso.
Designsysteme sind oft die unerkannten Helden hinter den Produkten, die wir täglich nutzen – von mobilen Apps und Websites bis zu den Benutzeroberflächen auf Fernsehgeräten und in Fahrzeug-Dashboards. Sie bilden das genetische Fundament des Produktdesigns, indem sie die Prinzipien und Elemente festlegen, die das Benutzererlebnis bei der Interaktion mit dem Produkt prägen. Farben und Symbole tragen spezifische Bedeutungen, während Schaltflächen in einer einheitlichen Größe und Form präsentiert werden. Die verwendete Sprache ist klar und leicht verständlich. Wenn dein Designsystem seine Aufgabe hervorragend erfüllt, bleibt es den Endnutzer*innen idealerweise völlig verborgen.
Ohne ein Designsystem könntest du in eine Krise der Inkonsistenz geraten, gefangen in einem Labyrinth, in dem jede Weggabelung zu Verwirrung, einer Verwässerung deiner Marke oder zur Frustration deiner Nutzer*innen führen kann. In dieser Reihe erklären wir die Grundlagen von Designsystemen und warum sie so wichtig sind. Wir zeigen dir, wie du ein System entwickeln kannst, das nicht nur deine digitale Präsenz verbessert, sondern auch sicherstellt, dass du Klarheit und Konsistenz in deinen Designs bewahrst.
Diese Serie baut auf unserem Kurs Einführung in Designsysteme auf, in dem wir die Grundlagen von Designsystemen erklären. Diesen kannst du dir auch auf YouTube ansehen.
Was genau ist ein Designsystem?
Ein Designsystem besteht im Kern aus einer Sammlung von Bausteinen und Richtlinien, die die einheitliche Gestaltung von Produkten und Nutzererfahrungen gewährleisten. Stell es dir vor wie eine Schablone, die eine konsistente Sprache sowie einen strukturierten Rahmen bietet und Teams durch den komplexen Prozess der digitalen Produktentwicklung leitet. Ein solches System kann erheblich dazu beitragen, den Aufwand für die wiederholte Erstellung von Elementen und Designs bei der Entwicklung und Implementierung von Produkten und Interfaces auf breiter Ebene zu verringern.
Komponenten eines Designsystems
Du kannst dir die Hierarchie in Designsystemen folgendermaßen vorstellen:
1. Designsystem
Dieser übergeordnete Container dient als dein universeller Leitfaden – eine fortlaufend aktualisierte Basisbibliothek aus Ressourcen und Verfahren für dein Produkt-Ökosystem. Er kann technische Spezifikationen, Design-Elemente, Dokumentationen und bewährte Verfahren beinhalten, ebenso wie grundlegende Prinzipien und Abläufe, die für Entscheidungen im Bereich des UX-Designs und der Produktentwicklung entscheidend sind.
Komponenten- versus Musterbibliotheken
Beide Arten von Bibliotheken spielen eine essenzielle Rolle in Designsystemen. Während sich Komponentenbibliotheken auf UI-Elemente wie Schaltflächen und Eingabefelder fokussieren, richten Musterbibliotheken ihr Augenmerk auf umfangreichere Designansätze, wie zum Beispiel Navigationsstrukturen oder die Präsentation von Daten.
2. Komponenten- und Musterbibliotheken
Dies sind wiederverwendbare visuelle Elemente und Interaktionsmuster, die die gemeinsame Schnittstelle und das Verhalten deines Produkts bestimmen. Sie können Entwürfe, Layouts, Interaktionsmuster, Codeschnipsel und Komponenten umfassen, unterstützt durch detaillierte Dokumentation.
Unterschied zwischen Designsystemen und Styleguides
Obwohl die beiden Begriffe oft synonym verwendet werden, sind Designsysteme ganzheitlicher und umfassen auch Programmierstandards und Benutzerfreundlichkeit. Ein Styleguide stellt dagegen eine Untergruppe dar, die sich in erster Linie auf visuelle Elemente wie Farben, Typografie und Bildsprache konzentriert.
3. Grundlegende Elemente
Diese legen die visuelle Sprache fest, einschließlich des Aussehens der Elemente und des allgemeinen Erscheinungsbildes für das Produkt, wie Farbe und Typografie. Dazu gehören auch Icons, Logos, Illustrationen und deine Zugänglichkeits- und Markenrichtlinien.
Designsysteme und UX: Mehr als nur Ästhetik
Es herrscht der weitverbreitete Irrglaube, dass Designsysteme die Ästhetik untergraben, die Kreativität von Designer*innen einschränken und eine einheitliche Gestaltung aller Produkte erzwingen. In Wahrheit unterstützen Designsysteme die Kreativen bei der Identifizierung wiederholbarer Muster, was wiederum Ressourcen für andere Herausforderungen freisetzt. Durch den Einsatz eines in Figma geteilten und verwalteten Designsystems können Designer*innen konsistente Komponenten nutzen und Varianten erstellen, um mühelos zwischen verschiedenen Modi und Bildschirmgrößen zu wechseln, ohne ständig Designs kopieren und einfügen zu müssen. Updates können zentral ausgerollt und im gesamten System propagiert werden, was die Konsistenz gewährleistet. Dadurch können sich Designer*innen dem nächsten Designproblem widmen oder intensiver mit bestehenden Problemen auseinandersetzen, um letztendlich intuitivere, zugänglichere und angenehmere Nutzererfahrungen zu schaffen.
Designer Advocate Ana Boyer räumt mit sechs Mythen auf, die dich vielleicht noch von der Nutzung eines Designsystems abhalten.
Warum ein Designsystem verwenden?
Die Stärke eines Designsystems zeigt sich in seiner Kapazität, Arbeitsprozesse zu vereinfachen, die Einheitlichkeit eines Produkts sicherzustellen und die Kooperation zwischen abteilungsübergreifenden Teams zu verbessern. Unabhängig davon, ob du klein anfängst oder auf plattformübergreifende Skalierung abzielst, ermöglicht ein Designsystem einem Team, effizienter zu arbeiten und schlicht mehr zu erreichen. Dies betrifft nicht nur die Entwicklung von Features, sondern auch die Gestaltung des gesamten Produkts.
Ein Designsystem dient als zentrale Informationsquelle, die Designredundanzen minimiert und den Entwicklungsprozess effizienter gestaltet. Durch die Verwendung eines Designsystems verbringen Designer*innen weniger Zeit mit der Neuerstellung von Komponenten. Sie können stattdessen aus einer vorgefertigten Bibliothek von markengeprüften, entwicklungsoptimierten Optionen wählen, um zügig Designs zusammenzustellen. Sobald Komponenten einschließlich Code, Design-Tokens und voreingestellten Animationen verfügbar sind, können Entwickler*innen diese in einem Bruchteil der Zeit in funktionalen, barrierefreien Code überführen. Unternehmen, die Designsysteme nutzen, erleben eine Transformation ihres Produktentwicklungszyklus mit verkürzten Zeitfenstern bis zur Markteinführung und einem stimmigen Benutzererlebnis.
Für neue Designer*innen kann ein Designsystem als Onboarding-Tool dienen, das sie mit dem Produkt und den Grundlagen vertraut macht und es ihnen ermöglicht, schneller an Projekten mitzuarbeiten. Mit zunehmender Reife des Systems bietet es den Teams eine einheitliche Vision und Sprache, was zu einem besseren Verständnis und konsistenteren Endprodukten beiträgt. Dies stärkt wiederum das Vertrauen der Nutzer*innen in das Produkt, was langfristig zu einem loyaleren und engagierteren Kundenstamm führen kann.
Kurze Geschichte der Designsysteme
Die Termini „Systeme“ und „Muster“ wurden erstmals in den späten 1960er Jahren im Kontext der NATO Software Engineering Conference dokumentiert – und werden hauptsächlich Christopher Alexander zugeschrieben. Sein Werk „Eine Muster-Sprache“, verfasst gemeinsam mit Murray Silverstein und Sara Ishikawa, behandelt die verknüpften Muster in der Architektur und gilt als Vorläufer dessen, was wir heute als „Designsysteme“ kennen.
Die Entwicklung der Designsysteme verläuft parallel zur Evolution der Technologie. Ihre Ursprünge liegen in den Anfängen des Grafikdesigns und der Druckmedien, wo Styleguides und typografische Normen den Grundstein für systematisches Design legten. Mit der zunehmenden Bedeutung des Brandings für Unternehmen in der Mitte des 20. Jahrhunderts entstand aufgrund der Notwendigkeit einer konsistenten Identität die Praxis umfangreicher Markenrichtlinien.
Mit der digitalen Revolution wurden die Prinzipien dieser Systeme von der Papier- in die Pixelform übersetzt und zunehmend komplexer, um mit dem rasanten Wachstum des Internets und des expandierenden App-Marktes Schritt zu halten. Apple war 1987 ein Vorreiter bei der Einführung einer kohärenten Designsprache, die das Aussehen unzähliger Benutzeroberflächen prägen sollte. Google, IBM und Microsoft folgten mit eigenen Beiträgen. Diese Systeme zielten nicht nur auf ästhetische Konsistenz ab, sondern verfolgten auch praktische Ziele: Sie stellten klare Dokumentationen und wiederverwendbare Muster bereit, um die Entwicklung zu beschleunigen und das User Interface Design zu verfeinern, um so den steigenden Anforderungen von Digitalprodukt-Teams gerecht zu werden.
NASA Graphics Standard Manual, erschienen im Januar 1976 mit einer Einleitung von NASA-Administrator Richard Truly.
Die Veröffentlichung von Brad Frosts Methodologie des Atomic Design im Jahr 2013 markierte einen Wendepunkt in der Gestaltung von Designsystemen. Dieser Ansatz revolutionierte unsere Herangehensweise an UI-Komponenten, indem er sie in eine klare Hierarchie von Atomen, Molekülen und Organismen einordnete und zudem ein einheitliches Vokabular für Design- und Entwicklungsteams schuf. Nur ein Jahr zuvor hatte ich selbst begonnen, mich intensiv mit dem Konzept des systematischen Designs zu beschäftigen, angetrieben durch meine Erfahrungen mit dem Twitter Bootstrap Framework und den Erkenntnissen von branchenspezifischen Konferenzen. Inspiriert durch die Arbeiten und Vorträge von Bryan Haggerty, Laura Kalbag und Josh Clark erkannte ich die Notwendigkeit eines systematischen Ansatzes, der flexibel genug ist, um sich an die schnell wechselnden Landschaften von Geräteplattformen und die Omnipräsenz von mobilen Endgeräten anzupassen. Inspiriert von klassischen Grafikstandards und Frameworks wie Bootstrap und der Zurb Foundation, setzte ich daran, ein Team aufzubauen und eine Kultur der Standards, wiederverwendbaren Assets und detaillierten Dokumentationen zu etablieren, was schließlich in die Entwicklung meines ersten von vielen Designsystemen mündete.
Rune Madsen veröffentlichte eine Geschichte der Designsysteme als Teil seines Kurses Programming Design Systems.
Diese Entwicklung reflektiert breitere Trends in der Branche – angefangen bei der Entstehung von Musterbibliotheken in den frühen 2000er Jahren bis hin zur Einführung responsiver Designmethoden. Diese Meilensteine betonen die unverzichtbare Rolle von Designsystemen als integralen Bestandteilen moderner digitaler Toolkits. Heute dienen Designsysteme als umfassende Ressourcen, die wegweisend für die Entwicklung digitaler Produkte sind und gewährleisten, dass diese nicht nur visuell stimmig, sondern auch intuitiv über verschiedenste Geräte und Plattformen nutzbar sind. Der Übergang von grundlegenden Richtlinien zu ausgeklügelten Frameworks verdeutlicht das dynamische Wechselspiel zwischen Technologie und Design, das von einem beständigen Streben nach Effizienz, Konsistenz und Innovation geprägt ist.
Woher weißt du, ob du ein Designsystem brauchst?
Figma Designer Advocate Chad Bergman und Product Manager Jacob Miller hosten Building Blocks, eine Sprechstunde für Designsysteme. Sieh dir die neuesten Folgen auf Youtube an.
Es gibt keine Einheitslösung
Auf deinem Weg zum eigenen Designsystem darfst du nicht vergessen, dass es auf diesem Gebiet keine Einheitslösung gibt. Unterschiedliche Unternehmen haben unterschiedliche Bedürfnisse, die unterschiedliche Lösungen erfordern.
Der ideale Zeitpunkt für die Implementierung eines Designsystems lässt sich nicht pauschal bestimmen. Stattdessen ist es eine strategische Entscheidung, die von den spezifischen Vorteilen, potenziellen Herausforderungen und den individuellen Gegebenheiten deines Unternehmens abhängt. Wann also solltest du dich für die Einführung eines Designsystems entscheiden?
Die Entscheidung für die Einführung eines Designsystems sollte sich an bestimmten Bedürfnissen orientieren:
Prüfung der Konsistenz
Analysiere das Design deines Produkts auf unterschiedlichen Plattformen. Falls du signifikante Inkonsistenzen erkennst oder eine mangelnde Kohärenz deiner Markenidentität feststellst, könnte dies ein Hinweis darauf sein, dass die Einführung eines Designsystems notwendig ist.
Berücksichtigung verschiedener Themen oder Plattformen
Muss dein Produkt nahtlos zwischen verschiedenen Themen wechseln, wie etwa zwischen einem Dunkel- und Hellmodus oder unterschiedlichen Marken? Muss es zudem auf einer Vielzahl von Geräteplattformen und Bildschirmgrößen funktionieren? Ein Designsystem könnte die Lösung sein, um dieser Komplexität souverän zu begegnen.
Abbau von Redundanz
Erstelle ein Verzeichnis aller sich wiederholenden Designaufgaben oder wiederkehrenden Probleme, die die Zeit deines Teams in Anspruch nehmen. Standardisierte Komponenten aus einem Designsystem können deinen Prozess rationalisieren.
Verbesserung der Kommunikation
Beobachte, wie dein Team über Design kommuniziert. Gibt es Missverständnisse? Geht viel Zeit für die Klärung von Designelementen verloren? Eine einheitliche Designsprache kann diese Schwierigkeiten effektiv lösen.
Erleichterung des Onboardings
Überprüfe den Einarbeitungsprozess neuer Teammitglieder. Ein robustes Designsystem kann diesen beschleunigen und effizienter machen, wodurch neue Mitarbeitende schneller an Projekten mitwirken können.
Steigerung der Effizienz des Lebenszyklus
Hinterfrage den Lebenszyklus deines Produkts. Wenn Design, Prototyperstellung und Updates beschleunigt werden sollen, kann ein Designsystem als Katalysator für die Effizienz fungieren und jede Stufe der Produktentwicklung verbessern.
Bevor du eine Entscheidung triffst, bewerte den aktuellen Arbeitsablauf deines Teams, die Nutzererfahrung mit deinem Produkt und die spezifischen Herausforderungen, die einer Lösung bedürfen. Eine umfassende Diskussion mit deinem Team kann dir helfen, den Bedarf und den möglichen Umfang eines auf deine Anforderungen zugeschnittenen Designsystems zu bestimmen.
Erfahre, wie Headspace ein Designsystem entwickelt hat, das mitatmet – durch die Verwendung von Funktionen wie Variablen in Figma für eine bessere Skalierbarkeit.
Antizipieren von Herausforderungen bei der Einführung eines Designsystems
Obwohl Designsysteme zahlreiche Vorteile mit sich bringen, sind sie nicht ohne Herausforderungen. Indem du ein Verständnis für diese Schwierigkeiten entwickelst, kannst du gezielter auf eine kohärentere und effizientere Gestaltungspraxis hinarbeiten.
Kontinuierliche Wartung
Ein Designsystem benötigt, genau wie jedes andere Produkt, ständige Pflege und Aufmerksamkeit – nicht nur bei der Erstinstallation, sondern während seiner gesamten Lebensdauer. Ähnlich wie alle erfolgreichen Produkte, die sich fortwährend weiterentwickeln, ist auch ein Designsystem nie wirklich fertig. Um es aktuell und relevant zu halten, sind spezielle Ressourcen und Zeitaufwand erforderlich, was es zu einer langfristigen Verpflichtung macht.
Verzögerte Rentabilität
Die Vorteile eines Designsystems sind zwar bedeutend, entfalten sich jedoch oft erst über einen längeren Zeitraum. Diese Verzögerung kann gelegentlich die Zustimmung des Managements beeinträchtigen, besonders wenn sie Ressourcen oder Aufmerksamkeit von unmittelbaren Projektzielen abzieht. Die anfängliche Investition, sowohl zeitlich als auch in Bezug auf die mögliche Erweiterung des Teams, kann erheblich sein, bevor die Vorteile und die Rentabilität deutlich erkennbar sind.
Zuweisung von Ressourcen
Die Zuweisung der richtigen Ressourcen ist ein Balanceakt. Über die anfängliche Entwicklung hinaus benötigen Designsysteme fortlaufenden Input von Designer*innen, Entwickler*innen und Produktmanager*innen, um wirksam zu bleiben. Dies kann eine Umstrukturierung der Prioritäten oder sogar eine Teamerweiterung erforderlich machen, um zu gewährleisten, dass das Designsystem nicht stagniert.
Kulturelle Transformation
Einer der subtilsten und zugleich komplexesten Aspekte ist der kulturelle Wandel, der für die unternehmensweite Implementierung eines Designsystems nötig ist. Es geht nicht nur darum, ein neues Set von Tools und Prozessen einzuführen, sondern vielmehr um eine Veränderung in der Art und Weise, wie Teams kommunizieren, zusammenarbeiten und ihre Projekte angehen. Ein Designsystem erfolgreich in die Struktur eines Unternehmens zu integrieren, erfordert Fürsprecher*innen, die sich für dessen Erfolg stark machen und den Wert des Systems vermitteln können. Wichtig ist, dass das sich weiterentwickelnde System die wechselnden Bedürfnisse und Beiträge seiner Nutzercommunity reflektiert und somit eine dynamische Ressource bleibt, geformt von denen, die es verwenden.
Sozialisieren des Systems
Alle Beteiligten für ein Designsystem zu gewinnen, kann anstrengender wirken als eine Gipfeltour. Als Teil des Prozesses musst du Stakeholder von den langfristigen Vorteilen überzeugen. Dafür sind klare Kommunikation, Demonstration der Auswirkungen und eine durchdachte Strategie notwendig. Oft bedeutet das auch, eine Gemeinschaft um das Designsystem herum zu etablieren und zu pflegen, die sich über diverse Abteilungen und Rollen hinweg erstreckt.
Wenn du diese Herausforderungen von Anfang an kennst und Strategien zu ihrer Bewältigung entwickelst, sind die Weichen für ein effizienteres und besser integriertes Designsystem gestellt. Die Reise mag lang sein, aber das Ziel – eine kohärentere, effizientere und besser skalierbare Designpraxis – ist den Aufwand zweifellos wert.
Denkst du über den Umstieg nach? Im Insider-Leitfaden für eine nahtlose Figma-Migrationvon Designer Advocate Clara Ujiie findest du jede Menge Ressourcen, Tipps und Tools für den Umstieg auf Figma.
Die nächsten Schritte auf deinem Weg zum Designsystem
Die Implementierung eines Designsystems zielt nicht nur auf die Etablierung einer Reihe von Standards ab, sondern auch auf den Aufbau einer Kultur der Konsistenz, Kollaboration und Effizienz. Designsysteme können ein echtes Abenteuer sein – und es gibt keinen universellen Ansatz, der für alle passt. Wenn ein neues System aktuell noch ein zu großer Schritt für dich ist, können selbst kleine Aktualisierungen einen großen Unterschied machen. Schau dir unsere anderen Artikel über Designsysteme, unseren Kurs Einführung in Designsysteme und Ressourcen wie offene Designsysteme in der Figma Community an.
✉️ Abonniere unseren redaktionellen Newsletter für mehr Tipps und Ideen zu Designsystemen!
Dies ist eine fortlaufende Serie, die noch viel mehr zu bieten hat. Worüber möchtest du mehr erfahren? Twittere mir oder schicke deine Fragen an @figma. Die Serie baut auf unseren Kurs Einführung in Designsysteme auf, den du dir auchauf YouTube ansehen kannst.
Erfahre mehr darüber, wie Figma Teams jeder Größe dabei hilft, die Einheitlichkeit zu verbessern, Designs zu skalieren und mit der Entwicklung schrittzuhalten, indem du unsereDesignsystem-Features nutzt oder ein Demo anforderst.
