Chapters
Erfahren Sie, wie Sie ein Designsystem von Grund auf neu erstellen und implementieren können, indem Sie diesen 9 Schritten folgen, die auf den Erfahrungen unseres Design Team Leads, Paweł Knieć, basieren.
Designsysteme spielen eine entscheidende Rolle in der heutigen Produktentwicklung, da sie es Teams ermöglichen, hochwertige digitale Erlebnisse zu schaffen. Allerdings kann es ohne die richtige Anleitung eine überwältigende Aufgabe sein, ein Designsystem von Grund auf neu zu erstellen.
Wir teilen unsere Erkenntnisse zum Aufbau eines effektiven Designs, das die Gesamtqualität Ihres digitalen Produkts hebt, egal ob Sie Designer, Entwickler oder Produktinhaber sind. In diesem Artikel teilt unser Design Team Lead praktische Tipps zum Entwerfen, Implementieren und Pflegen eines Designs.
Über den Experten - Paweł Knieć
Design Team Lead bei EL Passion mit über 14 Jahren Erfahrung in der Designbranche, spezialisiert auf UX/UI-Design. Paweł ist ein Experte für visuelles Design, E-Commerce und ein Enthusiast von Designsystemen. Mit einem scharfen Auge für Details und einem tiefen Verständnis der benutzerzentrierten Designprinzipien schafft er visuell fesselnde Schnittstellen, die die Benutzererfahrung priorisieren und Konversionen fördern.
Was ist ein Designsystem?
Ein Designsystem spielt eine entscheidende Rolle bei der Entwicklung kohärenter digitaler Produkte, indem es eine Sammlung von Standards, Mustern und Praktiken bereitstellt. Es dient als Referenz für das gesamte Projektteam und stellt sicher, dass Designer und Entwickler konsistente Design- und Codeentscheidungen treffen. Dies führt zu einer harmonischen Benutzererfahrung, die visuell ansprechend und über verschiedene Plattformen und Geräte hinweg kohärent ist.
Typischerweise bestehen Designsystme aus Komponenten- und Mustersammlungen, Design-Tokens, Markenstilrichtlinien und umfassender Dokumentation. Ziel ist es, Kohärenz in den Designprinzipien zu fördern, die Effizienz zu steigern und Arbeitsabläufe zu optimieren.
Was sind die Vorteile eines Designsystems?
Die Implementierung eines Designsystems bringt zahlreiche Vorteile. Das Hauptziel eines Designsystems ist es, Konsistenz in Benutzeroberflächen zu gewährleisten, die Benutzererfahrung zu verbessern und Markentreue aufzubauen. Das Designsystem erleichtert den reibungslosen Übergang und die Kommunikation zwischen Design- und Entwicklungsteams, optimiert die Arbeitsabläufe und reduziert die Notwendigkeit für umfangreiche Meetings und Fehlerbehebungen.
Paweł Knieć: Designsysteme erleichtern die Schaffung von Ordnung und Konsistenz innerhalb digitaler Produkte. Sie spielen eine entscheidende Rolle beim Schutz der Markenidentität, verbessern die Benutzererfahrung und beschleunigen die Design- und Entwicklungsprozesse.
Durch die Priorisierung guter Designprinzipien verhindert ein Designsystem Designschulden und sichert eine solide Grundlage für langfristigen Erfolg. Ein gut implementiertes Designsystem spart Zeit und Geld, indem es die Entwicklungs- und Wartungskosten senkt und die Markteinführungszeit verkürzt.
Wie man ein Designsystem in 9 Schritten aufbaut?
Der Aufbau eines effizienten Designs ist ein Prozess, der sowohl Zeit als auch Erfahrung erfordert. Befolgen Sie diese 9 praktischen Schritte, um ein effektives Designsystem zu erstellen, das die Zusammenarbeit verbessert, den Workflow optimiert und die Qualität Ihrer digitalen Produkte erhöht.
1. Überprüfung bestehender Komponenten
Der erste Schritt zum Aufbau eines Designsystems besteht darin, alle visuellen Elemente Ihres Produkts zu untersuchen. Eine Überprüfung ermöglicht es Ihnen, abzuschätzen, wie kompliziert der Prozess sein könnte und welches UX-Reifegradniveau Ihre Organisation hat. Erstellen Sie dann einen Katalog von UI-Komponenten, der als Grundlage für Ihr System dient und Ihnen hilft, Inkonsistenzen zu identifizieren.
PK: Sie können auch damit beginnen, die Organisationsstruktur oder verschiedene Bereiche der Organisation zu überprüfen, um ein besseres Gefühl für das Umfeld zu bekommen, in dem das Designsystem existiert (oder existieren wird). Überprüfen Sie, wie die Arbeitsabläufe jedes dieser Produktteams aussehen und wie sie kommunizieren, um eine grobe Vorstellung davon zu bekommen, für wen wir dies erstellen und wie es in den Arbeitsablauf des Teams passt.
2. Lass dich von den Besten inspirieren
Recherchiere andere Designsysteme, um Inspiration zu gewinnen und bewährte Praktiken führender Marken zu nutzen. Achte darauf, wie sie Komponenten organisieren und anzeigen, welche Elemente das System umfasst und wie es auf deine Organisation angewendet werden kann.
Quelle: Uber
Beispiele großartiger Designsysteme:
3. Beginnen Sie mit Atomen
Bei der Erstellung eines Designsystems nutzen Sie atomic design - eine Methodik zum Aufbau von Pattern-Bibliotheken, die mit den kleinsten Elementen beginnt, eingeführt von Brad Frost. Atomic Design ist ein unschätzbarer Rahmen für den Aufbau eines Designsystems. Die Hauptvorteile sind Konsistenz, weniger Komponenten und eine vereinfachte Codierung.
Es besteht aus fünf Phasen:
- Atome - die grundlegendsten Elemente wie Schaltflächen oder Icons
- Moleküle - Atome, die zusammengefasst sind, zum Beispiel besteht eine Suchleiste aus einer Schaltfläche, einem Formularlabel und einem Eingabefeld
- Organismen - eine Gruppe von Molekülen und Atomen, wie eine Navigationsleiste einer Website
- Vorlagen - Anordnung von Organismen und anderen Komponenten in einer bestimmten Reihenfolge
- Seiten - das Endprodukt
4. Wählen Sie das Team
Das Audit sollte Ihnen helfen, zu bewerten, welche Fähigkeiten erforderlich sind, um den Prozess zu steuern. Finden Sie dann die Personen mit den notwendigen Fähigkeiten. Es gibt keine richtige Antwort auf die Projektstruktur - denken Sie nicht nur an den Aufbau, sondern auch an die Pflege des Designsystems und dessen Förderung innerhalb der Organisation. Sie werden sicherlich Designer und Front-End-Entwickler benötigen, aber vergessen Sie nicht die weniger offensichtlichen Rollen wie Marketer und PMs, da sie sich je nach Ihrem Produkt und dessen Struktur als wertvolle Bereicherung erweisen können.
PK: Die enge Zusammenarbeit zwischen den Designern und den Entwicklern hat den größten Einfluss auf das Endergebnis. Um dem Designsystem erheblichen Wert zu verleihen, müssen sie eng zusammenarbeiten, um Usability- und technologische Herausforderungen zu bewältigen.
5. Erstellen Sie eine visuelle Designsprache
Eine visuelle Designsprache dient als Kommunikationsrahmen für alle Beteiligten an der Produktentwicklung. Ihr Zweck ist es, eine Verbindung zwischen einer Marke und ihren Kunden herzustellen und sicherzustellen, dass die Markenidentität des Unternehmens mit der Wahrnehmung der Marke durch die Kunden übereinstimmt. Sie bildet den Kern des Designs und verleiht ihm Klarheit und Konsistenz. Die visuelle Sprache besteht aus Elementen wie Farben, Typografie, Abständen, Icons und Illustrationen.
Die visuelle Sprache von EL Passion
6. Erstellen Sie eine UI-Musterbibliothek
Eine Musterbibliothek ist eine Sammlung von Benutzeroberflächenmustern, die zum Erstellen eines digitalen Produkts verwendet werden. Sie umfasst Komponenten, die mehrfach im Produkt erscheinen, wie Navigation, Diashow oder Funktionen für soziale Medien. Eine Sammlung wiederverwendbarer Muster vereinfacht den Prozess der Entwicklung neuer Funktionen oder der Implementierung von Updates für die bestehende Lösung.
Die Komponentenbibliothek von EL Passion
Beim Erstellen einer UI-Musterbibliothek sollten Sie die häufigsten Elemente priorisieren. Die Musterbibliothek sollte sich ständig weiterentwickeln - sie sollte nicht nur aus den am häufigsten verwendeten Mustern bestehen, sondern auch verschiedene Variationen einer Komponente enthalten und die Pläne für die nahe Zukunft widerspiegeln.
PK: Versuchen Sie nicht, alle möglichen Variationen von Komponenten zu erraten. Vom ersten Release Ihres Design Systems wird es ein wesentlicher Bestandteil Ihres Unternehmens werden und muss verbessert, überprüft und optimiert werden. Es wird Zeit geben, neue Varianten einer Komponente hinzuzufügen, daher ist es wichtig, sich daran zu erinnern, dass es nicht darum geht, alles vor Version 1.0 zu erstellen.
7. Dokumentation vorbereiten
Dokumentation spielt eine entscheidende Rolle im Prozess des Designsystems. Sie wird verwendet, um die Dos und Don'ts sowie Anweisungen für Aktualisierungen und Kommunikationsprozesse zu umreißen. Sie bietet eine klare Vision für das Team, etabliert einen strukturierten Plan, spart Ressourcen und optimiert das Onboarding und die Übergabe.
Dokumentation sollte niemals übersehen werden, da sie der Schlüssel zur Aufrechterhaltung der Effizienz eines Designsystems ist. Verschiedene Arten von Dokumentationen für Designsysteme umfassen Benutzerstorys, Bildschirmflussdiagramme, Anwendungsfälle, seitenbezogene Dokumentation, Szenarienarrative und strukturelle Dokumentation.
8. Implementieren Sie das Designsystem
Jetzt ist es an der Zeit, das Designsystem in Ihren bestehenden Workflow zu integrieren. Mit der gründlichen Dokumentation, die im vorherigen Punkt vorbereitet wurde, sind Sie nun in der Lage, klare Anweisungen zur Implementierung der Komponenten in Ihrer gesamten Organisation zu geben. Sie können auch Workshops durchführen, um sicherzustellen, dass jeder Stakeholder das Designsystem versteht und weiß, wie er es effektiv nutzen kann.
PK: Also, Sie haben jetzt ein Designsystem! Es ist an der Zeit, die Rolle des Designsystem-Evangelisten in Ihrer Organisation zu übernehmen.
Versuchen Sie, mit einer großen Anzahl von Personen in Ihrem Unternehmen über das Designsystem zu sprechen, und erklären Sie, wie und warum sie das DS übernehmen sollten, und geben Sie praktische Beispiele dafür, wie das Designsystem bestehende Inkonsistenzprobleme lösen kann. Sammeln Sie Feedback und versuchen Sie, das Designsystem zu verbessern und eine Gruppe von Fans zu etablieren.
9. Pflege und Weiterentwicklung
Vergessen Sie nicht, dass die Implementierung nicht das Ende Ihrer Arbeit ist. Das Designsystem muss sich ständig weiterentwickeln, um den Bedürfnissen Ihrer Organisation gerecht zu werden. Planen Sie regelmäßige Überprüfungen des Designsystems ein, um notwendige Aktualisierungen vorzunehmen, eventuelle Fehler zu beheben und neue Variationen der Komponenten zu entwickeln. Auf diese Weise stellen Sie sicher, dass das Designsystem den Bedürfnissen Ihrer Organisation entspricht, konsistent ist und die bestmögliche benutzerzentrierte Design-Erfahrung bietet.
Schau dir auch an:
- 7 Gründe, warum du ein Designsystem benötigst — Obwohl es zu schön klingt, um wahr zu sein, erleichtern Designsysteme deine Arbeit, machen sie schneller und langfristig kostengünstiger.
- Wie schreibt man ein perfektes UX-Design-Briefing? 10 nützliche Tipps — Ein gut geschriebenes UX-Design-Briefing ist die Grundlage deiner Zusammenarbeit mit einer Agentur. Wie schreibt man ein gutes UX-Design-Briefing?
Vielleicht gefällt Ihnen auch
Wir sind für neue Projekte verfügbar.
