Design-Systeme – Effizient, konsistent & modular
Was ist ein Design-System?
Ein Design-System ist wie ein Baukasten für die Gestaltung von digitalen Produkten. Es vereint grundlegende Designprinzipien, Bausteine – sogenannte UI-Komponenten – und Anwendungsbeispiele dieser. Dadurch können digitale Produkte einheitlich gestaltet werden – unabhängig vom Gerät oder Betriebssystem. Das ist besonders hilfreich für Produktlinien, die von mehreren Teams betreut werden, da sich die Mitglieder aus den verschiedenen Teams aus einer gemeinsamen Wissensquelle bedienen können und so die Markensprache erhalten bleibt.
Darum nutzen Unternehmen wie Google & Co. Design Systeme
Konsistente User Experience über verschiedene Plattformen hinweg
Ein Design-System sorgt für ein nahtloses Erlebnis für die Benutzer:innen, unabhängig davon, ob sie eine App auf dem Smartphone nutzen oder eine Webseite über ihren Desktop. Durch die Verwendung bekannter Interaktionsmuster ist ein nachhaltiges Verständnis Ihres Produkts garantiert.
Effiziente Gestaltung
Durch die Wiederverwendung von etablierten Komponenten und Mustern spart ein Design System Zeit und Ressourcen während des Design- & Entwicklungsprozesses. Sollten nachträglich Änderungen an einer Komponente aufkommen, kann diese schnell synchronisiert werden, ohne dass sie auf allen Screens händisch angepasst werden muss.
Entwicklungsnahes Design
Design Systeme ermöglichen eine reibungslosere Zusammenarbeit zwischen Design und Entwicklung, da alle notwendigen Informationen und Ressourcen zentralisiert und leicht zugänglich sind. Mit Hilfe von von Design Tokens, als globale Variablen für z.B. Farben, Größen oder Abstände, wird zudem ein einheitliches Vokabular zwischen Design und Entwicklung aufgebaut.
Die Rolle des Design-Systems im Scrum-Team
Design
Designer:innen nutzen das Design-System täglich, um schnell konsistente Designs zu erstellen. Durch die gemeinsame Wissensquelle werden wiederkehrende Designentscheidungen und Absprachen reduziert. Dadurch bleibt innerhalb des Sprints mehr Zeit für die Kreativarbeit an Konzepten und Verbesserungen der Benutzererfahrung. Des Weiteren spart es Zeit & Geld, da Änderungen an Komponenten automatisch über alle Screens hinweg synchronisiert werden können.
Entwicklung
Ist ein Design-System erst einmal im Team etabliert, arbeiten auch (Frontend-) Entwickler:innen häufig damit. Denn als Äquivalent zu den Komponenten im Designprogramm, entstehen diese auch in der Codebase als wiederverwendbare Code-Abschnitte, die die Entwicklung erheblich beschleunigen. Zur Dokumentation des Design-Systems werden Programme wie Supernova verwendet, in dem auch diese Code-Abschnitte ihren Platz finden, sodass die gemeinsame Wissensquelle ausgebaut wird.
Product Owner
Product Owner arbeiten zwar nicht direkt mit dem Design-System, können sich aber über einen effizienteren Workflow freuen. Das Ergebnis: Eine schnellere Markteinführung des Produkts wird wahrscheinlicher und es werden Kosten eingespart. Außerdem sorgt ein Design-System für eine bessere Skalierbarkeit des Produkts. Dank des vereinfachten Wartungsprozesses und der Möglichkeit, globale Änderungen schnell umzusetzen, kann flexibel auf sich ändernde Anforderungen reagiert werden.
Scrum-Master
Scrum-Master profitieren wie Product Owner indirekt von der Nutzung eines Design-Systems durch eine verbesserte Effizienz und Transparenz im agilen Entwicklungsprozess. Die einheitlichen Designprinzipien erleichtern die Kommunikation innerhalb des Teams und sorgen somit auch dafür, dass Scrum-Routinen produktiver verlaufen.
Der positive Einfluss eines Design-Systems wirkt sogar über die Grenzen des Scrum-Teams hinaus. User von Produkten, die mit Hilfe von Design-Systemen erstellt wurden, profitieren von der konsistenten Gestaltung. Die verschiedenen Funktionen des Produkts sind dadurch leichter zu erlernen, denn sie können sich auf bereits gelernte Interaktionsmuster stützen. Das Design-System lässt so positive Markenerlebnisse plattformübergreifend entstehen.
Unser Ansatz mit dem MUUUH! Design-System
Atomares Design
Klingt wie Rocket Science, ist es aber nicht! Das MUUUH! Design System basiert auf dem Atomic-Design-Ansatz. Das bedeutet, dass komplexere Bausteine, wie z.B. eine Suchleiste aus Komponenten wie einem Textfeld, Buttons und Icons zusammengesetzt werden. Durch die entstehende Vererbung von Stilen und die Einbindung von sogenannten Design Tokens, die Farben, Abstände & Co. definieren, ermöglicht uns das, das System schnell an Ihre individuelle Markensprache anzupassen.
Kollaborative Vielfalt mit Figma
Unser Design-System wurde in Figma aufgebaut. Mit seinen vielfältigen kollaborativen Funktionen holt das Designtool alle aus den Bereichen Design, Entwicklung, Projekt/Produktmanagement und Testpersonen an einen Tisch. Als Industrie-Liebling kann Figma mit vielen weiteren Tools verbunden werden, und so im Scrum-Workflow integriert werden. Gerne beraten wir Sie hinsichtlich Ihres Toolings, sodass sie das Beste aus unserem Design-System herausholen können.
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.
Bei Anliegen zum Thema Design-System kontaktieren Sie uns gerne!
Ansprechpartner
Natalie de Gregorio
Director UX
Als Direktorin für User Experience Design bei MUUUH! Next versteht Natalie sich als Expertin in der Entwicklung und Umsetzung von...
E-Mail: natalie.degregorio@muuuh.de
Mehr über Natalie de Gregorio