Erstellen Sie das perfekte Designsystem: 6 wichtige Überlegungen

Design-System
(Bildnachweis: Getty Images)

Design-Systeme helfen großen Branchenakteuren, den Design-Prozess zu standardisieren und vorhersehbarer zu machen. Viele Unternehmen versuchen, die Initiative zu ergreifen, um ein eigenes Designsystem aufzubauen. Aber trotz aller Absichten kann die ganze Anstrengung, die ein Produktteam in die Entwicklung eines durchdachten Designsystems steckt, ziemlich oft direkt in den Abfluss gehen.

Im Verlauf dieses Artikels definieren wir, was ein Entwurfssystem ist, was vor dem Erstellen eines Entwurfssystems zu beachten ist und wie ein Entwurfssystem am besten in Ihre Organisation eingeführt werden kann. Weitere großartige Ressourcen finden Sie in unserer Zusammenfassung von Webdesign-Tools .



Was ist ein Designsystem?

Der Name 'Design System' kann einen falschen Eindruck von etwas erzeugen, das nur für Designer einen Wert bietet. In Wirklichkeit geht es bei einem Designsystem jedoch nicht nur um Designer. Stattdessen geht es darum, wie eine gesamte Organisation ihre Produkte erstellt (wenn dies eine Website enthält, benötigen Sie ein Top Webseitenersteller und brillant Web-Hosting ).



Erfolgreiche Designprozesse hängen normalerweise von einer engen funktionsübergreifenden Zusammenarbeit aller an der Erstellung des Produkts beteiligten Teams ab. Bei einem Design-System geht es darum, eine gemeinsame Sprache zu erstellen, mit der Teams effektiver zusammenarbeiten können. Es handelt sich um einen vollständigen Satz von Entwurfsprinzipien, -regeln und -standards sowie das Toolkit (Entwurfsmuster, visuelle Stile und eine Codebibliothek wiederverwendbarer UI-Komponenten), die zum Erreichen dieser Prinzipien, Regeln und Standards erforderlich sind. Ein Design-System ermöglicht es einem Produktteam, ein Produkt schneller zu erstellen - ohne auf Qualität verzichten zu müssen -, indem das Design wiederverwendbar gemacht wird (stellen Sie sicher, dass Sie zuverlässig sind Cloud-Speicher um Ihr Vermögen zu speichern).

Der ultimative Zweck der Implementierung eines Design-Systems besteht darin, dem Unternehmen zu helfen, zu lernen und zu wachsen. Deshalb sollte ein Designsystem immer auf den Zielen eines Unternehmens basieren. Aus dem gleichen Grund sind nicht alle Entwurfssysteme gleich aufgebaut, dennoch teilen die meisten Entwurfssysteme einige gemeinsame Elemente:



wie man die Haut in Photoshop glatt macht
  • Designprinzipien - Werte, die sicherstellen, dass die Designbemühungen in die richtige Richtung gehen.
  • Komponenten und Musterbibliotheken - das sind die Bausteine ​​eines Designsystems.
  • Design-Anleitungen - spezifische Regeln zum Entwerfen eines bestimmten Teils von
    Ein Produkt. Dies können Stilrichtlinien (Typografie, Farben, Abstände usw.) und UX-Schreibrichtlinien (Sprache und Ton, Sprache, Schreibprinzipien usw.) sein.
  • Entwurfspraktiken - helfen, das System am Leben zu erhalten und für das Produktteam wertvoll zu sein.

Wichtige Überlegungen vor der Implementierung eines Entwurfssystems

Design-System

Verstehen Sie, warum Sie ein Design-System benötigen(Bildnachweis: Getty Images)

01. Produkt- und Unternehmensreife berücksichtigen

