Design Systems: Welche sind das und brauchen Sie eins?

Zuletzt aktualisiert am 21. November 2019

Einheitlichkeit im Web hat einen negativen Beigeschmack. Es ist oft gleichbedeutend mit langweilig, unoriginell oder sogar kopiert. Aber wenn es um Ihre Website geht, erzählt die Einheitlichkeit eine ganz andere Geschichte; Zuverlässigkeit, Voraussicht, Sorgfalt und Organisation. Design spielt von Jahr zu Jahr eine immer wichtigere Rolle. Daher kann es zu einer entmutigenden Aufgabe werden, das Design verschiedener Elemente Ihres Produkts in Harmonie miteinander zu halten. Um dies zu unterstützen, hat sich das Konzept eines Designsystems herausgebildet. Aber was ist ein Designsystem? Braucht mein Unternehmen überhaupt eine? Wie unterscheidet sich das von einem Styleguide? All diese Fragen (und mehr) werden in diesem Artikel beantwortet.

Was ist ein Designsystem?

Ein Designsystem ist einfach eine skalierbare Möglichkeit, Design über eine Vielzahl von Elementen durch Ihre Produkte zu implementieren. Es sollte eine klare Dokumentation, Prinzipien und Regeln enthalten, die den Zweck, das Aussehen, die Haptik und die Verwendung von Elementen definieren, die in Ihrem gesamten Produkt verwendet werden sollen.

Der Zweck Ihres Designsystems besteht darin, Ihnen bei der Erstellung des Endprodukts zu helfen. Vor diesem Hintergrund sollte es Ihnen oder Ihrem Team die Verwendung vordefinierter Elemente erleichtern, die wiederverwendbar und modular sind. Auf diese Weise können Sie Elemente auf unterschiedliche Weise kombinieren, um Produkte mit einem einheitlichen Gefühl zu erstellen, auch wenn sie möglicherweise unterschiedliche Zwecke haben .

Dies ist nichts, was Sie überstürzen möchten. Ihr Designsystem sollte der Leitfaden für den Aufbau aktueller und zukünftiger Projekte für Ihr Unternehmen sein, also sollten Sie Zeit damit verbringen, es zu erstellen.

Das bedeutet nicht, dass Ihr Designsystem in Stein gemeißelt ist, sobald Sie es erstellt haben. Es sollte als fortlaufendes Projekt betrachtet werden, an dem Sie arbeiten, um zu sehen, was funktioniert und was nicht, und es zu verbessern. Das heißt, es wird nicht in ein paar Tagen fertig sein. Es erfordert eine gründliche Analyse Ihrer Ziele als Unternehmen und der Schritte, die Sie unternehmen werden, um Ihren Kunden ein Produkt zu liefern.

Designsystem vs. Styleguide

Bisher mag es scheinen, dass ein Designsystem nur ein neuer Name für einen Styleguide ist. Nachdem ein Styleguide viele der gleichen Elemente wie Farbe, Stil und Typografie abdeckt. Also, was ist der Unterschied? Anstatt sie gegensätzlich zu betrachten, kann ein Styleguide Teil eines Designsystems sein. Während es viele der Elemente skizziert, die in das Design einfließen, fehlen die Prozesse, die sie erstellt haben, die Werkzeuge, die sie erstellt haben, und wie all diese Elemente zusammenarbeiten.

Ein Designsystem setzt Ihr Design in einen Kontext, wie es ein Styleguide nicht tut. Mit Ihrem Designsystem können Sie die Bausteine ​​Ihrer Produkte erstellen, indem Sie die beschriebenen Regeln, Prozesse und Werkzeuge befolgen. Dies unterscheidet sich von den grundlegenden Sätzen von Eigenschaften, denen Ihre Elemente folgen. Sie können Ihren Styleguide als Nebenprodukt Ihres Designsystems betrachten, das nur einen kleinen Teil des Gesamtbildes abdeckt. Betrachten wir dieses Beispiel:

Heute hergestellte Lego-Steine ​​sind immer noch mit Lego-Steinen aus dem Jahr 1958 kompatibel. Sie sind eines der besten Beispiele für austauschbare Teile, mit denen eine Vielzahl erstaunlicher Dinge gebaut werden können. Die Lego Company hat im Laufe des Jahres eine Vielzahl von Sets hergestellt, mit denen Sie fast alles bauen können, was Ihr Herz begehrt. Ein Styleguide kann mit der Bausteinliste verglichen werden, die in jedem Paket enthalten ist. Es zeigt Ihnen, wie viele Steine ​​​​enthalten sind, ihre Farben, ihre Größe und die Teilenummer. Ein Designsystem ist wie die Anleitung zum Bauen dessen, was Ihr Set sein soll. Es skizziert, welche Teile wohin gehören und wie sie zusammengesetzt werden sollten, um Ihre Kreation zu bauen, außer dass Sie nicht sagen, wie Sie eine Sache bauen können, sondern Ihnen zeigen, wie Sie mehrere verschiedene Strukturen mit genau demselben Satz von Steinen bauen können. Zu wissen, wie sie zusammenpassen und warum sie es tun, kann Ihnen sogar dabei helfen, etwas völlig Neues aus denselben Teilen zu machen.

