Was ist ein Design-System?
Ein Design-System schematisiert ein Designkonzept in wiederverwendbare Bausteine. Darüber ermöglicht es ein systematisches und modulares Vorgehen und garantiert ein konsistentes Nutzungserlebnis.
Ein Bildausschnitt aus dem Airbnb Design-System | Source: www.designsystems.com
Früher hat man Designkonzepte über User-Interface-Guidelines oder Design-Manuals abgebildet. Im Prinzip handelte es sich dabei um Dokumentationen der zur Verfügung stehenden Designelemente und der dazugehörigen Gestaltungsregeln. Mit Etablierung des Webs wurden diese nach und nach durch Web-Styleguides abgelöst, deren Erstellung und Distribution eine Reihe von Vorteilen mit sich brachte. Jedoch waren die dort abgebildeten Designs nicht zwangsläufig modular, responsive oder über ein Designsystem erstellt worden. Ein Beispiel für ein solches Tool mit dem man web-basierte Styleguides und Brand Guidelines verwalten kann, ist frontify.
Modulare und vor allem code-basierte Designsysteme lösen diese älteren Konzepte ab, da diese eine Reihe von Mehrwerten mit sich bringen. Zum einen ist ein über ein modulares Designsystem erstellte Anwendung viel konsistenter und besser skalierbar, zum anderen ist deren technische Realiserung durch die gegebene Modularität viel einfacher.
Ein Designsystem modularisiert ein Design. Es arbeitet vom Allgemeinen zum Konkreten und komponiert aus kleineren Bausteinen zunehmend grössere Module.
Code-basierte Design-Systeme
Ein digitales Designsystem ist besonders praktisch, wenn es «online» verfügbar ist und «Code Pattern» der einzelnen Designkomponenten bereithält. Da alle Designelemente aus nativen Code bestehen, können sie pixelgenau und 100% responsive dargestellt werden, genauso wie diese in ihrer späteren Anwendung erscheinen. Entwickler können während der technischen Umsetzung diese Code-Snippets entnehmen und in die Anwendung einbauen. Das verhindert Redundanzen, Fehlinterpretationen und Abweichungen, da dass Design nicht von jedem Entwickler aufs Neue in Code übersetzt werden muss.
Diese Faktoren tragen nicht nur dazu bei, den Aufwand zu reduzieren, sondern auch unangenehme Überraschungen zu vermeiden. Ein Designsystem ist somit das ideale Werkzeug, wenn verschiedene Mitarbeiter, Teams oder Agenturen gemeinsam an einem Projekt arbeiten und miteinander kommunizieren müssen.
Code-basierte Designsysteme sind daher nicht nur aus technischer und ökonomischer Sicht eine kluge Wahl, sondern eignen sich auch hervorragend zur Evaluierung einer digitalen User Experience, da sie ein echtes «Look & Feel» des Frontends der zu entwickelnden Anwendung ermöglichen. So kann in vielen Fällen auf ein aufwendiges Prototyping vollständig verzichtet werden.
Die Vorteile
- Die Design-Qualität und damit verbunden die User Experience wird verbessert.
- Ein einmal erstelltes Design kann leichter erweitert werden. Das erhöht die Nachhaltigkeit.
- Letztendlich führen alle Faktoren zu einer Aufwands- und Kostenreduzierung sowohl in der technischen Realisierung als auch in der Qualitätssicherung.
Qualitative Anforderungen an ein Design-System
Stellen Sie am besten eine grosse Kiste mit hunderten von Legosteinen vor, deren Bausteine aus etwa 50 verschiedenen Farben und Formen bestehen und zu fast jeder denkbaren Struktur zusammengesetzt werden können. Eventuell liegen Abbildungen oder Baupläne der damit zu erstellenden Modelle vor. Dennoch – wer schon ein Mal ein Lego-Modell zusammengesetzt hat, weiss, dass ist es mitunter nicht so einfach ist, ohne eine Schritt-für-Schritt-Anleitung diese Modelle nachzubauen.
Aus dieser Veranschaulichung wird ersichtlich, dass die Erstellung eines Designsystem nicht ganz trivial ist. Es sollte 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. Fehlen wichtige Bausteine oder verfügen sie nicht über die passenden Eigenschaften, können die Anwender des Designsystems nicht die damit gewünschten Modelle bauen.
Entwicklung von Design-Systemen
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 und Darstellung Ihrer Marken-Richtlinien.
