Designsystem: die Grundlage für Dein digitales Produkt

Da sich das UI-Design im Laufe der Jahre weiterentwickelt hat, haben auch der Umfang und die Geschwindigkeit, mit der UI-Designs erstellt werden müssen, zugenommen. Es gibt nicht nur Millionen von Anwendungen und Milliarden von Websites (und jedes Jahr werden mehr erstellt), sondern jede dieser Apps und Websites kann Hunderte oder Tausende von Seiten (oder Screens) aufweisen. Mit dieser drastischen Expansion entsteht für Unternehmen die dringende Notwendigkeit, die Designarbeit zu rationalisieren. Daher nutzen viele Designteams robuste Designsysteme, um Designs in großem Maßstab zu verwalten.

Definition: Ein Designsystem ist ein vollständiger Satz von Standards, die dazu bestimmt sind, Designs in großem Maßstab unter Verwendung wiederverwendbarer Komponenten und Muster zu verwalten.

‍

Warum ein Designsystem verwenden?

Wenn Designsysteme gut implementiert sind, können sie einem Designteam viele Vorteile bieten:

• Design- (und Entwicklungs-)Arbeiten können schnell und in großem Umfang erstellt und repliziert werden.
  Der Hauptvorteil von Designsystemen ist ihre Fähigkeit, Designs schnell zu replizieren, indem vorgefertigte UI-Komponenten und -Elemente verwendet werden. Teams können dieselben Elemente immer wieder verwenden, wodurch die Notwendigkeit, das Rad neu zu erfinden, und damit das Risiko unbeabsichtigter Inkonsistenzen reduziert wird.
• Es verringert die Belastung der eigenen Ressourcen, die sich somit auf größere, komplexere Probleme konzentrieren können.
  Da einfachere UI-Elemente bereits erstellt und wiederverwendbar sind, können sich Designressourcen weniger auf die Optimierung des visuellen Erscheinungsbilds als vielmehr auf komplexere Probleme (wie Informationspriorisierung, Workflow-Optimierung und Journey-Management) konzentrieren. Während dieser Vorteil gering erscheinen mag, wenn Sie nur eine kleine Anzahl von Bildschirmen erstellen, wird er erheblich, wenn Sie die Bemühungen von Dutzenden von Teams und Tausenden von Screens koordinieren müssen.
• Es schafft eine einheitliche Sprache innerhalb und zwischen funktionsübergreifenden Teams.
  Insbesondere wenn sich Designverantwortlichkeiten verschieben oder Teams geografisch verteilt werden, reduziert eine einheitliche Sprache verschwendete Design- oder Entwicklungszeit aufgrund von Missverständnissen. Beispielsweise würde die Funktionalität oder das Erscheinungsbild eines Dropdown-Menüs nicht diskutiert werden, da dieser Begriff für ein speziell definiertes Element innerhalb des Designsystems reserviert ist.
• Es schafft visuelle Konsistenz über Produkte, Kanäle und (möglicherweise isolierte) Abteilungen hinweg.
  Insbesondere wenn Teams in Silos arbeiten, in denen jedes Produkt oder jeder Kanal unabhängig von den anderen arbeitet, kann das Fehlen eines unternehmensweiten Designsystems zu einem inkonsistenten visuellen Erscheinungsbild und Erlebnissen führen, die fragmentiert oder ohne Bezug zur Marke erscheinen. Designsysteme bieten eine einzige Quelle für Komponenten, Muster und Stile und vereinheitlichen unzusammenhängende Erfahrungen, sodass sie visuell zusammenhängend sind und als Teil desselben Ökosystems erscheinen. Als zusätzlicher Bonus können alle wichtigen visuellen Rebrandings oder Redesigns in großem Umfang über das Designsystem verwaltet werden.
• Es kann als Lehrmittel und Referenz für Nachwuchsdesigner und Content-Beitragende dienen.
  Explizit geschriebene Nutzungsrichtlinien und Styleguides helfen einzelnen Mitwirkenden, die neu im UI-Design oder in der Inhaltserstellung sind, an Bord zu gehen und dienen auch als Erinnerung für die übrigen Mitwirkenden.

‍

Gibt es Gründe, kein Designsystem zu verwenden?

Es gibt einige potenzielle Hürden und Einschränkungen, die ein Designteam daran hindern können, ein Designsystem zu verwenden:

