Optimale User Experience dank Design System
Mit Design System zum einheitlichen Markenauftritt
Den individuellen Entwicklungen am Markt gerecht werden
In den letzten Jahren sind Design Systeme zu wichtigen Bestandteilen für große und kleine Unternehmen geworden. Sie bilden im computerbasierten Bereich die Grundlage für einen einheitlichen Markenauftritt. So können digitale Medien wie Internetseiten, Apps und andere Plattformen einheitlich gestaltet werden, wodurch sich die positive User Experience steigern lässt.
In diesem Magazinbeitrag erfahren Sie wie die Grundzüge eines Design Systems aussehen und wie Unternehmen davon profitieren können.
Ein digitales Design System ist eine Sammlung von wiederverwendbaren Design-Elementen und Interface-Komponenten, die von klaren Standards geleitet sind. Diese ermöglichen eine abgestimmte Zusammenstellung einer variablen Anzahl von Anwendungen.
In einem Design System lassen sich nicht nur die Interface-Bausteine immer wieder verwenden, es lässt sich auch eine Design-Sprache anwenden, um so das Markenbild zu festigen.
Das digitale Design System stellt also eine visuelle Sprache dar, die eine Vielzahl von digitalen Produkten, Internetseiten und Apps einheitlich und effizient gestaltet.
Garantiert wird dadurch ein qualitativ hochwertiges Design, welches sich individuell an die Entwicklung von Strategien, Märkten und Trends anpassen lässt. Dabei ist es wiederverwendbar, bleibt aber beständig und trägt zur Struktur und Bedeutung des Designs bei. Ein Design System vereint also Branding, Farben, Tonalität, Typografie, Animationen und Datenvisualisierung in einer Anwendung.
Atomic Design
Grundsätzlich besteht ein Design System aus einzelnen Building Blocks wie Icons, Farben, Schrift, Buttons und Bilder. Diese Module bilden feste Komponenten (Bauteile) und Templates die sich in einer sogenannten Pattern Library sammeln. Hier erhalten Designer*innen und Frontendentwickler*innen die entscheidenden Informationen, um ein Design einheitlich fortzusetzen.
Building Blocks werden auch als Atome bezeichnet. Das kommt vom sogenannten Atomic Design Ansatz, erfunden von Brand Frost. Dieser Ansatz beschreibt ein Grundkonzept der Web-Gestaltung. Hier baut sich das Design vom kleinstmöglichen bis zum größten Bestandteil zusammen. So entstehen auf Basis der Atome Module, Komponenten und Templates, die sich dann in der Pattern Library oder in der Pattern Lab wiederfinden lassen. Dabei sammeln sich in der Pattern Library vor allem die Komponenten, die für Frontendentwickler*innen sowie UI und UX Designer*innen wichtig sind, während der Backendentwickler in der Pattern Lab die relevanten Bauteile findet.
Neben den einzelnen Modulen können in einem Design System bestimmte Principles festgehalten werden. Dabei handelt es sich um eine Festlegung der Regeln, die für die Erstellung von Design, Animationen und für die technische Umsetzung gelten sollen.
Schlussendlich beschreibt der Style Guide nun die Art und Weise wie das Design System verwendet wird und wie es weiterentwickelt werden soll.
Einige große Unternehmen die bereits ein Design System verwenden stellen dieses als Vorlage für andere Unternehmen zur Verfügung. So auch Atlassian, ein globaler Anbieter von Softwarelösungen für Softwareentwickler.
Dabei zeigt das Design System von Atlassian deutlich, wie ein einheitliches Design über verschiedene Anwendungen hinweg (wie beispielsweise Jira, Trello und Bamboo) die Verwendung und das Switchen zwischen den verschiedenen Tools vereinfacht. Aufgrund des einheitlichen Designs, können User*innen jede Software schnell und einfach bedienen und sich in kürzester Zeit zurecht finden.
So wird ein nahtloser Übergang zwischen verschiedenen Produkten und somit eine bessere Experience erzeugt.
In einer stetig wachsenden Informationsflut ist es immer relevanter als Unternehmen oder als Marke wahrgenommen zu werden und sich so vom Wettbewerb abzuheben. Es ist wichtig, dass das Unternehmen oder das Produkt im Gedächtnis der Kund*innen bleibt. Nur mit einem zeitgemäßen Erscheinungsbild der Firma können moderne Produkte erfolgreich angeboten werden. Design Systeme sind individuell und doch einheitlich. Unternehmen können von einem konsistenten Unternehmensbild profitieren und so ihren digitalen Markenauftritt verbessern.
Einheitliches Auftreten
Egal welches Gerät oder welches Tool, mit einem Design System lässt sich Konsistenz zwischen allen Geräten generieren. Dabei können verschiedene Medien auf verschiedenen mobilen Endgeräten bedient und ausgespielt werden. Das einheitliche Design ermöglicht eine unkomplizierte Anwendung, unabhängig vom Ort oder dem Gerät, das zur Verfügung steht.
User Experience
Es gibt viele verschiedene Touchpoints über die Nutzer*innen mit einer Marke in Kontakt treten. Ein einheitliches Markenbild stärkt dabei das positive Nutzererlebnis. Das führt zu einer wertvollen Differenzierung ihrer Marke. Design Systeme bilden eine zentrale Plattform, die eine Umsetzung eines ganzheitlichen Design Ansatzes ermöglicht.
Effizienteres Arbeiten
Über ein zentrales Design System lässt sich die Produktentwicklung viel effizienter gestalten. Dabei werden die Entwicklungskosten gesenkt und durch qualitativ bessere Codes kann schneller und agiler gearbeitet werden. Dies ist vor allem bedeutsam für externe Designer. Das Design System hilft ihnen dabei innerhalb weniger Minuten die notwendigen Informationen zu sammeln, so können sie ihre Arbeit schnellstmöglich fortsetzen.
Design System als Basis für effiziente Teamarbeit
Ein Design System kann für ein einziges Produkt bereits sehr hilfreich sein, aber je mehr digitale Anwendungen darauf aufbauen, desto wirkungsvoller zeigt sich seine Anwendung, vor allem wenn mehrere Teams an einem Produkt oder Projekt arbeiten.
Digitale Produkte werden häufig von vielen Menschen gleichzeitig entwickelt. Design Systeme fördern durch ein gemeinsames Verständnis und eine gemeinsame Sprache die Kollaboration zwischen den einzelnen Teams und vermeiden so Inkonsistenzen in den verschiedenen Bereichen.
Alles in allem ist ein erfolgreiches Design System zwar wiederverwendbar, dennoch stellt es aber viele Unternehmen vor die gleiche Problematik: Einzelne Teammitglieder haben Komponenten entwickelt, die zu individuell auf nur einen einzigen Fall abgestimmt sind.
Das ganze System wird so zu unflexibel und Entwickler*innen und Designer*innen sind gezwungen, während dem laufenden Betrieb neue Komponenten zu erstellen, was zu Produktivitäts- und dadurch auch zu Geldverlusten führt.
Um in einem Design System eine effiziente Wiederverwendbarkeit und Skalierbarkeit gewährleisten zu können, sollte darauf geachtet werden, dass die Komponenten innerhalb des Systems modular und in sich geschlossen sind, um Abhängigkeiten zu reduzieren.
Einen weiteren Anspruch an das Design System stellen kombinierbare Komponenten, die in verschiedenen Kombinationen ausgewählt und zusammengestellt werden können, um individuelle Bedürfnisse zu erfüllen. Die Benutzer*innen können verschiedene Bauteile zusammenschließen und so wieder neue Komponenten erstellen.
Dabei ist es wichtig, dass die Flexibilität innerhalb der einzelnen Systeme beibehalten bleibt, um sicher zu stellen, dass die Benutzer*innen alle Bauteile an individuelle Plattformen anpassen und erweitern können.
Zur Einführung einer neuen Komponente stellt sich daher immer die Überlegung ob diese plattformübergreifend funktionieren wird. Dabei stellen nahtlose Übergänge sowie die Performance den Schlüssel für die Entwicklung eines soliden Design Systems dar.
Für Unternehmen ist die Entscheidung für die Anschaffung eines Design System keine leichte. Ein Design System ist kein einmalig entwickeltes Produkt, es lebt davon immer wieder erweitert zu werden. Daher ist dieser Schritt für Unternehmen gut zu durchdenken. Erfolgreiche Design Systeme müssen sich stetig weiterentwickeln und sich immer wieder an den neuen Anforderungen des Unternehmens ausrichten, um den ständig wechselnden Märkten gerecht zu werden. Schnelle Entwicklungszyklen und Produktentwicklungen besitzen einen großen Einfluss auf die Flexibilität, an welche sich das System anpassen muss, um effizient skalierbar zu sein.
Die größte Herausforderung für Unternehmen ist es dabei, die Vor- und Nachteile ihrer Design- und Entwicklungsprozesse abzuwägen und so die effizienteste Lösung für die eigenen spezifischen Bedürfnisse zu finden.
Ein solides Design System ist eine der effektvisten Maßnahmen, den Workflow zwischen Entwickler*innen und Designer*innen zu steigern, ein effektives Erscheinungsbild der Marke zu gewährleisten und schlussendlich den ROI (Return on Investment) zu erhöhen.
Sie haben Fragen?
Wir beraten Sie gerne!