Gestaltungssysteme tragen dazu bei, den Produktgestaltungsprozess zu rationalisieren und ihn transparenter und berechenbarer zu machen. In diesem Artikel werden wir das Konzept der Designsysteme und die wichtigsten Schritte zum Aufbau neuer Designsysteme untersuchen.
Das Design wird zunehmend komplexer. Moderne Designprozesse erfordern eine enge funktionsübergreifende Zusammenarbeit zwischen allen an der Produktentwicklung beteiligten Teams. Da die Zeit bis zur Markteinführung eine so wichtige Rolle bei der Produktentwicklung spielt, bemühen sich die Designteams um eine Optimierung des Prozesses, um Produkte schnell, aber ohne Einbußen bei der Benutzerfreundlichkeit zu entwickeln.
Um dies zu erreichen, ändern Produktteams die Art und Weise, wie sie digitale Produkte entwerfen – sie führen Designsysteme ein, um den Designprozess transparenter und berechenbarer zu machen.
In diesem Artikel werden wir das Konzept der Designsysteme und die wichtigsten Schritte zum Aufbau neuer Designsysteme untersuchen.
Was ist ein Entwurfssystem?
Ein Entwurfssystem ist eine Sammlung wiederverwendbarer Komponenten, die von klaren Praktiken geleitet wird und es einem Produktteam ermöglicht, ein Produkt schneller zu entwickeln. Stell dir ein Designsystem als eine einzige Quelle der Wahrheit für die Produktteams vor, die es ihnen ermöglicht, Produkte zu entwerfen und zu entwickeln.
Viele Designer*innen fragen sich, was sie in ihr Designsystem aufnehmen sollen. Jedes Unternehmen hat andere Bedürfnisse, und es ist unmöglich, eine allgemeingültige Liste von Elementen zu erstellen, die jedes Designsystem verwenden sollte. Es gibt jedoch einige Elemente, die viele Designsysteme gemeinsam haben:
Komponenten und Muster
Komponenten sind funktionale Elemente des Designs. Betrachte sie als Bausteine für dein Designsystem. Kombiniert bilden die Komponenten Bibliotheken, auf die sich Designer*innen beziehen und die sie verwenden, wenn sie Produkte entwerfen.
Muster sind die Protokolle, die eine Art Konstruktionshandbuch für Designer*innen darstellen, auf das sie sich bei der Verwendung von Komponenten beziehen können.
Style guides
sich auf grafische Stile (Farben, Schriftarten, Illustrationen) und deren Verwendung konzentrieren. Style Guides sollten unter Berücksichtigung der Markenwerte erstellt werden (d. h. Verwendung von Markenfarben für funktionale Elemente wie Call-to-Action-Schaltflächen).
Grundsätze der Gestaltung
Designprinzipien sind die Leitregeln, die den Teams helfen, sinnvolle Designentscheidungen zu treffen. Designprinzipien spiegeln die gemeinsamen Überzeugungen des Designteams wieder.
How to Build a Design System in 10 Steps
Analysiere deinen aktuellen Designprozess
Um besser zu verstehen, welche Art von Designsystem du einführen möchtest, musst du damit beginnen, den derzeitigen Designansatz in deinem Unternehmen zu überprüfen und zu analysieren. Finden Sie die Antworten auf die folgenden Fragen:
- Wie sieht der Entwurfsprozess in deinem Unternehmen aus?
- Welche Werkzeuge werden in Ihrem Unternehmen eingesetzt?
Es empfiehlt sich auch, den Reifegrad der Produktteams zu bewerten. Anhand dieses Wissens kannst du abschätzen, wie viel Zeit für die Einführung des Systems in deinem Unternehmen benötigt wird.
2. Identifiziere das Alphabet der Marke
Die visuelle Sprache, die die Designer verwenden, sollte auf dem Alphabet einer Marke basieren. Das Alphabet umfasst die Markenidentität (Marken- und Produktwerte) und die Markensprache (Farben, Schriftarten, Formen, Animationen, Stimme und Ton). Definiere die Identität einer Marke und deine Sprache, indem du die Richtlinien der Marke überprüfst und die Stakeholder befragst, und beziehe dich dann auf diese Informationen, wenn du an Designprinzipien und Style Guides arbeitest.
3. Führe ein UI-Audit durch
Duplizierung, die zu Fragmentierung führt, und Fragmentierung führt zu Inkonsistenz. Die Identifizierung der Duplizierung von Designelementen hilft einem Team, das Szenario zu vermeiden, in dem Teammitglieder ein Element von Grund auf neu erstellen, nur um festzustellen, dass eine ähnliche Version davon bereits existiert.
Deshalb sollte die Klassifizierung aller visuellen Komponenten innerhalb des Produkts die erste Aufgabe sein, die das Designteam vor dem Aufbau eines Designsystems durchführt. Du musst dir die visuellen Qualitäten deiner Designelemente ansehen. Mit dieser Tätigkeit werden zwei Ziele verfolgt:
Aufzeigen der Bereiche mit den größten Unstimmigkeiten innerhalb des Produkts.
Identifizierung der wichtigsten und am häufigsten verwendeten Elemente und Komponenten des Produkts.
Ein UI-Audit ist ein mehrstufiger Prozess. Es ist wichtig, zuerst die wichtigsten UI-Eigenschaften wie Farben, Schriftarten und Bilder zu identifizieren und erst dann zu analysieren, wie diese Eigenschaften in den Komponenten verwendet werden. Verwende ein Tool wie CSS Stats, um zu sehen, wie viele einzigartige Farben und Schriftarten du in deinen Stylesheets hast.
Duplizierung, die zu Fragmentierung führt, und Fragmentierung führt zu Inkonsistenz. Die Identifizierung der Duplizierung von Designelementen hilft einem Team, das Szenario zu vermeiden, in dem Teammitglieder ein Element von Grund auf neu erstellen, nur um festzustellen, dass eine ähnliche Version davon bereits existiert.
Deshalb sollte die Klassifizierung aller visuellen Komponenten innerhalb des Produkts die erste Aufgabe sein, die das Designteam vor dem Aufbau eines Designsystems durchführt. Du musst dir die visuellen Qualitäten deiner Designelemente ansehen. Mit dieser Tätigkeit werden zwei Ziele verfolgt:
Aufzeigen der Bereiche mit den größten Unstimmigkeiten innerhalb des Produkts.
Identifizierung der wichtigsten und am häufigsten verwendeten Elemente und Komponenten des Produkts.
Ein UI-Audit ist ein mehrstufiger Prozess. Es ist wichtig, zuerst die wichtigsten UI-Eigenschaften wie Farben, Schriftarten und Bilder zu identifizieren und erst dann zu analysieren, wie diese Eigenschaften in den Komponenten verwendet werden. Verwende ein Tool wie CSS Stats, um zu sehen, wie viele einzigartige Farben und Schriftarten du in deinen Stylesheets hast.
4. Definiere Designprinzipien
Die Gründe für Designentscheidungen zu verstehen, ist entscheidend für die Schaffung eines außergewöhnlichen Benutzererlebnisses. Deshalb ist es bei der Festlegung der Designprinzipien für ein System von entscheidender Bedeutung, dass sich die Teams auf eine klare Zielsetzung einigen, um Konsistenz und Ausgewogenheit zu gewährleisten.
Designprinzipien sollten drei grundlegende Fragen beantworten:
- Was wir bauen,
- Warum wir es bauen
- Wie werden wir es bauen?
Es ist wichtig, dass die Gestaltungsprinzipien die Werte Ihrer Organisation widerspiegeln und mit der Gesamtvision übereinstimmen.
5. Komponenten-/Pattern-Bibliothek erstellen
Sammle alle funktionalen und dekorativen Teile deiner Benutzeroberfläche – Eingabefelder, Schaltflächen, Formulare, Bilder, um nur einige zu nennen – und bewerte nach den Erfordernissen des Projekts (in Übereinstimmung mit den Nutzerbedürfnissen/Unternehmenszielen), und lass nur das übrig, was du brauchst.
6. Regeln definieren
Eines der Hauptziele eines Designsystems ist es, die kreative Richtung zu erweitern. Das System sollte die Designer nicht auf eine bestimmte Designrichtung festlegen. Stattdessen sollte es Designern und Entwicklern einen Rahmen bieten, der genügend Freiraum lässt, um verschiedene Ansätze zu erforschen, bevor sie sich für einen entscheiden, dem sie folgen.
In dem Buch „Design Systems“ definiert Alla Kholmatova zwei Arten von Regeln:
- Strenge Regeln. Die Designer*innen müssen bei der Einführung neuer Komponenten und Muster in das Entwurfssystem einen strengen Prozess einhalten.
- Lose Regeln. Lose Regeln haben eher den Charakter von Empfehlungen als von strengen Auflagen. Designer und Entwickler können die Regeln auslassen, wenn sie glauben, dass sie ohne die Regeln ein besseres Design erstellen können.
Indem wir ein Gleichgewicht zwischen strengen und lockeren Regeln finden, finden wir einen Sweet Spot zwischen Strenge und Flexibilität.
7. Festlegung einer Governance-Strategie
Entwurfssysteme sind dynamisch und entwickeln sich ständig weiter. Deshalb ist es wichtig, den Prozess der Genehmigung von Änderungen in Ihrem Designsystem zu definieren. Eine klare Governance-Strategie ist unerlässlich, um sicherzustellen, dass Ihr Designsystem an Änderungen angepasst werden kann.
In dem Artikel Team Models for Scaling a Design System (Teammodelle für die Skalierung eines Designsystems) definiert Nathan Curtis drei verschiedene Governance-Modelle:
- Solitäres Modell: In diesem Modell regiert ein „Overlord“ (eine direkt verantwortliche Person oder eine Gruppe von Personen) das Designsystem.
2. Zentralisiertes Modell: Bei diesem Modell ist ein Team für das System verantwortlich und leitet seine Entwicklung.
3. Föderiertes Modell: Bei diesem Modell sind mehrere Personen aus mehreren Teams für das System zuständig.
Jedes der Modelle hat Stärken und Schwächen, aber das Einzelkämpfer-Modell ist das anfälligste unter ihnen, weil es ein eingebautes Risiko birgt – wenn eine Person für so viel zuständig ist, kann diese Person schnell zum Engpass für die Erledigung vieler Aufgaben werden.
In vielen Fällen ist es möglich, eine Kombination von Modellen zu verwenden. Das Modell des Salesforce-Teams zum Beispiel ist eine Kombination aus zentralisierten und föderierten Modellen. Das Lightning Design System von Salesforce hat ein Kernteam, das für die Verwaltung des Systems verantwortlich ist, aber es gibt auch Mitarbeiter, die als ein Verbund von Praktikern agieren.
8. Definiere die Struktur der Elemente
Viele Entwurfssysteme leiden unter der Duplizierung von Funktionselementen – Teammitglieder erstellen Komponenten, die zu sehr auf einen einzigen Anwendungsfall ausgerichtet sind. Infolgedessen wird das System unflexibel, und seine Benutzer (Designer und Entwickler) müssen jedes Mal neue Komponenten erstellen, wenn sie ein neues Szenario abdecken müssen.
Wenn wir ein erfolgreiches Designsystem wie Material Design analysieren, stellen wir fest, dass solche Systeme in hohem Maße wiederverwendbar sind. Die hohe Wiederverwendbarkeit ermöglicht es Designern und Entwicklern, Material Design als Grundlage für ihre Produkte zu verwenden.
Es ist empfehlenswert, Komponenten zu entwickeln, die nicht an einen einzigen Anwendungsfall gebunden sind, sondern in verschiedenen Kontexten wiederverwendet werden können. Um wiederverwendbar und skalierbar zu sein, müssen die Komponenten folgende Eigenschaften aufweisen:
- Modular. Modulare Komponenten sind in sich geschlossen – sie haben keine Abhängigkeiten. Modularität hilft dabei, wiederverwendbare und austauschbare Komponenten zu schaffen.
- Zusammensetzbar. Es ist möglich, neue Komponenten zu erstellen, indem man bestehende Komponenten kombiniert.
- Anpassbar. Es ist möglich, Komponenten anzupassen und zu erweitern, damit sie in verschiedenen Kontexten funktionieren.
9. Sicherstellen, dass alle Teams eine gemeinsame Sprache verwenden
Der Hauptzweck eines Entwurfssystems besteht darin, die Arbeit der Teams zu erleichtern, weshalb es noch wichtiger ist, alle zur Nutzung des Systems zu ermutigen, als es zu bauen. Designsysteme sollten in die Arbeitsabläufe der Teams integriert werden, ein wichtiger Bestandteil der täglichen Produktivität von Designern und Entwicklern werden und den Teammitgliedern einen Mehrwert bieten.
Wenn du gerade erst damit begonnen hast, ein Designsystem in den Designprozess deines Unternehmens zu integrieren, führe eine Reihe von Interviews durch, um zu verstehen, wie die Leute es nutzen, und nutze diese Informationen, um dein Designsystem anzupassen.
10. Änderungen kommunizieren
Ein Designsystem ist keine statische Sammlung von Artefakten, sondern ein Nebenprodukt Ihres Produktdesigns, das sich zusammen mit dem Unternehmen weiterentwickelt. Sobald die Teams beginnen, ein Designsystem zu verwenden, ist es wichtig, Änderungen und Aktualisierungen an die gesamte Organisation zu kommunizieren. Geben Sie Aktualisierungen regelmäßig und mit einem Änderungsprotokoll heraus. Das Protokoll sollte die Benutzer darüber informieren, welche Änderungen in der neuen Version eingeführt wurden und wie sich die Aktualisierungen auf ihre Arbeit auswirken werden.
10 Beispiele für Entwurfssysteme
Hier findest du eine Reihe beliebter Gestaltungssysteme.
Material Design by Google
Material Design ist eine von Google im Jahr 2014 entwickelte Designsprache. Die Idee, diese Designsprache zu entwickeln, war einfach – Designern und Entwicklern ein Werkzeug an die Hand zu geben, mit dem sie intuitive und schöne Produkte erstellen können. Material Design ist ein sehr anpassungsfähiges System, das für verschiedene Produkte verwendet werden kann.
Lightning Design System by Salesforce
Das Lightning Design System ermöglicht es Produktteams, umfassende Unternehmenserlebnisse und benutzerdefinierte Anwendungen mit den Mustern und bewährten Verfahren von Salesforce zu erstellen.
Schlussfolgerung
Ein gut durchdachtes Designsystem dient als Nordstern für Ihre Produktentwicklung. Es wird zu einem Teil der DNA eines Unternehmens, der den Produktteams hilft, konsistentere Benutzererlebnisse zu schaffen und eine designorientierte Kultur zu fördern. Designsysteme ermutigen die Menschen, die an einem Produkt arbeiten, über die Bausteine hinaus zu schauen und über den Zweck ihres Designs nachzudenken.
Mit Elementor 3.0 kannst du deine Designsysteme ganz einfach von einer Seite aus verwalten.
übersetzt von Lisa Kraus
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
elementor.com/blog/design-system/