Bevor Sie mit dem Aufbau eines Entwurfssystems beginnen, müssen Sie genau wissen, warum Sie eines benötigen. Viele Unternehmen führen Designsysteme ein, um ihre technische Verschuldung zu reduzieren und den Produktentwicklungsprozess zu beschleunigen (indem sie weniger Zeit für langwierige, eintönige Aktivitäten aufwenden). Aber nicht alle Unternehmen sind mit solchen Problemen konfrontiert, da Unternehmen unterschiedliche Reifegrade aufweisen.

Das Erstellen eines Entwurfssystems von Grund auf ist eine zeitaufwändige Aktivität, und kleine, sich schnell bewegende Teams benötigen wahrscheinlich kein Entwurfssystem, da dies sie verlangsamen würde. Ein Startup mit drei bis fünf Personen, das immer noch versucht, eine marktgerechte Lösung zu finden, würde wahrscheinlich viel Zeit damit verbringen, ein System zu erstellen. Wenn Ressourcen für den Aufbau eines Designsystems aufgewendet werden, werden sie nicht für den Aufbau des Produkts aufgewendet. Solange ein Unternehmen nicht in der Lage ist, mit seinem Produkt eine klare Richtung einzuschlagen, besteht daher die Gefahr, dass durch die Investition von Zeit in die Erstellung eines Designsystems viel Abfall entsteht.



02. Erstellen Sie eine Vision

In einem Designsystem geht es um Menschen - wie sie zusammenarbeiten, um ein gemeinsames Ziel zu erreichen. Und die Leute wollen die Antworten auf die folgenden Fragen wissen:

  • Wohin gehen wir?
  • Was wollen wir erreichen?
  • Warum wollen wir das erreichen?

Dies sind grundlegende Fragen, die Sie beantworten müssen, um eine gemeinsame Vision aufzubauen. Eine gemeinsame Vision wird eine Grundlage für ein Designsystem sein, das Teams eine geführte Möglichkeit bietet, Lösungen für ihre Produktprobleme zu entwickeln.

Eine Vision definiert, was Ihr Team, Produkt oder Unternehmen zu erreichen versucht und, was noch wichtiger ist, warum. Es richtet Teams nach einer Reihe klarer gemeinsamer Ziele aus und wird zum Nordstern für das gesamte Unternehmen. Es vereint die an der Produktentwicklung beteiligten Personen und führt sie zu einem gemeinsamen Ziel.

Wenn Sie nach einer einfachen Möglichkeit suchen, eine Vision zu erstellen, sollten Sie beschreiben, wie Ihr Produkt oder Ihre Organisation in fünf Jahren aussehen sollte. Auf diese Weise definieren Sie eine Zielbedingung und es ist viel einfacher, eine Strategie zu erstellen, die Ihnen dabei hilft, diese zu erreichen.

04. Leitprinzipien festlegen

Wie definieren Sie gutes Design? Woher wissen Sie, wann etwas zur Implementierung bereit ist? Bei der Bewertung der Qualität eines Designs verlassen sich Designer häufig auf ihre eigenen Standards. Ein solcher Ansatz kann jedoch viel Chaos im Produktdesignprozess verursachen, da jeder Designer subjektive Ideen hat. Hier können Designprinzipien den Tag retten.

Solide Designprinzipien sind die Grundlage jedes funktionierenden Systems. Sie sollten die Essenz dessen erfassen, was gutes Design für das Unternehmen bedeutet, und Produktteams praktische Empfehlungen geben, wie dies erreicht werden kann (Designprinzipien sollten immer umsetzbar sein). Designprinzipien dienen als Standards für das Produktteam und helfen ihnen, ihre Arbeit zu messen.

