Das Designsystem wird in der Welt des digitalen Designs immer häufiger eingesetzt, und das aus einer Reihe von guten Gründen. Wenn Sie nicht wissen, was ein Gestaltungs system ist oder wann Sie es verwenden sollten, finden Sie in diesem Artikel die Antworten.

Was ist ein Entwurfssystem?

Ein Design system ist ein Satz aller UI-Komponenten, die zu einem digitalen Produkt gehören und nach einer gemeinsamen UX-Strategie entwickelt werden. Eine UX-Strategie ist ein detaillierter Plan, der die Vision und die Hauptziele eines Produkts definiert und sicherstellt, dass die geschäftlichen Anforderungen und die Bedürfnisse der Nutzer übereinstimmen. Wenn in einem Design system neue UI-Elemente (Schaltflächen, Eingabefelder, Tabellen usw.) für eine Anwendung erstellt werden, werden sie nach denselben Prinzipien, Farbschemata und Mustern erstellt. Dadurch kann das Gesamtdesign der Anwendung konsistent bleiben, die Entwicklungszeit wird verkürzt und die Benutzerfreundlichkeit verbessert.

Das Design system umfasst beispielsweise die Typografie, die Farbpalette, den Stil der verschiedenen Elemente oder das Icon-Set der Anwendung. Man kann sagen, dass all diese Elemente in einem gut gestalteten Markenbuch enthalten sind , das im Wesentlichen dazu dient, die Farbschemata, Schriftarten und Muster zu definieren, die mit der Marke verbunden sind. Ein Design System ist jedoch viel mehr als ein Brandbook, vor allem weil es UI-Elemente enthält, die nach den im Brandbook definierten Prinzipien und Stilen entwickelt wurden, und auch erklärt, wie sie im Kontext verwendet werden.

Warum ein Entwurfssystem verwenden – Konsistenz

Design system haben zwei große Vorteile. Der eine ist, dass sie das Markenbewusstsein stärken, weil sie garantieren können, dass jedes UI-Element unter der Marke immer gleich aussehen wird. Wenn man sich eine Werbung ansieht, die die magentafarbene Farbe der Telekom zeigt , muss darauf nicht einmal unbedingt ein Telefon zu sehen sein, man assoziiert es sofort mit dem Telekommunikationsunternehmen. Magenta ist ein zentraler Bestandteil der Marke Telekom, und weil wir es ständig und überall neben dem Namen Telekom sehen, identifizieren wir Magenta inzwischen mit der Telekom. Bei einer App funktioniert das genauso, denn eine App ist nur eine Schnittstelle, an der unsere Marke auf unsere Kunden trifft. Wenn jemand mehr darüber lesen möchte: In der Psychologie wurde viel über die kognitiven Aspekte der Markenbildung geforscht. Mit der Konsistenz, die Design Systems bietet, wird unser Produkt oder unsere Marke also stärker und erkennbarer sein..

Natürlich ist die Konsistenz nicht nur für die Marke wichtig. Die Benutzerfreundlichkeit Ihrer Anwendung wird erheblich verbessert, wenn Elemente mit derselben Funktion auf dieselbe Weise funktionieren und gleich aussehen.Im physischen Raum erkennt jeder einen Türknauf, weiß, wie man ihn benutzt und was er bewirkt. Das liegt nicht zuletzt daran, dass die meisten Türknäufe fast genau gleich aussehen und je nach Typ auch gleich funktionieren.Bei einer Anwendung ist es genauso, denn wenn man genau hinsieht, findet man einen Menüpunkt auf einer Seite an der gleichen Stelle auf einer anderen Oberfläche und man erwartet fast, dass er auf die gleiche Weise funktioniert.

Warum Design System verwenden – Zeit

