Eine schrittweise Anleitung zur Erstellung eines Designsystems

Intro

In dieser Ära der allgegenwärtigen Erreichbarkeit ist die Allgegenwärtigkeit zur Norm geworden. Es ist jedoch auch bekannt, dass Konsistenz Glaubwürdigkeit bedeutet. Die Nutzer sind heute sensibilisiert. Ein schnelles und reibungsloses Erlebnis ist eine Grunderwartung, unabhängig von der Schnittstelle.

Außerdem ist Zeit ein Gut, das Sie nicht verschwenden dürfen. All dies sollte ausreichen, um Sie dazu zu bringen, mehr aus Ihrer Website oder Schnittstelle zu machen. Allerdings ist der Versuch, 50 verschiedene Komponenten fehlerfrei zu gestalten, eine große Herausforderung.

Trommelwirbel für "Design System" ist da, um Ihnen das Leben leicht zu machen.

Was ist ein Entwurfssystem?

Ein Designsystem ist ein umfangreiches Archiv mit klar dokumentierten, wiederverwendbaren Komponenten, die das Produktteam für die Erstellung digitaler Erlebnisse nutzen kann. Mit anderen Worten: Betrachten Sie Designsysteme als die einzige Quelle der Wahrheit für ein Unternehmen in Bezug auf das Design.

Mehr noch als Style Guides oder Musterbibliotheken ist ein Designsystem ständig in Bewegung. Dieses Ökosystem von Richtlinien für verschiedene Bereiche, einschließlich UX-Design, kann als Rahmen von Bausteinen für jedes Projekt verwendet werden, um sicherzustellen, dass alle Komponenten konsistent sind und dem Branding entsprechen.

Ein Designsystem ist für Start-ups, wachsende Unternehmen und Konzerne gleichermaßen hilfreich und wird im Laufe der Produktentwicklung zu einem unverzichtbaren Bestandteil. Es kann auch die Geschäftsziele, den Arbeitsablauf, die Teamarbeit, die Benutzererfahrung und die allgemeine Markenerfahrung positiv beeinflussen.

Was sind die Vorteile eines Designsystems?

Einige der Vorteile der Implementierung eines Systementwurfs sind

1. Höhere Effizienz bei geringerem Zeitaufwand - Ein Hauptvorteil jedes Designsystems ist die Möglichkeit, Design- und Entwicklungsarbeiten schnell zu erstellen und wiederherzustellen. Teams können vorgefertigte Elemente verwenden, um das Rad nicht ständig neu erfinden zu müssen und das Risiko von Inkonsistenzen zu verringern.
2. Verbessert die visuelle Konsistenz über alle Seiten und Kanäle hinweg - Das Fehlen eines unternehmensweiten Designsystems kann zu inkonsistenten Bildern, einem fragmentierten Benutzererlebnis oder einer Isolierung vom Branding führen. Ein kohärenter Satz von Standards hilft auch bei der Verwaltung größerer Umgestaltungen oder visueller Rebrands in großem Umfang.
3. Fördert eine einheitliche Sprache - Eine gemeinsame Designsprache verringert die Möglichkeit, dass Design- oder Entwicklungszeit aufgrund von Missverständnissen innerhalb und zwischen funktionsübergreifenden Teams verschwendet wird.
4. Ermöglicht eine bessere Konzentration auf komplexere Probleme - Teams können komplexe Probleme, wie die Priorisierung von Informationen, die Verwaltung von Reisen usw., besser lösen, wenn einfache UI-Komponenten erstellt werden und unmissverständlich sind.
5. Dient als Referenz- und Schulungsinstrument für Mitarbeiter - Ein Designsystem erleichtert den Einführungsprozess bei personellen Veränderungen. Außerdem erleichtert es neuen Mitarbeitern den Einstieg in das UI-UX-Design oder die Erstellung von Inhalten.
6. Trägt zu einer starken und zeitlosen Marke bei - Der Zweck eines Designsystems ist es, eine bestimmte Identität und ein bestimmtes Design hinter den Produkten zu vermitteln, die es transportiert. Es trägt dazu bei, wirkungsvolle Marken zu schaffen und hilft den Menschen, sich an die Markenerfahrung zu erinnern. Dadurch fühlen sich die Menschen stärker mit einer Marke verbunden und vertrauen ihr mehr.

Ein Zehn-Schritte-Leitfaden zum Aufbau eines Designsystems

Wir haben einen zehnstufigen Prozess ausgearbeitet, der Ihr Unternehmen bei der Erstellung eines Designsystems unterstützt.

1. Analysieren Sie Ihren bestehenden Designprozess gründlich.