Hier sind einige Dinge zu beachten, wenn Sie an Designprinzipien arbeiten:

  • Designprinzipien sollten die Art des Produkts widerspiegeln. Wenn es beispielsweise um das Design von Mensch-Maschine-Schnittstellen für Automobile geht, sollte das wichtigste Konstruktionsprinzip „Sicherheit geht vor“ sein (Ziel ist es, Fahrer und Passagiere sicher zu halten). Deshalb sollte jede Entwurfsentscheidung aus Sicherheitsgründen gemessen werden.
  • Gestaltungsprinzipien sollten nicht nach Regeln klingen. Sie sollten kreative Energie nicht blockieren. Produktentwickler sollten sich nicht eingeschränkt oder zurückhaltend fühlen.
  • Gestaltungsprinzipien sollten das Ergebnis einer offenen Diskussion sein. In vielen Fällen ist es nicht schwer, Menschen dazu zu bringen, Richtlinien zu befolgen, sondern es ist schwierig, Menschen dazu zu bringen, sich auf Richtlinien zu einigen. Wenn eine Organisation viele Designteams hat, ist es wichtig, sie in eine Diskussion einzubeziehen. Indem Sie Feedback zu den Entwurfsprinzipien erhalten, können Sie die Prinzipien an die Bedürfnisse der Benutzer anpassen.

05. Überprüfen Sie den Technologie-Stack und führen Sie eine Schnittstelleninventur durch

Viele Unternehmen tendieren dazu, ein Design-System auf der aktuellen Benutzeroberfläche aufzubauen, aber dieser Ansatz ist aus vielen Gründen nicht der beste. Stellen Sie sich vor, Ihr Unternehmen baut seit langer Zeit ein Produkt ohne System.

Das Produkt weist wahrscheinlich ein gewisses Maß an Inkonsistenz im Design auf. Inkonsistenzen werden normalerweise durch die Verdoppelung von Designelementen verursacht. Durch das Erkennen von doppelten Designelementen kann ein Team das Szenario vermeiden, in dem Teammitglieder ein Element von Grund auf neu erstellen, und nach einer Weile feststellen, dass bereits eine Version davon vorhanden ist.

Wenn Sie ein Design-System einführen möchten, beginnen Sie daher mit einem Audit Schnittstelleninventar zu verstehen, was verwendet wird.

Untersuchen Sie vorhandene Interaktionen, sammeln Sie alle Elemente der Benutzeroberfläche, aus denen die Benutzeroberfläche besteht, und überprüfen Sie sie. Dies ist wichtig, bevor Sie das eigentliche Entwurfssystem erstellen, da das Verfahren Ihnen hilft, zwei Dinge zu verstehen:

Systemanforderungen für Final Cut Pro
  • Wie viel Design-Schulden hat Ihr Unternehmen und in welchen Bereichen ist mehr Aufmerksamkeit erforderlich?
  • Die Gründe für Inkonsistenzen und die Änderungen, die Sie in den Entwurfsprozess einführen müssen, um solche Probleme in Zukunft zu vermeiden. Möglicherweise müssen Sie den Prozess ändern oder neue Technologien einführen.

06. Bauen Sie ein Kernteam auf

Wer sollte am Aufbau eines Entwurfssystems beteiligt sein? Design ist ein Mannschaftssport und die Schaffung eines Designsystems ist keine Ausnahme. Das Fachwissen und die kreative Energie, die durch funktionsübergreifende Zusammenarbeit bereitgestellt werden, sind erforderlich, um ein Designsystem aufzubauen. Aus diesem Grund besteht das Kernteam der Mitarbeiter, die tatsächlich ein System erstellen, normalerweise aus Ingenieuren, Designern, Produktmanagern und Stakeholdern. Wenn Sie mit dem Aufbau eines Designsystems beginnen, ist es wichtig, eine kleine Größe für das Kernteam (sechs bis acht Personen) zu haben, da dies Ihnen hilft, Schwung zu erzeugen und schnell etwas aufzubauen.

Erstellen eines Designsystems

Design-System

Es ist ein solider Prozess zu berücksichtigen(Bildnachweis: Getty Images)