1. Das Erstellen und Pflegen eines Designsystems ist eine zeitintensive Aktivität, die ein engagiertes Team erfordert. Designsysteme sind leider keine One-and-Done-Lösung. Im besten Fall entwickeln sie sich ständig weiter, während Teams Feedback von denen einholen, die sie verwenden.
2. Es braucht Zeit, anderen beizubringen, wie man das Designsystem benutzt. Jedes Designsystem, auch wenn es von einem bestehenden angepasst wurde, benötigt eine Gebrauchsanweisung – ansonsten besteht die Gefahr, dass es über Screens oder Teams hinweg uneinheitlich oder falsch angewendet wird.
3. Es mag der Eindruck entstehen, dass Projekte statische, einmalige Kreationen sind, die im Allgemeinen keine wiederverwendbaren Komponenten erfordern. Ob wahr oder nicht, diese Wahrnehmung kann auf einen Mangel an einheitlicher Strategie für alle Projekte und eine verpasste Gelegenheit zur Effizienzsteigerung hindeuten.

‍

Elemente eines Designsystems

Ein Designsystem besteht aus zwei wichtigen Teilen:

• das Design-Repository
• die Leute, die es verwalten

‍
Design-System-Repository

Design-Repositories können viele Formen annehmen, aber sie enthalten oft einen Styleguide, eine Komponentenbibliothek und eine Musterbibliothek.

‍

Styleguide

Styleguides enthalten spezifische Implementierungsrichtlinien, visuelle Referenzen und Designprinzipien für die Erstellung von Schnittstellen oder anderen Designergebnissen. Die gängigsten Styleguides konzentrieren sich in der Regel auf Branding (Farben, Typografie, Marken, Logos und Printmedien), aber Styleguides bieten auch Anleitungen zu Inhalten (z. B. Tonality und Copywriting) sowie visuellen und Interaktionsdesign-Standards (auch bekannt als Frontend-Styleguides). Diese Richtlinien werden manchmal auch in die Komponentenbibliothek aufgenommen, um im Kontext relevante Anleitungen bereitzustellen.

‍

Komponentenbibliothek

Komponentenbibliotheken (auch bekannt als Designbibliotheken) sind das, was viele Menschen mit Designsystemen assoziieren: Diese gründlichen Bibliotheken enthalten vordefinierte, wiederverwendbare UI-Elemente und dienen Designern und Entwicklern gleichermaßen als zentrale Anlaufstelle, um sich über bestimmte UI-Elemente zu informieren und diese zu implementieren. Das Erstellen dieser Bibliotheken nimmt viel Zeit und Ressourcen in Anspruch. Neben visuellen Beispielen von Komponenten umfassen sie:

• Komponentenname: ein spezifischer und eindeutiger UI-Komponentenname, um Missverständnisse zwischen Designern und Entwicklern zu vermeiden
• Beschreibung: Eine klare Erklärung dafür, was dieses Element ist und wie es normalerweise verwendet wird, gelegentlich begleitet von Vorgaben und Verboten für Kontext und Klarstellung
• Attribute: Variablen oder Anpassungen, die vorgenommen werden können, um die Komponente für bestimmte Anforderungen anzupassen (z. B. Farbe, Größe, Form, Kopie)
• Status: empfohlene Standardeinstellungen und die nachfolgenden Änderungen im Erscheinungsbild
• Code-Snippets: der eigentliche Code-Auszug für das Element (einige Designsysteme gehen so weit, mehrere Beispiele zu teilen und eine „Sandbox“-Umgebung anzubieten, um verschiedene Komponentenanpassungen auszuprobieren)
• Front-End- und Back-End-Frameworks zur Implementierung der Bibliothek (falls zutreffend), um langwieriges und unnötiges Debuggen zu vermeiden

‍

Musterbibliothek ("Pattern Library")

Manchmal werden die Begriffe „Komponentenbibliothek“ und „Musterbibliothek“ synonym verwendet; Es gibt jedoch einen Unterschied zwischen diesen beiden Arten von Bibliotheken. Komponentenbibliotheken spezifizieren einzelne UI-Elemente, während Musterbibliotheken Sammlungen von UI-Elementgruppierungen oder Layouts enthalten. Musterbibliotheken werden oft als weniger robust im Vergleich zu Komponentenbibliotheken angesehen, aber sie können so gründlich oder so komplex wie nötig sein. Sie verfügen in der Regel über Inhaltsstrukturen, Layouts und/oder Vorlagen. Ähnlich wie die Komponenten sollen die Muster wiederverwendet und angepasst werden.

‍

Designsystem-Team

Ein Designsystem ist nur so effizient wie das Team, das es verwaltet. Unabhängig davon, ob sie erstellt oder angepasst wurden, müssen Designsysteme kontinuierlich gewartet und überwacht werden, um sicherzustellen, dass sie nicht veraltet, obsolet oder mit redundanten Einträgen oder Einreichungen überfüllt sind. Die Größe des Teams kann variieren, da Designsysteme selbst unterschiedliche Größen und Anpassungsstufen annehmen können, aber das Team sollte mindestens 1 Interaktionsdesigner, 1 visuellen Designer und 1 Entwickler umfassen. Idealerweise sollte das Team auch einen Teilzeit-Researcher, einen Teilzeit-Architekten und einen Content-Autoren umfassen, wenn diese Rollen in Ihrer Organisation vorgesehen sind.

Schließlich sollten Sie erwägen, einen leitenden Sponsor (aus Führungspositionen) zu gewinnen, um die Designsystem-Bemühungen zu koordinieren. Während das Fehlen eines Sponsors kein Showstopper sein wird, können Sponsoren Geld und Ressourcen sichern und gleichzeitig die strategische Bedeutung eines Designsystems für den Rest der Organisation vermitteln.

‍

Wie man sich der Einführung von Design-Systemen nähert

Es gibt im Allgemeinen drei Ansätze zur Verwendung eines Designsystems:

• Übernahme eines bestehenden Designsystems
• Anpassung eines bestehenden Designsystems
• Erstellung Ihres eigenen proprietären oder benutzerdefinierten Designsystems

Jedes hat Vor- und Nachteile, aber im Allgemeinen gilt: Je individueller Ihre Designsystemlösung ist, desto mehr Zeit und Geld kostet die Implementierung. Daher ist die Verwendung eines vorhandenen Designsystems der kostengünstigste Ansatz und erfordert die geringste Zeit für die Implementierung. (Es wird jedoch immer noch mehr Zeit in Anspruch nehmen, als wenn Sie das Design wie gewohnt fortsetzen, da Sie einige UI-Elemente entweder ersetzen oder aktualisieren und sich auf einen Standard einigen müssen).

Die Investition in ein benutzerdefiniertes Designsystem lohnt sich, wenn die Organisation besondere Anforderungen hat, die von Open-Source-Designsystemen nicht erfüllt werden können. Da die Anpassungen und Anpassungen des Designsystems zunehmen, werden die Kosteneinsparungen, die Sie möglicherweise durch die Verwendung des vorhandenen Designsystems erzielt haben, geringer, und auf lange Sicht sind Sie möglicherweise besser dran, wenn Sie Ihr eigenes Designsystem erstellen. Stellen Sie sicher, dass Sie wissen, was Ihre Organisation benötigt, bevor Sie sich an die Entwicklung von Systemen machen und die Kompromisse bewerten.

Schließlich wird für einen Proof of Concept oder einen ersten Prototyp, der sich wahrscheinlich ändern wird, die Erstellung eines vollwertigen Designsystems in naher Zukunft wahrscheinlich keinen wünschenswerten ROI generieren. Der Vorteil ist schließlich die Reproduzierbarkeit des Designs, die in der Zukunft liegt. Obwohl es verlockend sein mag, diese von Anfang an festzulegen, sollten Sie bedenken, dass ein Designsystem nicht als ein Portfolio von Arbeiten betrachtet werden sollte, sondern eher als ein funktionales Toolkit oder eine Ressource für Designer und Entwickler, um schneller zu arbeiten. Wenn Sie jedoch die Nützlichkeit eines Designsystems bezweifeln, könnte es sich lohnen, den Zeitrahmen zu berücksichtigen, den Sie zur Bewertung Ihrer Designarbeit verwenden werden. Designsysteme sind am besten, wenn das Unternehmen jahrelanger zukünftiger, reproduzierbarer Designarbeit entgegensieht.

‍

Fazit

‍
Designsysteme bestehen aus vielen Komponenten, Mustern, Stilen und Richtlinien, die Ihnen helfen können, Ihre Designanstrengungen zu operationalisieren und zu optimieren. Sie werden jedoch von Menschen entworfen, verwaltet und implementiert. Die wichtigsten Faktoren, die beim Erstellen eines Designsystems zu berücksichtigen sind, sind der Umfang und die Reproduzierbarkeit Ihrer Projekte sowie die verfügbaren Ressourcen und die verfügbare Zeit. Bei schlechter Implementierung und Wartung können Designsysteme zu unhandlichen Ansammlungen von Komponenten und Code werden. Aber wenn sie gut implementiert sind, können sie Teammitglieder schulen, die Arbeit rationalisieren und es Designern ermöglichen, komplexe UX-Probleme anzugehen.

‍