Die modernen Kommunikationstechnologien erzwingen eine Neubewertung unserer traditionellen Design- und Entwicklungsmethoden. Vor allem Designer müssen sich der Herausforderung stellen, zu überdenken, wie sie zukünftig mit ihren Auftraggebern kommunizieren möchten und was die Ergebnisse ihrer Arbeit sein sollten. Als erste Konsequenz dieses Wandels haben sich unter anderem modulare Gestaltungsprinzipien etabliert, die darauf abzielen, digitale Anwendungen kosteneffizienter sowie qualitativ hochwertiger zu erstellen.
Gutes Design ist modular aufgebaut!
Eine User-Interface-Dokumentation bzw. ein Styleguide ist eine Sammlung von Designelementen und zugehörigen Gestaltungsregeln, die zur Qualitätssicherung eingesetzt werden.
Ein Design-System ist dagegen viel mehr: Es schematisiert ein Designkonzept in wiederverwendbare Bausteine. Damit ermöglicht es ein systematisches und modulares Vorgehen beim Entwickeln von digitalen Anwendungen.
Ein Bildausschnitt aus dem Airbnb-Designsystem | Source: www.designsystems.com
Ein Design-System modularisiert ein Design. Es arbeitet vom Allgemeinen zum Konkreten und komponiert aus kleineren Bausteinen zunehmend grössere Module.
Wozu das Ganze?
Ganz einfach: Weil ein schematisiertes Design auf Basis von Modulen zu einer erheblichen Aufwandsreduzierung in der technischen Umsetzung führt und zudem viel konsistenter ist.
Dabei ist ein Designsystem besonders praktisch, wenn es online verfügbar ist und «Code Pattern» der einzelnen Designelemente 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. So erhält man schon zu einem sehr frühen Zeitpunkt innerhalb der Konzeption ein echtes «Look & Feel».
Dies reduziert nicht nur den Aufwand, sondern hilft 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.
1. Sie erhöhen die Qualität Ihres Designs
Ein Designsystem gewährleistet die Konsistenz aller Elemente. Dies führt zu einer höheren Benutzerfreundlichkeit und einem einheitlichen Erscheinungsbild. Es reduziert den visuellen "Wildwuchs" und sichert somit die Design-Qualität auf lange Zeit.
2. Sie sparen Aufwand und Kosten
Ein modulares Design ist technisch viel einfacher zu realisieren, da auch Code grundsätzlich modular aufgebaut ist. Ausserdem kann es leichter erweitert werden. Beide Faktoren reduzieren den Aufwand und die Kosten bei der Erstellung digitaler Lösungen erheblich.
Single Point of Truth
Ohne ein echtes Look & Feel, d.h. ohne die Wahrnehmung des responsiven Verhaltens oder das Ausprobieren möglicher Benutzerinteraktionen, gestaltet sich der Prozess der Designbewertung auf Seiten des Auftraggebers als sehr schwierig und führt letztlich zu vielen unnötigen Änderungswünschen.
Aus diesem Grund werden im Evaluierungsprozess häufig Prototypen verwendet. Deren Erstellung ist jedoch sehr zeitaufwändig. Und oft kann der dafür erstellte Code auch nach erfolgreicher Abnahme nicht in die technische Umsetzungsphase einfließen, da dort Frameworks oder andere Vorgaben, z.B. eines CMS, die Integration erschweren.
Ein weitere Herausforderung ist, dass man heutzutage in grösseren Teams an komplexen UX-Projekten arbeitet. Die Herausforderung dabei ist: Wie führt man die individuellen Arbeitsergebnisse aller beteiligten Mitarbeiter zu einer konsistenten, widerspruchsfreien Lösung zusammen?
Es ist offensichtlich, dass ein neuer, zeitgemäßer Workflow benötigt wird.
Jedem Designer, der digitale Medien gestaltet, ist inzwischen klar, dass wir heute keine «Seiten» mehr gestalten, sondern ein komplexes System von Komponenten, die interaktiv zusammenhängen. Wir entwerfen keine statischen Screens, sondern interaktive Benutzeroberflächen.
Viele Workflows und Tools berücksichtigen dies jedoch nicht. So erscheint es fast absurd, dass viele Auftraggeber bei Pitches oder Designpräsentationen immer noch statische Screens sehen wollen. Aber zu ihrer Verteidigung muss gesagt werden, dass unsere Kunden oft nicht wissen, was die beste Vorgehensweise ist und welche Vorteile sie bietet. Hier sind die Agenturen in der Pflicht, ihre Auftraggeber auf die verschiedenen Möglichkeiten bei der Konzeption komplexer digitaler Lösungen und deren Auswirkungen auf die technische Umsetzung und Qualitätssicherung ihres Designs hinzuweisen.
Qualitative Anforderungen an ein Design-System
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 wird ersichtlich, dass ein Designsystem mit zwei Herausforderungen konfrontiert ist:
- die Erstellung sowie
- die korrekte Anwendung.
Fehlen wichtige Bausteine 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 und ökonomischer Sicht eine kluge Wahl, sondern eignet sich auch hervorragend zur Evaluierung einer digitalen User Experience, da es ein echtes «Look & Feel» des Frontends der zu entwickelnden Anwendung ermöglicht. Es kann in vielen Fällen ein aufwendiges Prototyping vollständig ersetzen.
Die schnell auf eine beträchtliche Anzahl anwachsende Anzahl von Elementen und Zuständen muss in einer übersichtlichen und sich selbst erklärenden Art und Weise dargestellt werden. Ein schlecht benutzbares oder unübersichtliches Designsystem, ist keine grosse Hilfe. Aus diesem Grund haben wir sowohl im Back- als auch im Frontend von «AtomicKitchen» benutzerfreundliche Navigations- und Suchfunktionen integriert, die es Entwicklern und Designern ermöglichen, schnell das passende Element zu 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 und Darstellung Ihrer Marken-Richtlinien.