Was ist AtomicKitchen? Dokumentation
Login
Kontakt
ENDE

Designsysteme

Eine Marke, viele Touchpoints, unendliche viele User-Interfaces. Ob Corporate-Website, Online-Shop oder Social Network, eine Marke muss sich auf vielfältigen Kanälen behaupten und überall einen guten Eindruck hinterlassen. Dabei sollen Corporate-Design-Manuals und Styleguides helfen. Und immer mehr Unternehmen setzen auf Designsysteme. Was nützen und wie funktionieren diese?

Die Zahl der digitalen Touchpoints einer Marke steigt stetig.

Geänderte Rahmenbedingungen

Unsere modernen Technologien führten zu einem Paradigmenwechsel in unserer Art zu kommunizieren. Die lange Zeit allgemeingültige Informationseinheit «Seite» löst sich zusehends auf. An ihrer Stelle treten mehrschichtige Benutzeroberflächen. Damit ändern sich auch die Anforderungen an die Inhaltsdarstellung. Neben Lesbarkeit und Ästhetik spielen vor allem Benutzerfreundlichkeit und Responsivität eine entscheidende Rolle.

Als einer von vielen Konsequenzen werden verstärkt Design-Management-Systeme – oder kurz «Designsysteme» eingesetzt, die Inhaltsanbietern helfen, den wachsenden kommunikativen Anforderungen gerecht zu werden.

Um was geht es eigentlich?

Wir denken, dass wir hier nicht viel Worte über den positiven Einfluss, welches ein einheitliches Erscheinungsbild auf die «Business Value» eines Unternehmens ausübt, verlieren müssen.

Jedem Marketingteam, jedem UX Professional ist es bewusst, dass ein stimmiges wie konsistentes Corporate Design einen positiven Einfluss auf die Customer Journey hat. Neben der Produkt- und Servicequalität stellt es eines der vertrauenbildensten Faktoren in Bezug auf die Markenwahrnehmung oder das Produktnutzenversprechen dar. Es bestimmt nachhaltig die Reputation eines Unternehmens.

Umso mehr überrascht es uns, dass viele Unternehmen sehr wenig für die Qualitätssicherung ihrer Design-Elemente und -Standards tun. Die Methoden und Tools diesbezüglich sind häufig immer noch analog, bedienen sich Brückentechnologien (wie beispielsweise PDFs) oder sind durch erhebliche Medienbrüche gekennzeichnet.

Häufig sind die Unternehmen an diesem Umstand nicht einmal selbst schuld. Denn wenn man sich die Entwicklungs-Workflows vieler zuliefernder Digitalagenturen anschaut, offenbart sich hier eine sehr tradierte und nicht mehr zeitgemässe Vorgehensweise.

Diese Buttons wurden auf der HubSpot Website verwendet. Das ist kein Einzelfall, wir könnten hier viele andere Beispiele aufführen. Wir fragen uns, wie können soviel verschiedene Buttons entstehen? | Quelle: https://medium.com/hubspot-product

Woran liegt das?

Die meisten Frontends werden immer noch "Seitenvorlagen-basiert" erstellt. Dazu werden in der Regel Key-Templates, wie die Startseite, Übersichts- und Detailseiten und die darauf verwendeten Content-Elemente designt – zunächst über Wireframes und dann über Mockups. Sofern das Budget es zulässt wird zur Qualitätssicherung neben einem Developer-Handoff gegebenenfalls auch ein Styleguide oder eine UI-Dokumentation erstellt, die aber in der Regel nur bis zum nächsten Relaunch gültig sind.

Diese Vorgehensweise ist weder effizient noch nachhaltig.

Viel besser wäre es, zunächst ein «modulares Designsystem» zu entwickeln, welches Designer und Entwickler gleichermassen mit Bausteinen versorgt, mit denen sie dann – quasi via «Drag & Drop» eine Vielzahl von Anwendungen erstellen können.

Das reduziert nicht nur den Aufwand und somit die Kosten der technischen Umsetzung, sondern führt auch zu einer integralen Harmonie und Konsistenz der dabei entstehenden Lösungen.

Designsysteme sind modular aufgebaut