Erwägen Sie die Implementierung eines Entwurfssystems als Projekt. Und genau wie jedes andere Projekt sollte auch dieses einen soliden Prozess mit den folgenden Schritten haben:

  • Verkaufen Sie die Idee
  • Schließen Sie ein Pilotprojekt ab
  • Designen und Bauen
  • Start und Wartung

01. Verkaufe die Idee

Der Verkauf der Idee eines Designsystems ist der erste und wichtigste Schritt bei der Einführung eines Designsystems. Normalerweise ist es aufgrund der Kompromisse schwierig, Designsysteme zu verkaufen. Sowohl die Mitglieder des Managements als auch des Produktteams wissen, dass die für den Aufbau eines Designsystems aufgewendeten Ressourcen nicht für Versandfunktionen aufgewendet werden. Es ist also natürlich, einen Pushback zu erwarten. Um ein Designsystem zu verkaufen, müssen Sie zwei Dinge tun:

Holen Sie sich das Buy-In von Stakeholdern

Ein Design-System wird nicht starten, wenn die Leute, die sich für eine Finanzierung entscheiden, es nicht genehmigen. Es ist viel einfacher, das Buy-In von Führungskräften zu erhalten, wenn Sie zeigen, dass das System echte Geschäftsprobleme löst. Identifizieren Sie wichtige geschäftliche Schwachstellen (Bereiche, in denen das Unternehmen Geld verliert) und zeigen Sie, wie das Designsystem den Tag retten kann. Schreiben Sie eine Strategie mit einem klaren Vorschlag und teilen Sie sie den Schlüsselpersonen mit, die die Entscheidungen treffen.

Es wird empfohlen, eine Präsentation (oder eine Reihe von Präsentationen) zu erstellen, um die Stakeholder davon zu überzeugen, in dieses Projekt zu investieren. Sie können Ihre Präsentation in Form einer Geschichte verpacken. Wenn Sie Erfolgsgeschichten erzählen, haben Sie eine bessere Chance, Stakeholder einzubeziehen.

Holen Sie sich Unterstützung von Ihren Benutzern

Ein Buy-in von Stakeholdern zu erhalten, ist nur die halbe Miete. Sie müssen Unterstützung von Ihren potenziellen Benutzern erhalten. Zunächst müssen Sie Ihre Zielgruppe identifizieren. Wer wird Ihr Design-System verwenden und wie werden sie es verwenden? Hier sind einige allgemeine Benutzergruppen:

  • Produktteams (dh Designer, Entwickler)
  • Dritte (dh Anbieter)
  • Geschäft (dh Marketing, Vertrieb, Recht)

Sie müssen die Schwachstellen verschiedener Benutzergruppen identifizieren und den Wert anzeigen, den das System für sie bringt. Jede Benutzergruppe hat unterschiedliche Kaufauslöser - Gründe, warum sie ein Design-System verwenden möchten. Für Entwickler kann der Auslöser beispielsweise eine konsistentere Implementierung sein oder weniger Zeit für das Refactoring von Code.

02. Wählen Sie ein Pilotprojekt aus und schließen Sie es ab

Design-System: Mittel

Eines der Gestaltungsprinzipien von Medium ist 'Richtung über Wahl'. Dieses Prinzip hilft dem Designteam von Medium, die Anzahl der visuellen Stile zu begrenzen(Bildnachweis: Mittel)

Sobald Sie ein Grundkonzept für Ihr Design-System erstellt haben, ist es wichtig, es zu validieren. Der beste Weg, um das Konzept zu validieren, besteht darin, es an einem Pilotprojekt zu testen.

Wählen Sie ein Beispiel für ein echtes Produkt aus und erstellen Sie ein Design-System, das eine echte Lösung ermöglicht. Das von Ihnen ausgewählte Projekt sollte als Grundlage für Ihr zukünftiges Entwurfssystem verwendet werden, damit Sie testen können, ob das System für Ihr Unternehmen funktioniert oder nicht.