Aber es gibt noch einen weiteren großen Vorteil von Design Systems. Sie können nämlich den Zeitaufwand für künftige Design- (und im günstigen Fall auch Entwicklungs-) Arbeiten erheblich verkürzen. Wenn Sie eine Bibliothek haben, in der Sie wissen, wie jedes Oberflächenelement in Ihrer Anwendung funktioniert, in welchem Kontext es verwendet werden soll und wie es optisch aussieht, können Sie das Oberflächenelement einfach aus dem Regal nehmen, wenn Sie eine neue Funktion entwerfen. Eine solche Benutzeroberfläche kann mit nur geringfügigen Änderungen auf die Anforderungen des jeweiligen Kontexts zugeschnitten werden.

Es liegt im Ermessen des Produktmanagers, wie weit er bei der Einführung eines Entwurfssystems gehen will . Idealerweise sollten die Komponenten von einer „fertigen“ Version begleitet werden, die in Code kompiliert ist. Dies hat auch den Vorteil, dass man bei einem neuen Entwicklungsbedarf nicht alle Elemente von Grund auf neu entwickeln muss, sondern einfach eine der vorgefertigten Komponenten in sein Projekt ziehen kann. Manche Leute nennen es ein Design-System, d.h. eine Kombination aus Design und Code, und bezeichnen das Design selbst als „Design-Muster“.

​​Wann sollte man Design Systems nicht verwenden?

Der Aufbau und die Pflege eines Entwurfssystems kosten Zeit. Je größer die Anwendung, je mehr Komponenten im Design system, desto mehr Zeit braucht es. Wir können dies auch als eine Investition betrachten, die sich mittel- bis langfristig auszahlt. Wenn Sie nur eine kleine Anwendung haben, bei der es kein Problem ist, ein konsistentes Design ohne ein Designsystem zu erstellen , ist es wahrscheinlich nicht sinnvoll, mehrere Tage, Wochen oder sogar Monate an Planungszeit in die Erstellung eines Design systems zu investieren . Wenn Ihre Anwendung komplex ist und aus vielen Komponenten besteht, Sie aber nicht vorhaben, lange daran zu arbeiten, ist es oft einfacher, einen einzelnen Bildschirm zu erstellen, als ein komplettes Design system zu entwickeln.

Wie wird das Design System hergestellt?

Design systeme werden in der Regel in Figma oder Sketch erstellt. Natürlich können Sie das Ganze auch selbst erstellen, aber oft ist es schneller und nützlicher, von einem bestehenden System (z. B. Material) auszugehen. Ersteres ist häufiger der Fall, wenn Ihre Anwendung aus speziellen UI-Komponenten aufgebaut ist, die Sie wahrscheinlich nicht in einem Standard-UI-Kit finden werden . Vorgefertigte Design system können online erworben werden und sind leicht anpassbar, so dass die Zeit für die Erstellung Ihres Design systems verkürzt werden kann.

—–

Wenn Sie keine Erfahrung mit der Erstellung eines Design systems haben und Hilfe benötigen, können Sie sich gerne an uns wenden! Wir können Ihnen helfen, die bestmöglichen Entscheidungen für die Entwicklung Ihres Unternehmens zu treffen.

Interessieren Sie sich für weitere UX/UI-Design-Themen? Dann bleiben Sie dran für weitere Blogbeiträge, die bald erscheinen!

Wenn Sie an unseren anderen Blogbeiträgen interessiert sind:

• The Human Mind and Usability: Cognitive Biases
• The Human Mind and Usability: Problem Solving & Decision Making
• How we redesigned our operation successfully in two weeks and what we would suggest
• How to run a specification workshop series with 40 stakeholders?
• Marketing Automation Basics: How to Use it in Your Business
• How to use personal effectively
• Marketing Automation Trends in 2023

Sources:
https://meldrumconsulting.ch/category/innovation/
https://www.divami.com/blog/the-build-or-buy-consideration-in-ux-design
https://lumentanfolyamok.hu/webfejleszto-tanfolyamok/ux-design-figma-tanfolyam
https://www.secretstache.com/blog/ui-design-system/
https://www.toptal.com/designers/ux/design-system