Ein Designsystem unterscheidet sich von einem Styleguide dadurch, dass es ein Design schematisiert bzw. schabloniert und damit eine systematische und modulare Vorgehensweise in der Konzeption von Artefakten ermöglicht. Deswegen sollte die Entwicklung eines Designsystems am Anfang und nicht am Ende des konzeptionellen Prozesses stehen.

Ein Designsystem hilft auf langer Sicht Kontinuität in die User Experience einer Marke zu bringen. Nicht alles muss bei jedem Relaunch über Bord geworfen werden. Eine Evolution des Designs an die sich verändernden Rahmenbedingungen ist dadurch nicht nur möglich, sondern absolut sinnvoll. Komplette Brüche verunsichern Anwender und Verbraucher oftmals mehr, als sie Ihnen nützen.

Ein Designsystem ist somit das ideale Werkzeug, wenn Designer, Entwickler und Stakeholder miteinander kommunizieren möchten oder wenn verschiedene Teams und Agenturen über einen längeren Zeitraum mit Design-Artefakten versorgt werden müssen.

Ein Designsystem ist für eine nachhaltige Nutzung ausgelegt. Es skaliert mit den sich ändernden Anforderungen und verliert nicht bei einem Relaunch seine Gültigkeit.

Qualitative Anforderungen an ein Designsystem

Stellen Sie am besten eine grosse Kiste mit hunderten von Legosteinen vor, deren Bausteine vielleicht aus 20 verschiedenen Farben und Formen bestehen und zu fast jeder denkbaren Struktur zusammengesetzt werden können. Eventuell besitzen Sie sogar Abbildungen der fertigen Modelle, die man mit diesen Bausteinen bauen kann. Wer es mal probiert hat, weiss, dass ist es gar nicht so einfach ist, ohne eine Schritt-für-Schritt-Anleitung diese Modelle nachzubauen.

Aus dieser Veranschaulichung heraus lässt sich ableiten, dass es zwei Phasen im Leben eines Designsystems gibt:

  1. die Erstellung sowie
  2. die Anwendung eines Designsystems.

Fehlen wichtige Legosteine oder verfügen sie nicht über die passenden Eigenschaften, können die Anwender nicht die damit gewünschten Modelle bauen.

Deswegen müssen sich "Legostein-Designer" darüber Gedanken machen, was für Bausteine grundsätzlich benötigt werden und wie diese Bausteine aussehen müssen.

Die Erstellung eines Designsystem ist daher nicht ganz trivial. Damit es effizient eingesetzt werden kann, sollte es auf die vorgesehenen Anwendungsfälle ausgerichtet sein. Das setzt eine intensive Auseinandersetzung der Designer mit den Use Cases und den User Journeys der Anwendungen, für welche es eingesetzt werden soll, voraus.

Digitale Anwendungen benötigen ein codebasiertes Designsystem

Ein codebasiertes Designsystem ist nicht nur aus technischer sowie ökonomischer Sicht eine kluge Wahl, sondern ist durch die Ermöglichung eines echten «Look & Feels» hervorragend zur Evaluierung der User Experience ausgelegt. Es kann in vielen Fällen ein aufwendiges Prototyping vollständig ersetzen.

Dabei sollte die schnell auf einem beträchtlichen Umfang anwachsende Zahl von Elementen und Zuständen übersichtlich und selbsterklärend dargestellt werden. Ein schlecht benutzbares oder unübersichtliches Designsystem, ist keine grosse Hilfe. Im Back- und Frontend von «AtomicKitchen» haben wir deshalb benutzerfreundliche Navigations- und Suchfunktionen integriert, damit Entwickler und Designer schnell das passende Element finden.

Individuelle Entwicklung von Designsystemen

Als erfahrener Partner im Aufbau von Designsystemen können wir auch Ihrem Unternehmen ein individuelles Designsystem entwickeln, das Ihre Anforderungen präzise erfüllt. Sprechen Sie uns an. Wir zeigen Ihnen gerne, wie Sie ein Designsystem in Ihren Workflow integrieren können, sei es für einen geplanten Website-Relaunch oder zur Verwaltung Ihrer Marken-Richtlinien.