Für Unternehmen wird es zunehmend schwieriger, das wachsende Volumen an digitalen Inhalten und Berührungspunkten über mehrere Marken, Märkte und Gebiete hinweg zu verwalten. Da die Anzahl der Geräte, Browser und Umgebungen weiterhin rasant ansteigt, wird es immer wichtiger, durchdachte Systeme für die Schnittstellengestaltung zu entwickeln.
Was ist ein Designsystem?
Ein Designsystem kann als eine Sammlung wiederverwendbarer Komponenten definiert werden, die sich an klaren Standards orientieren und zur Erstellung einer beliebigen Anzahl von Anwendungen zusammengefügt werden können. Designsysteme steigern die Effizienz und ermöglichen Marketingteams, schnell digitale Assets zu erstellen und gleichzeitig die Markenführung zu gewährleisten.
Designsysteme werden bereits von Web-Giganten wie Google und Airbnb eingesetzt, welche die Art und Weise, wie sie digitale Produkte entwerfen, durch die Entwicklung ihrer eigenen Designsysteme verändert haben.
Welche Möglichkeiten gibt es?
Google – Material Design
Google Material Design war die erste Veröffentlichung eines Designsystems, das im Web zu finden ist. Seit seiner Veröffentlichung hat Google dieses System auf alle seine Anwendungen ausgeweitet, von Google Mail über Kalender bis hin zu Drive. Das Material Design System definiert den visuellen Designstil sowie das Look and Feel der Anwendungen.
Airbnb – Design Language System (DLS)
Das Designteam von Airbnb ist sehr offen mit seinem Ansatz für Designsysteme. Sie haben viel darüber geschrieben, wie sie ihr DLS-System entwickelt haben, und teilen mit, wie es verwaltet wird und wie sie es nutzen, um die App zu skalieren und schnell mehrere Sprachen anzubieten.
BBC – Global Experience Language (GEL)
Die Global Experience Language (GEL) von BBC hilft ihren Teams, Apps schnell zu entwickeln, zu erstellen und gleichzeitig sicherzustellen, dass alles der Marke entspricht. Das System ermöglicht, die Konsistenz aller BBC-Websites zu gewährleisten, von Nachrichten über Wetter bis hin zu iPlayer.
In den letzten Jahren haben Salesforce mit seinem Lightning Design System, IBM mit seinem Carbon Design System und Shopify mit seinem Polaris System (letztes Jahr veröffentlicht) nachgezogen.
Die wichtigsten Schritte zum Aufbau eines Designsystems
Bevor Sie ein Designsystem erstellen, sollten Sie unbedingt Ihr aktuelles Design überprüfen und die von Ihnen verwendeten CSS und visuellen Elemente aufzeichnen. Am wichtigsten ist, dass Sie bei der Erstellung eines Designsystems die Regeln der Marke (CI) und die visuelle Identität berücksichtigen.
Einige wichtige Bereiche, die Sie berücksichtigen sollten:
Farben: Diese umfassen in der Regel eine begrenzte Farbpalette, die Ihre Marke vollständig repräsentiert. Für das System werden in der Regel eine Primär- und eine Sekundärfarbe mit jeweils einer hellen und einer dunklen Variante ausgewählt.
Typografie: Die Wahl der richtigen Schriftart ist in der Regel einer der wichtigsten Schritte bei der Erstellung eines Designsystems. Die meisten Gestaltungssysteme enthalten nur zwei Schriftarten: eine für die Überschriften und die andere für den Text (und eine Monospace-Schriftart für den Code).
Die Ikonografie verwendet Bilder und Symbole, um ein Konzept visuell darzustellen. Der Schlüssel zum Erfolg liegt darin, eine Idee zu haben und an ihr festzuhalten sowie Richtlinien für Illustrationen und Symbole festzulegen und das beste Bildformat für die jeweilige Situation zu verwenden.
Protokollieren Sie jeden Schritt
Die Dokumentation der einzelnen Schritte unterscheidet eine Vorlagensammlung von einem Designsystem. Ein großartiges Beispiel hierfür ist Shopify Polaris:
Die Polaris-Prinzipien und -Richtlinien erläutern den internen Mitarbeiter:innen von Shopify, warum das System existiert, wie es verwendet wird und wie man es zur schnellen Erstellung und Skalierung von Produkten nutzen kann.
Polaris Identity zeigt alle Identitätsregeln auf, von den verwendeten Farben bis hin zur Typografie und der Art und Weise, wie Illustrationen verwendet werden sollten.
Polaris Components/Patterns bestimmt das atomare Element, das für die Erstellung der endgültigen Anwendung verwendet wird. Aus dem System selbst können Sie den Code kopieren, was für Entwickler:innen sehr wichtig ist, wenn sie die Anwendungen schnell erstellen wollen. Sie können mühelos die Zugänglichkeitsregeln sehen, die in eine bestimmte Komponente eingebaut wurden. Außerdem gibt es eine Anleitung, wie und wann die Komponente zu verwenden ist.
Was sind die Vorteile?
Ein Designsystem hilft Unternehmen, neue Produktangebote schnell auf den Markt zu bringen und gleichzeitig eine einheitliche User Experience zu gewährleisten.
Konsistenz
Den Nutzer:innen sollte über alle digitalen Berührungspunkte eines Unternehmens hinweg eine vertraute und konsistente User Experience geboten werden. Ein Designsystem sorgt für eine einheitliche Brand und User Experience, unabhängig davon, welche Anwendung oder welcher Kanal genutzt wird.
Kostenersparnis
Kosteneinsparungen können durch Designzeit, Code Erstellung, Wartung und QA/Testing erzielt werden, denn durch den Design- und Kodierungsprozess sparen Sie Zeit. Außerdem müssen Sie sich keine Gedanken über Schriftarten und Farben machen, da diese Entscheidungen in das Designsystem eingebettet sind.
Geschwindigkeit
Vordefinierte Komponenten helfen Unternehmen dabei, Systeme effizienter zu entwerfen und zu erstellen. Viele dieser Regeln sind in das System integriert, was bedeutet, dass Sie schneller Entscheidungen treffen, Prototyplösungen erstellen, diese testen und im Handumdrehen einführen können.
Risikominimierung
Es gibt ein Element der Risikominderung, was bedeutet, dass die Komponenten des Systems erprobt und getestet sind. Wenn etwas zügig gebaut werden muss, lässt sich der Zeitbedarf viel besser abschätzen.
Wohin kann die Zukunft uns als Designer:innen führen?
Ob man nun Künstler:in ist oder nicht, es kann extrem frustrierend sein, wenn man eine Vision im Kopf hat und versucht, sie zu zeichnen, diese aber einfach gut aussieht. Maschinelles Lernen und Kunst haben endlich ihre Wege gekreuzt – ein Durchbruch für beide. Dank dieser unglaublichen Zusammenarbeit können Systeme für maschinelles Lernen und Design innerhalb von Sekunden reale Skizzen in Entwürfe verwandeln. Dies hilft bei der Optimierung und ermöglicht eine schnellere und kostengünstigere Erstellung von Entwürfen, da Geschwindigkeit und Effizienz gesteigert werden.
Mehr Artikel?
Alle Artikel ansehen
Fragen?
Director Marketing & Business Development