Digitales Design System
Durch ein digitales Design System nachhaltig die User Experience verbessern
Mit einem Design System kann ein Unternehmen seine digitalen Medien wie Websites, Apps und Plattformen mit einer einheitlichen visuellen Sprache gestalten. Damit erfahren die Anwender:innen ein intuitiv nutzbares Erlebnis mit dem jeweiligen Medium und der Marke.
Was ist ein Design System?
Ein digitales Design System ist eine Sammlung von Design-Elementen, Interface-Komponenten und Gestaltungsprinzipien. Im Vergleich zu einem Styleguide oder einer Pattern Library besteht ein Design System nicht nur aus einer Anzahl wiederverwendbarer Interface-Komponenten, sondern beschreibt, wie die Design-Sprache der Marke angewendet wird und dadurch eine einzigartige User Experience entsteht.
Das Design System wird so zu einer visuellen Sprache, mit der eine Vielzahl von digitalen Produkten, Websites und Apps gestaltet werden kann – konsistent und effizient.
Woraus besteht ein Design System?
Grundlegend lässt sich ein Design System in zwei Bereiche einteilen. Zum einen verfügt ein Design System über einen abstrakten Teil. Diese Facette des Design Systems umfasst sämtliche (Marken-) Prinzipien, welche die strategisch-gestalterische Ausrichtung der Marke vorgeben.
Komplementiert wird ein Design System durch einen konkreten Teil, welcher alle Interface-Komponenten umfasst um (digitale) Produkte zu realisieren. Hierzu zählen Markenelemente (z.B. Logos, Claims, etc.) und grafische Komponenten, welche auf Grundlage des Atomic-Design-Prinzips entwickelt werden.
Damit ein Design System sein volles Potential ausschöpfen kann, ist es von besonderer Bedeutung, dass die konkreten Interface-Elemente um die abstrakten Bestandteile erweitert werden.
01 Prinzipien
Beispiel: Wir treten als transparenter und zuverlässiger Dienstleister auf.
02 Guidelines
Beispiel: Wir legen viel Wert auf eine offene und aufgeräumte Gestaltung. Wir nutzen ein modulares Design, welches unsere interne Zusammenarbeit nachhaltig verbessert.
03 Visuals
Beispiel: Logo, Claim, Schriften, Farben, Raster
04 Komponenten
Eine Überführung der ersten drei Punkte in digitale Elemente, zum Beispiel Formulare und Header. Die Beziehungen der Elemente werden nach dem Atomic-Design-Prinzip festgehalten.
05 Ressourcen
Ein zentraler Pool, in dem jede einzelne Komponente und ihre Beziehungen zueinander abgebildet sind und aus dem sich beispielsweise Marketing, Design und Entwicklung bedienen können.
Beispiel eines digitalen Design Systems
Wie profitieren Marken und Unternehmen von einem digitalen Design System?
Viele Touchpoints, ein stimmiges Markenerlebnis
Nutzende treten über verschiedene Touchpoints mit einer Marke in Kontakt. Mit einem Design System tritt eine Marke einheitlich auf und das positive Nutzererlebnis wird zur wertvollen Differenzierung der Marke.
Bessere User Experience
Um ein komplexes digitales Ökosystem zu pflegen, bedarf es einer zentralen Plattform: Design Systeme bilden die Basis für eine optimale User Experience. Sie ermöglichen die Umsetzung eines ganzheitlichen Design Ansatzes und garantieren so ein einheitliches Markenerlebnis über alle Touchpoints hinweg.
Effiziente digitale Produktentwicklung
Durch ein zentrales Design System, wird die digitale Produktentwicklung effizienter. Ein Design System senkt die Entwicklungskosten, garantiert qualitativ besseren Code und senkt den Kommunikationsaufwand zwischen Unternehmen und Dienstleistern.
Design wird skalierbar
Ein Design System ist schon für ein einziges Produkt eine hilfreiche und wirkungsvolle Methodik, wird aber umso wirkungsvoller, je mehr digitale Anwendungen darauf aufbauen – und je mehr Teams damit arbeiten. Denn digitale Produkte werden von vielen Menschen gleichzeitig entwickelt. Design Systeme fördern Kollaboration durch ein gemeinsames Verständnis und Vokabular. Design wird über Teams hinweg anwendbar, ohne Inkonsistenzen zu generieren.
39 Websites, 1 Design System
Konsistent trotz weltweiter Markttätigkeit? Wie wir ein Design System für den Logistik-Konzern Dachser umgesetzt haben, erfahren Sie in unserer Dachser Case Study.
Zusammenfassung
Design Systeme ...
… steigern den Wert einer Marke
Marken müssen für die Nutzenden erfahrbar sein, um sich von konkurierenden Angeboten zu differenzieren. Durch die Berücksichtigung der Markenphilosophie steigern Design Systeme nachhaltig den Wert einer Marke.
… sind flexibel in der Anwendung
Durch die Implementierung eines Design Systems lassen sich zukünftig digitale Produkte nicht nur schneller, sondern auch kostengünstiger entwickeln.
… steigern die User Experience
Ein Design System fördert die Einheitlichkeit eines digitalen Produkts. Und Einheitlichkeit sorgt für eine positive User Experience.
… erweitern Pattern Libraries
Design Systeme beugen nicht nur Inkonsistenzen und redundanten Elementen vor, sondern entfalten durch die Markenphilosophie erst ihr volles Potenzial.
Matthäus Eckert
Managing Designer