Hier ist eine Reihe von Kriterien, anhand derer Sie die potenzielle Wirksamkeit eines Piloten bestimmen können:

  • Ein Projekt sollte das Potenzial für gemeinsame Komponenten und Muster haben. Es sollte Komponenten und Muster enthalten, die in anderen Produkten wiederverwendet werden können.
  • Es sollte eine gute technische Machbarkeit haben und nicht schwer sein, alle erforderlichen Änderungen einzuführen.
  • Das Projekt sollte in angemessener Zeit (idealerweise in ein paar Wochen) durchgeführt werden können und nicht die Einbeziehung vieler Personen aus verschiedenen Abteilungen erfordern (die Wahrung der Unabhängigkeit ist unerlässlich).
  • Ein Projekt sollte Marketingpotential haben. Das Projekt sollte andere Teams dazu inspirieren, Entwurfssysteme in ihren Entwurfsprozess einzuführen.

03. Entwerfen und bauen

Design-System: Bootstrap

Erfolgreiche Designsysteme sind in hohem Maße wiederverwendbar. Bibliotheken wie Bootstrap zeigen diese Komponenten in Aktion(Bildnachweis: Bootstrap)

Erstellen Sie wiederverwendbare Komponenten

Ein Fehler, den ich immer wieder sehe, ist, dass Teams Komponenten erstellen, die sich zu sehr auf einen einzelnen Anwendungsfall konzentrieren. Infolgedessen wird das System zu unflexibel und seine Benutzer müssen jedes Mal ihre eigenen Komponenten erstellen, wenn sie ein bestimmtes Szenario abdecken müssen.

Versuchen Sie, Komponenten zu entwickeln, die nicht an einen einzelnen Anwendungsfall gebunden sind, dies aber können
in mehreren Kontexten wiederverwendet werden. Um wiederverwendbar und skalierbar zu sein, müssen Komponenten die folgenden Eigenschaften aufweisen:

  • Modular: Modulare Komponenten sind in sich geschlossen - sie haben keine Abhängigkeiten.
  • Zusammensetzbar: Es ist möglich, Komponenten zu kombinieren, um neue Komponenten zu erstellen.
  • Anpassbar: Es ist möglich, Komponenten anzupassen und zu erweitern, damit sie in einer Vielzahl von Kontexten funktionieren.

Jedes Mal, wenn Teammitglieder eine neue Komponente einführen möchten, müssen sie überlegen, wie sie auf den verschiedenen Plattformen funktioniert, für die sie entwerfen. Im Idealfall sollte jede von ihnen entworfene Komponente auf allen Plattformen funktionieren.

Wert in einer Sandbox-Umgebung anzeigen

Es ist bekannt, dass der beste Weg für Menschen, Wert zu sehen, darin besteht, ihn zu erleben. Erstellen Sie daher eine Sandbox-Umgebung für Produktteammitglieder, um mithilfe Ihres Design-Systems Prototypen für Produkte zu erstellen.

04. Starten und warten

Einige Produktteams glauben, dass die Arbeit abgeschlossen ist, sobald ein Design-System erstellt wurde. Nicht wahr. Ein Designsystem ist ein Produkt und es ist wichtig, es als Produkt anstelle eines Projekts zu verwalten. Ein Designsystem erfordert fortlaufende Wartung und Verbesserungen, wenn dies erforderlich ist.

Ermutigen Sie zur Einführung Ihres Designsystems

Best Buy Surface Pro 4 Black Friday