Der erste Schritt bei der Entwicklung einer Strategie und der Initiierung eines Prozesses besteht darin, zu verstehen, wo Sie sich derzeit befinden. Eine Überprüfung und Analyse des aktuellen Gestaltungsprozesses in Ihrem Unternehmen kann Ihnen helfen, das für Ihre Marke am besten geeignete Systemdesign besser zu verstehen. Stellen Sie sich die folgenden Fragen:

• Welchen Ansatz verfolgt Ihr Unternehmen derzeit bei der Gestaltung?
• Welche Instrumente setzt Ihre Organisation bereits ein?

Stellen Sie sicher, dass Sie den Reifegrad des Produktteams bewerten. Dies wird Ihnen helfen, die für die Implementierung des neuen Systems in Ihrem Unternehmen erforderliche Zeit grob einzuschätzen.

2. Bestimmen Sie das Alphabet Ihrer Marke

Das Alphabet einer Marke führt zur Markenidentität, d. h. zu den Marken- und Produktwerten und zur Markensprache. Die Markensprache umfasst Formen, Schriftarten, Farben, Animationen, Stimme und Tonfall.

Die Designer verwenden eine visuelle Sprache, die durch das Alphabet der Marke definiert ist. Die Überprüfung der Markenrichtlinien und Gespräche mit den Beteiligten können Ihnen helfen, die Markenidentität und -sprache zu verstehen.

3. Durchführung eines Audits für das aktuelle Produkt AI

Die Durchführung eines UI-Audits des aktuellen Produkts hilft Ihnen bei der Bewältigung einer großen Herausforderung des Produktdesigns: Design-Duplizierung. Mit dem Audit sollen zwei Ziele erreicht werden.

• Weisen Sie auf die Bereiche im Produkt hin, die erhebliche Unstimmigkeiten aufweisen.
• Erkennen Sie die am häufigsten verwendeten und wichtigsten Elemente des Produkts.

Ein UI-Audit ist ein mehrstufiger Prozess. Entscheidend ist die Identifizierung und Analyse der wichtigsten UI-Eigenschaften und ihrer Verwendung in den Komponenten. Sie können verfügbare Tools einsetzen, um die Anzahl der einzigartigen Farben und Schriftarten in Ihren Stylesheets zu ermitteln. Anschließend können Sie jedes Website-Design in einzelne Elemente aufschlüsseln.

4. Legen Sie die Gestaltungsprinzipien Ihres Systems fest

Um ein hervorragendes Benutzererlebnis zu schaffen, ist es unerlässlich, die Gründe für Designentscheidungen zu verstehen. Darüber hinaus erleichtern klare Ziele die Festlegung von Designprinzipien und die Abstimmung mit den Teams.

Möchten Sie einen Designsystemprozess haben? Beginnen Sie mit diesen Fragen:

• Was schaffen Sie?
• Warum machen Sie es
• Wie werden Sie es bauen?

Die Gestaltungsprinzipien müssen Ihre Markenwerte und Ihre Vision widerspiegeln.

5. Erstellen einer Komponentenbibliothek

Diese auch als Musterbibliothek bezeichnete Sammlung sollte alle funktionalen und dekorativen Elemente Ihrer Benutzeroberfläche enthalten. Bewerten Sie die Komponenten entsprechend dem Projekt, den Benutzeranforderungen und den Geschäftszielen und behalten Sie die, die Sie benötigen.

6. Regeln aufstellen

Designsysteme sind nicht dazu gedacht, Designer auf eine bestimmte Designrichtung zu beschränken. Im Gegenteil, sie sollen Designern und Entwicklern lediglich einen grundlegenden Rahmen bieten, der die kreative Richtung erweitert und Raum für Innovationen lässt.

Es handelt sich um zwei Ansätze für Design System Regeln, wie sie im Buch von Alla Kholmatova erwähnt werden:

• Strenge Regeln - Designer und Entwickler folgen einem strengen Prozess, um neue Muster oder Komponenten einzuführen.
• Lose Regeln - Diese Regeln erlauben es Designern und Entwicklern, sich nicht an strenge Vorgaben zu halten, wenn sie glauben, dass dies zu einem besseren Design führt.

Wie in vielen anderen Bereichen des Lebens ist es wichtig, das richtige Gleichgewicht zwischen diesen Regeln zu finden, damit das Produkt konsistent und gleichzeitig kreativ sein kann.

7. Wählen Sie Ihr Modell der Governance

Dynamische, sich ständig weiterentwickelnde Gestaltungssysteme erfordern ein einfaches Verfahren zur Genehmigung und Umsetzung von Änderungen. Es gibt drei Modelle der Governance:

• Solitäres Modell - Eine Einzelperson oder eine Gruppe von Einzelpersonen "regiert" direkt den Designsystemprozess.
• Zentralisiertes Modell - Ein Team ist verantwortlich und leitet die Entwicklung des Systems.
• Föderiertes Modell - Mehrere Personen aus verschiedenen Gruppen leiten den Systementwicklungsprozess.

Zwar hat jedes dieser Modelle seine Vor- und Nachteile, aber vor allem das Einzelkämpfermodell kann dazu führen, dass die zuständige Person zum Engpass für die Ausführung vieler Aufgaben wird. Am besten ist es, eine Kombination aus verschiedenen Modellen zu verwenden, die auf Ihre Bedürfnisse abgestimmt sind.

8. Komponentenstruktur definieren

Die Duplizierung funktionaler Komponenten ist eine große Herausforderung bei Designsystemen. Dies führt zu einem unflexiblen System und verlangt von den Designern (und Entwicklern), jedes Mal neue Elemente zu erstellen, wenn es ein neues Szenario gibt.

Erfolgreiche Systementwürfe sind in hohem Maße wiederverwendbar und ermöglichen es den Benutzern, sie als Grundlage für ihre Produkte zu nutzen. Daher empfiehlt es sich, Elemente zu entwickeln, die in verschiedenen Inhalten wiederverwendet werden können.

Kriterien für wiederverwendbare und skalierbare Komponenten:

• Modular - Unabhängige Komponenten und austauschbare Elemente.
• Kompatibel - Verschmelzung vorhandener Komponenten zur Erstellung neuer Komponenten
• Anpassbar - Anpassbare Komponenten, die in einer Vielzahl von Kontexten funktionieren.

9. Stellen Sie sicher, dass alle Teams eine einheitliche Sprache verwenden

Zu den Aufgaben eines Entwurfssystems gehört die Erleichterung einer nahtlosen Teamarbeit. Daher ist die Integration des Systems in den Arbeitsablauf des Teams von entscheidender Bedeutung. Es erhöht die Produktivität und bietet den Teammitgliedern einen Mehrwert.

Wenn Sie bei der Erstintegration besser verstehen, wie verschiedene Personen das Entwurfssystem nutzen, können Sie das System entsprechend anpassen.

10. Regelmäßige Übermittlung von Änderungen

Ein Designsystemprozess entwickelt sich mit der Organisation und kann nicht statisch sein. Daher ist es nach der Einführung des Systems in Ihrem Unternehmen wichtig, alle Änderungen zu kommunizieren und das Unternehmen auf dem Laufenden zu halten.

Ein übersichtliches und gut gepflegtes Änderungsprotokoll kann den Benutzern helfen, die verschiedenen Upgrades zu verstehen und zu erkennen, wie sie sich auf ihre Arbeit auswirken werden.

Drei vorbildliche Beispiele für den Einstieg

Atlassian Entwurfssystem

