Designsystem: Warum und wie

Designsysteme sind Produkte für Teams, die Schnittstellen erstellen, keine Bibliothek idealer Komponenten an sich. Beginnen Sie mit sich wiederholenden Schmerzen und den am häufigsten verwendeten Mustern, richten Sie Eingabe und Versionierung aus und messen Sie den Erfolg durch Akzeptanz, Geschwindigkeit und Verringerung von Diskrepanzen.

Definition und Wesen eines Designsystems

Was ist ein Designsystem?

Ein Designsystem ist eine Reihe von Standards, Komponenten und Richtlinien, die Ihnen helfen, Schnittstellen konsistent und schnell zu erstellen, und es verfügt über Farbpaletten, Typografie, Symbole, Schaltflächen, Vorlagen und vor allem über die Prinzipien, wie alles auf das Produkt angewendet wird.

Warum es für UX wichtig ist

Ohne ein einziges Designsystem verliert ein Produkt schnell an Integrität, und der Benutzer stößt in einer einzigen Anwendung auf verschiedene Tasten und Formen, was das Vertrauen verwirrt und behindert, und das Designsystem löst dieses Problem: Die Benutzeroberfläche wird vorhersehbar und sauber.

Fälle aus der Praxis

Für große Dienste wie https://ux.pub/how-yandex-zen-built-a-design-system/, hat die Einführung eines Designsystems es möglich gemacht, die Einführung neuer Partitionen zu beschleunigen und die Anzahl der visuellen Fehler zu reduzieren. Teams streiten sich nicht mehr über Farbe oder Ausrichtung - jeder weiß, wie es sein sollte.

Die Hauptaufgaben und Vorteile für das Geschäft

Zeit sparen und Fehler reduzieren

Mit einem Designsystem nutzen Designer und Entwickler vorgefertigte Lösungen. Verbringen Sie nicht Stunden damit, nachzudenken, zuzustimmen und zu erklären. Weniger erfahrene Teammitglieder werden schneller involviert, Dokumentation hilft, es herauszufinden.

Produktskalibrierung

Wenn ein Produkt wächst, muss die Schnittstelle über alle Teile hinweg einheitlich sein, auch wenn Befehle verteilt sind, und das Designsystem ist eine Möglichkeit, sicherzustellen, dass die UX-Anforderungen überall erfüllt werden.

Beispiel für das Produkt

Die Internetbank hat ein Designsystem implementiert, und als Ergebnis kommen neue Dienste schneller, und mobile und Web-Versionen sehen immer gleich aus, und die Anzahl der Fehlermeldungen über visuelle Inkonsistenzen ist dramatisch gesunken.

Struktur und Hauptelemente des Entwurfssystems

Grundlegende Komponenten

Farben, Schriftarten, Einrückungen, Icons, grundlegende UI-Elemente: Schaltflächen, Eingaben, Checkboxen, die alle in der Bibliothek sind, wiederverwendet und dokumentiert.

Leitlinien und Muster

Schnittstellenregeln: wie und wann Komponenten zu verwenden sind, wie Schaltflächen zu schreiben sind und was zu tun ist, wenn Fehler gemacht werden. Ein gutes System hat Beispiele dafür, was zu tun ist und was zu vermeiden ist.

Ein Beispiel aus SaaS

SaaS hat eine detaillierte Anleitung zur Verwendung von Karten und Fehlermeldungen, und neue Designer verstehen sofort, wie sie mit diesen Mustern umgehen müssen - die Benutzeroberfläche läuft nicht davon.

Wie man ein Designsystem implementiert: Schritt für Schritt

Sammeln und Analysieren einer vorhandenen Schnittstelle

Das Team sammelt alle aktuellen Elemente: Farben, Schriftarten, Schaltflächen, Formen und identifiziert Duplikate und Inkonsistenzen.

Entwicklung und Test von Komponenten

Sie erstellen Standard-Benutzeroberflächenelemente, sie werden auf verschiedenen Bildschirmen getestet, sie werden von Produktwissenschaftlern und Entwicklern auseinander genommen.

Dokumentation und Unterstützung

Jedes Element hat eine Seite in der Dokumentation, und es ist wichtig zu beschreiben, wann die Komponente verwendet werden kann und wann sie nicht verwendet werden kann.

Beispiel für die Umsetzung

Fintech begann mit der Überprüfung der Schnittstelle, der Identifizierung der wichtigsten sich wiederholenden Elemente, der Vereinheitlichung und der Aufnahme in Figma, und dann erfordern alle neuen Funktionen nur diese Komponenten.

Häufige Fehler und wie man sie vermeidet

Es gibt keinen einzigen Eigentümer.

Wenn niemand die Entwicklung eines Designsystems verfolgt, wird es schnell obsolet.

Schlechte Beschreibung und fehlende Anweisungen

Die Komponenten sind da, aber niemand weiß, wann oder wie man sie nimmt.Neue Tischler verbringen Zeit in Rechtsstreitigkeiten.

Feedback aus dem Team ignorieren

Wenn Sie keine Kritik an realen Produktteams üben, wird das System zu bürokratischem Ballast.

Was machst du?

Einzelne Eigentümer, regelmäßige Überprüfungen, schnelle Verbesserungen des Systems auf Wunsch von Teams.

Wer braucht ein Designsystem und wann baut es es

Für wen ist relevant?

Für jedes Produkt, das eine wachsende Benutzeroberfläche oder mehrere Befehle hat, ist es besonders wichtig, wenn Sie ein Web, eine mobile App oder eine B2B-Richtung haben.

Der beste Zeitpunkt für die Umsetzung

Warten Sie nicht auf die perfekte Zeit. Sie können klein anfangen, die Grundschaltflächen, die Farben, sammeln und sie in einem Wiki oder Figma registrieren, und Sie werden in ein paar Wochen Fortschritte sehen.

Empfohlene Quellen und Benchmarks

• Design Systems Repo – Große Sammlung von Richtlinien und Beispielen
• Native Systems: Google Material und Apple Human Interface Guidelines
• 12 praktische Tipps für Designsysteme

FAQ

Warum braucht ein Produkt ein eigenes Designsystem, wenn es vorgefertigte Frameworks gibt (Material, Ant Design)? Um eine einzigartige Marke zu entwickeln, behalten Sie UX unter voller Kontrolle und sind nicht von den Einschränkungen anderer abhängig.

**Muss ich zu Beginn des Projekts in das Designsystem investieren? Wenn Sie Pläne haben, zu wachsen, ja, zumindest auf dem Minimum: einzelne Tasten, Farben und Navigation.

**Wie lange dauert es, ein komplettes Designsystem zu implementieren? Die genauen Zahlen hängen vom Produkt ab. Normalerweise dauert ein schneller Start einige Wochen, es dauert ein paar Monate, um ein System zu entwickeln.

**Wer ist für die Aktualisierung des Designsystems verantwortlich? Design System Owner gepaart mit einer Arbeitsgruppe von Designern und Entwicklern.

**Ist es möglich, mit Figma / Storybook zu tun? Nein. Dies sind Visualisierungswerkzeuge, aber Sie benötigen mehr Regeln, Beispiele und Dokumentationen, wie Sie sie verwenden können.

**Wie überzeugen Sie Ihr Management, in ein Designsystem zu investieren? Zeigen Sie mir, wie lange es dauert, Schnittstellen, Bugs und Bugfixes manuell auszuarbeiten, und das ist eine Investition, die sich mehrfach auszahlt.