Ein Styleguide und ein Designsystem sind zwar verwandt, aber zwei verschiedene Dinge, die beim Design sehr unterschiedliche Rollen spielen.

Warum brauche ich ein Designsystem?

Jetzt, da wir wissen, was Designsysteme sind und was der Unterschied zwischen ihnen und Styleguides ist, fragen Sie sich vielleicht, ob Sie wirklich eines brauchen. Schließlich bauen Sie möglicherweise nur eine oder zwei Websites oder haben nur ein Kernprodukt. Der Aufbau eines Designsystems ist definitiv ein großer Zeitaufwand; Können Sie die aufgewendete Zeit wirklich rechtfertigen? Wenn Sie eines der folgenden Dinge verbessern möchten, ist es vielleicht genau das Richtige für Sie.

Konsistenz

Wenn Sie ein einheitliches Erscheinungsbild für Ihr Produkt oder Ihre Website haben möchten, können Sie von einem Designsystem profitieren. Stellen Sie sich eine Website vor, die mehrere Frameworks zum Erstellen verwendet. Sie können unterschiedliche Schaltflächenstile, Schriftarten für Überschriften und mehrere andere Elemente haben, die nicht konsistent sind. Es fühlt sich sehr nach Patchwork an, und das kann dazu führen, dass sich eine Website für einen Kunden als sehr minderwertig anfühlt. Mit einem Designsystem erhält Ihr Team mehr Anweisungen darüber, wie ein Element genau aussehen, sich anfühlen und verhalten soll.

Effizienz

Ob Sie ein großes Team aus Designern und Entwicklern haben oder nur Sie selbst, ein Designsystem kann Sie effizienter machen. Mit vorgefertigten Elementen, die Sie zusammensetzen können, sparen Sie Zeit und können schneller arbeiten. Dies gilt umso mehr, wenn Sie planen, ein neues Projekt zu bauen. Verschwenden Sie keine Zeit mehr mit dem Betrachten von Rahmen, Farben und Typografie, alles ist in Ihrem Designsystem enthalten.

Einigkeit im Team

Wenn Sie mit einem Team arbeiten, kann ein Designsystem als Leitfaden für das Design dienen, anstatt dass jeder sein eigenes erstellt. Die Verwendung führt zu weniger Fragen zur Implementierung eines Designs. Jeder hat eine zentrale Ressource, auf die er sich bei seinen Entscheidungen bezüglich des Produkts stützen kann. Dies ist besonders hilfreich für Personen, die schnell auf den neuesten Stand gebracht werden müssen, wie neue Mitarbeiter, Remote-Mitarbeiter und Freiberufler.

Wenn Sie einen dieser Bereiche erweitern möchten, kann die Erstellung eines Designsystems für Ihr Unternehmen als gut investierte Zeit angesehen werden.

Wer verwendet ein Designsystem?

Bei all dem Gerede über Designsysteme und ihre Bedeutung, wer benutzt sie überhaupt? Viele große, bekannte Unternehmen verwenden ein Designsystem und stellen sie sogar der Öffentlichkeit zur Ansicht zur Verfügung. Hier sind nur einige:

• Fluent von Microsoft
• Googles Materialdesign
• Polaris von Shopify
• Photon von Firefox

Sogar die Regierung der Vereinigten Staaten hat ihr eigenes Designsystem. Beachten Sie, dass es mehr als nur eine Komponentenbibliothek ist, sondern auch die Prinzipien und Ziele enthält, die das Designsystem selbst geformt haben.

Sie müssen kein großes Unternehmen sein, um eines zu gründen. Wenn Sie eine haben, selbst wenn Sie klein sind, können Sie sie implementieren und beibehalten, während Sie wachsen. Es ist ein alltägliches Werkzeug für Ihr Unternehmen, um konsistent, organisiert und effizient zu bleiben. Verschwenden Sie also keine Zeit damit, das Rad für jedes Projekt neu zu erfinden, und denken Sie ernsthaft darüber nach, ein Designsystem aufzubauen.

Urheberschaft: Taj R.