(https://atlassian.design/)

Das Atlassian Design System, ein bekanntes australisches Unternehmen für Unternehmenssoftware, zielt darauf ab, eine nahtlose Zusammenarbeit zwischen agilen, verstreuten Teams auf der ganzen Welt zu ermöglichen.

Trello und Jira, zwei der weit verbreiteten Collaboration-Tools von Atlassian, spiegeln die Design-Philosophie des Unternehmens vollständig wider. Bei dieser Philosophie geht es darum, die digitale Erfahrung zu nutzen, um die Produktivität und das Gesamtpotenzial von Teams und einzelnen Teammitgliedern zu steigern.

Das Atlassian Design System bietet agile Techniken und eine effektive Verfolgung jeder einzelnen Phase eines Projekts, von der Produktplanung bis zur Auslieferung. Dies führt letztendlich zu vorteilhaften Ergebnissen bei der Erstellung und Lieferung von Produkten. Ihr Design System umfasst hauptsächlich:

1. Gestaltungsrichtlinien
2. Markenstandards
3. Produkt
4. Abbildung
5. Prototyping
6. Marketing
7. Persönlichkeit

IBM Entwurfssystem

(https://carbondesignsystem.com/migrating/guide/design)

IBM ist ein Paradebeispiel für ein großes IT-Unternehmen, das weltweit tätig ist und sein eigenes Designsystem verfolgt.

Ihr Leistungsspektrum reicht von der Unternehmensberatung und -finanzierung über die Erstellung von Software und IT-Hosting/Management bis hin zu Lösungen, die Software mit Hardware verbinden.

Das Grundprinzip von IBM ist es, mit Hilfe von Wissenschaft, Vernunft und Intellekt ständig den Fortschritt voranzutreiben, sei es in der menschlichen Gesellschaft oder bei einer Marke.

Laut IBM ist ein gutes Design nicht nur eine Notwendigkeit, sondern auch eine Verpflichtung gegenüber den Benutzern. Hier sind einige der herausragenden Funktionen des Carbon Design Systems, das Entwicklern und Designern, die mit Adobe, Axure und Sketch arbeiten, eine Fülle von Tools und Ressourcen bietet:

1. Datenvisualisierung
2. Muster
3. Komponenten
4. Leitlinien
5. Anleitungen

Uber Design System

(https://baseweb.design/)

Wir alle sind mindestens einmal mit Uber gefahren. Das amerikanische Technologieunternehmen setzt auf Bewegung, einschließlich Lebensmittellieferung, Ride-Hailing, Peer-to-Peer-Ridesharing und Mikromobilität mit Motorrollern und Elektrofahrrädern.

Uber braucht ein effizientes Systemdesign, damit diese Art von Service über alle Untermarken, internen Marken, Produkte und Projekte hinweg einwandfrei funktioniert.

Die wichtigsten Eigenschaften von Uber Design System sind:

1. Markenarchitektur
2. Zusammensetzung
3. Tonfall der Stimme
4. Antrag
5. Abbildung
6. Fotografie
7. Ikonographie
8. Farbe
9. Logo
10. Typografie

Hinweise, die Sie vor der Erstellung Ihres ersten Designsystems beachten sollten

1. Frühzeitige, klare Kommunikation ist Ihr neuer bester Freund

Es kann kompliziert sein, Ihre internen Kunden sofort einzubeziehen. Ihr Feedback kann den Prozess sogar behindern, wenn es zweideutig ist, zu früh in einem Alpha- oder Beta-Release-Zyklus kommt oder nicht hilfreich ist.

Sagen Sie Ihren Kunden, den Nutzern des Entwurfssystems, was Sie brauchen, um sicherzustellen, dass Sie konstruktives Feedback erhalten. Wenn Sie sich in einem frühen Vorveröffentlichungszyklus befinden, sollten Sie ehrlich und klar sagen, welchen Input Sie genau benötigen. Dies zeigt, dass Sie nach den wichtigsten Schwachstellen des Produkts suchen und nicht nach Kritikpunkten mit hohem Wiedererkennungswert.

Achten Sie darauf, dass Sie nicht zu viel nachdenken und Ihren Verstand ausschalten, aber zögern Sie nicht, zu viel zu kommunizieren.

2. Ihre Schritte sind nicht das Einzige, was Sie verfolgen müssen

Ein entscheidender Punkt, der bei der Prioritätensetzung fehlt, ist oft die Verfolgung der Nutzung von Designsystemen. Es ist unerlässlich, zu verstehen, wo das System genutzt wird, von wem, wie oft und wie häufig es aktualisiert wird.

Die Einführung einer täglichen statistischen Erfassung, welche Teams genau welche Versionen der Bibliothek verwenden, ermöglicht ein angemessenes Verständnis der Annahme-, Upgrade- und Downgrading-Rate.

Wenn Sie die Teams ermitteln, die selten aktualisieren, können Sie die Probleme, die die Aktualisierung blockieren, ermitteln und anschließend beheben.

3. Feedback-Mechanismen sind so unterbewertet wie Rhaeghal aus GOT

Um sicherzustellen, dass Ihr System nicht nur wertvoll für seine Nutzer ist, sondern auch etwas, zu dem sie sich zugehörig fühlen und aktiv beigetragen haben, sind einfache, aber unkomplizierte Möglichkeiten für die Nutzer, Feedback zu geben (Slack, E-Mail usw.) und zum System beizutragen, ein wichtiger Bestandteil.

Geben Sie immer Anweisungen dazu, wie und wo Feedback gegeben werden kann, und gehen Sie nie davon aus, dass ein Benutzer es an der Stelle findet, die Sie für die offensichtlichste halten.

Ein Designsystem ist der Nordstern, den Ihr Unternehmen braucht

Ein erfolgreiches, gut durchdachtes Designsystem wird zu einem Teil des Rückgrats eines Unternehmens, was zu konsistenten und verbesserten Erfahrungen führt. Darüber hinaus erhalten Designer und Entwickler die Möglichkeit, den Zweck des Produkts besser zu kommunizieren, anstatt sich mit der Zusammenstellung von Grundbausteinen zu begnügen.

Jeder Generalist kann Ihr Partner bei der Entwicklung eines Designs sein, aber nur ein Designspezialist erkennt die aktuellen Probleme, Herausforderungen und Wünsche, um ein Designsystem speziell für Sie zu entwickeln. Jetzt ist nicht die Zeit, um zu warten. Mit diesem umfassenden Leitfaden zur Erstellung eines Designsystems sind Sie nur noch eine Initiative von einer vollständigen Umgestaltung Ihres Produktionsprozesses entfernt.

Referenzen

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081