Wie jedes andere Produkt benötigt auch ein Designsystem aktive Benutzer. Sie können das beste Designsystem der Welt erstellen, aber wenn Sie es in Ihrem Unternehmen nicht aktiv bewerben, wird der gesamte Aufwand stark darunter leiden. Aus diesem Grund müssen Sie ab der ersten Version Ihres Systems hart arbeiten, um dessen Einführung zu fördern:

  • Erstellen Sie eine Community von Unterstützern. Stellen Sie eine Gruppe von Evangelisten zusammen, angeführt von maßgeblichen Influencern oder Designern, die Ideen über Ihr Designsystem aufstellen und verkaufen. Die Evangelisten sollten an Aktivitäten wie Workshops und Meetups teilnehmen, die darauf abzielen, das Bewusstsein für das System zu schärfen und die Menschen über den Umgang mit dem System aufzuklären.
  • Updates einführen. Die Wartezeit für Aktualisierungen spielt eine Schlüsselrolle bei der Einführung des Entwurfssystems. Üben Sie regelmäßige inkrementelle Releases anstatt großer Enthüllungen und stellen Sie immer sicher, dass Sie Updates mit einem Changelog versenden.

Analysieren Sie, wie Benutzer das Designsystem verwenden

Design-Systeme steigen und fallen, je nachdem, wie einfach sie zu bedienen sind. Wenn Sie gerade damit begonnen haben, ein Designsystem in den Designprozess Ihres Unternehmens einzubeziehen, führen Sie eine Reihe von Interviews mit Benutzern durch, um zu verstehen, wie Benutzer es verwenden. Auf diese Weise können Sie häufige Probleme identifizieren, mit denen Ihre Zielgruppe möglicherweise konfrontiert ist.

Bei Systemen, die für einige Zeit in einen Entwurfsprozess einbezogen werden, ist es wichtig, die Zeit zu messen, die erforderlich ist, um das System auf dem neuesten Stand zu halten. Wenn es schwierig wird, das Designsystem auf dem neuesten Stand zu halten, ist es schnell veraltet.

Testen Sie Ihre Designentscheidungen

Unabhängig davon, wie gut Sie in der Vorhersage von Dingen sind, kann es schwierig sein, vorherzusagen, wie sich eine bestimmte Änderung auf die Benutzererfahrung auswirkt. Deshalb ist es wichtig, Ihre Entscheidungen zu validieren.

Hier sind drei Arten von Tests, die Ihnen helfen werden:

  • Usability-Tests
  • Visuelle Regressionstests, mit denen Sie unbeabsichtigte visuelle Änderungen an Komponentenstilen erfassen können
  • Manuelle und automatisierte Zugänglichkeitsprüfung, die sicherstellt, dass Ihre Komponenten zugänglich sind

Versionierung einführen

Entwurfssysteme sollten Versionen haben, da die Versionierung das Verfolgen von Änderungen erheblich erleichtert. Mit versionierten Releases können Benutzer eine bestimmte Version als Abhängigkeit referenzieren. Sie haben auch die Kontrolle darüber, wann und wie Upgrades auf neue Versionen durchgeführt werden.

Es gibt zwei Arten der Versionierung:

  • Versionierung des gesamten Systems. Hier gehört alles im System zu einer Versionsnummer. Als Benutzer beschäftigen wir uns mit der Versionierung des gesamten Systems, wenn wir unser mobiles Betriebssystem aktualisieren. Wenn wir iOS aktualisieren, aktualisieren wir die gesamte Software.
  • Versionierung nach Modulen. Dies beinhaltet eine Versionsnummer für jede Komponente oder jeden Stil innerhalb des Designsystems. Im Vergleich zur Versionierung des gesamten Systems bietet die Versionierung nach Modulen mehr Flexibilität. Benutzer können nur die Elemente aktualisieren, die sie benötigen.

Das Erstellen eines Entwurfssystems ist keine einmalige Aktivität. es ist eigentlich iterativ. Die Menschen, die an der Schaffung eines Designsystems beteiligt sind, müssen es als einen lebenden Organismus betrachten, der die gesamte Organisation verbindet. Ein erfolgreiches Designsystem wird Teil der DNA eines Unternehmens und trägt dazu bei, konsistente Benutzererlebnisse zu erzielen.

Dieser Inhalt erschien ursprünglich in netmag.

Weiterlesen: