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.
Wenn Designsysteme gut implementiert sind, können sie einem Designteam viele Vorteile bieten:
Es gibt einige potenzielle Hürden und Einschränkungen, die ein Designteam daran hindern können, ein Designsystem zu verwenden:
Ein Designsystem besteht aus zwei wichtigen Teilen:
Design-Repositories können viele Formen annehmen, aber sie enthalten oft einen Styleguide, eine Komponentenbibliothek und eine Musterbibliothek.
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.
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:
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.
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.
Es gibt im Allgemeinen drei Ansätze zur Verwendung eines 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.
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.