Design-Systeme: Design und Code wiederverwendbar, skalierbar und konsistent machen

Atomic Design ist hilfreich bei der Definition der Komponenten, aber es ist nur eine Möglichkeit, die Elemente eines Design-Systems zu beschreiben.

Design-Systeme ermöglichen es Teams, bessere digitale Produkte schneller zu entwerfen und zu entwickeln. Wieso das? Weil die Wiederverwendung gut definierter Stile, die auf Komponenten und Muster angewendet werden, Skalierbarkeit und Konsistenz bietet. Der Hauptwert eines Designsystems liegt jedoch in der Unterstützung einer engen Teamarbeit und in der Verbreitung der Werte und Prinzipien des Unternehmens im Team, was sich auch in klaren Vorteilen für den Benutzer niederschlägt.

Design-Systeme ermöglichen es Teams, bessere digitale Produkte schneller zu entwerfen und zu entwickeln. Wieso das? Weil die Wiederverwendung gut definierter Stile, die auf Komponenten und Muster angewendet werden, Skalierbarkeit und Konsistenz bietet. Der Hauptwert eines Design-Systems liegt jedoch in der Unterstützung einer engen Teamarbeit und in der Verbreitung der Werte und Prinzipien des Unternehmens im Team, was sich auch in klaren Vorteilen für den Benutzer niederschlägt.

Ein häufiges Problem im Design

Wenn man im oder mit dem UX-Design arbeitet, mit Entwicklern und Designern in einem oder in mehreren Teams, ist man wahrscheinlich schon einmal auf folgendes Problem gestoßen:

Designer und Entwickler verbringen bemerkenswert viel Zeit mit der Suche nach den Standards für ein einfaches Element eines digitalen Produkts, wie z. B. eine Schaltfläche. Häufige Fragen sind:  

  • Welche Farbe hat die Schaltfläche genau?
  • Wie groß muss der Text sein, wenn die Schaltfläche auf einem Desktop-Bildschirm verwendet werden soll, und wie groß, wenn sie auf einem Tablet oder einem mobilen Gerät verwendet werden soll?
  • Wie groß sind die Abstände zwischen Text und Container?

Designer und Entwickler stellen sich diese Fragen bei der Erstellung ihrer digitalen Produkte und verschwenden Zeit mit der Suche nach dem Stil eines Elements oder einer Komponente. Natürlich suchen sie nach Standards. Das kann sich leicht häufen, wenn sie nach komplexeren Komponenten und Mustern suchen. Dies kann zu Frustrationen innerhalb des Teams, zu Unstimmigkeiten und zu Verzögerungen bei Design und Entwicklung führen. Das Ergebnis: ein digitales Produkt, das für den Benutzer frustrierend ist, ganz zu schweigen von den Kosten, die dem Unternehmen oder der Organisation, die das Produkt herstellt, durch diesen Zeitverlust entstehen. 

Was ist ein Design-System?

Oder anders ausgedrückt: Was ist KEIN Design-System? Es ist sicherlich keine Software; es ist keine Anwendung, die installiert werden kann, und es ist kein Projekt mit einem Anfang und einem Ende. Also, was ist es? 

Lassen Sie es uns als die Art und Weise beschreiben, wie Designer und Entwickler mit einer gemeinsamen Vision, klaren Prinzipien und starken Werten zusammenarbeiten. Die Arbeit mit einem Design-System bringt spürbare Vorteile für Unternehmen und Organisationen und damit für alle ihre Nutzer, seien es Kunden, Bürger oder Mitarbeiter. 

Es handelt sich um ein laufendes Projekt, das es Unternehmen und Organisationen ermöglicht, ihre digitalen Produkte innovativ zu gestalten und zu entwickeln. 

Ein Design-System umfasst eine Sammlung von standardisierten, wiederverwendbaren Komponenten und Mustern, die von einer klaren visuellen Sprache geleitet werden. Nennen wir diese visuelle Sprache einen Styleguide. Diese Komponenten und Muster können zusammengefügt werden, um eine beliebige Anzahl von Websites und Anwendungen zu erstellen. 

 Jedes Element, jede Komponente und jedes Muster wird einmal gestaltet und erstellt, der Code entspricht dem Design, und zusammen repräsentieren sie die Persönlichkeit der Produktmarke. Eine optimierte und konsistente Anwendung oder Website bringt klare Vorteile für die Benutzer, wie z. B. schnelles Lernen, höhere Produktivität und weniger Fehler während der Nutzung.

Schlüsselelemente eines Design-Systems

Schlüsselelemente eines Design-Systems
Schlüsselelemente eines Design-Systems – Quelle: The State of UX Report 2020

Einige andere relevante Themen in einem Design-System sind: 

  • Gestaltungsprinzipien 
  • Visuelle Sprache 
  • Standards und Spezifikationen 
  • Inhalt: Redaktion & Tonfall
  • Namenskonventionen & Dateistruktur 
  • Technologie-Stapel 
  • Werkzeugsatz, Assets & Vorlagen 
  • Zugänglichkeits-Standards & Konventionen 
  • Steuerung und Methodik

Ein Designer = eine Lösung

Während die Entwicklung bei der Erfindung von Möglichkeiten zur Wiederverwendung von Komponenten weit voraus ist, kämpft das Design mit der Skalierung der von ihm unterstützten Anwendungen – warum? Weil maßgeschneiderte Anwendungen in der Regel für jede spezifische Lösung entworfen werden. Designer sind sehr daran interessiert, Probleme zu lösen und neigen dazu, spezifische Lösungen zu entwickeln. Das ist eine gute Eigenschaft, verstehen Sie mich nicht falsch, ich bin selbst ein Designer.  

Problematisch wird es, wenn diese spezifischen Lösungen umfangreicher werden, für mehrere Produkte oder mehrere Teams gelten. Dann entstehen Skalierungsprobleme wie Inkonsistenzen, die den Design- und Entwicklungsprozess verlangsamen und im Laufe der Zeit schwer zu pflegen sind.

Wenn es in Ihrem Unternehmen mehr als einen Designer gibt, können Sie jetzt mit dem Aufbau eines Design-Systems beginnen. Auch wenn es nur einen Designer gibt, kann er/sie den Weg zum Aufbau eines Design-Systems einschlagen. Das bedeutet, dass Sie eine Design-System-Mentalität oder -Philosophie anwenden können, einen spezifischen Ansatz bei der Strukturierung Ihres Designs und der Organisation

Design-System-Philosophie

Eine Möglichkeit, die Struktur des Designs zu ändern und die Wiederverwendung von Komponenten zu ermöglichen, besteht darin, es skalierbar zu machen, indem man die atomare Design-Philosophie anwendet, auf der Design-Systeme basieren. 

Atomic Design verwendet eine praktische Analogie aus der Chemie:

Die Atom-Analogie würde das Design in seine einzelnen Elemente zerlegen, die noch funktionsfähig sind, z. B. eine Schaltfläche.  

Dann kann man diese Atome zu kleineren Gruppen kombinieren, die zusammen funktionieren, diese werden Moleküle genannt. Denken Sie an ein Eingabefeld. 

Organismen sind etwas komplexer und sie kombinieren Moleküle und/oder Atome; ein Beispiel könnte eine Kopfzeile sein. 

Dann gibt es noch Vorlagen und Seiten, die zwar außerhalb der Analogie liegen, aber dennoch von Atomic Design verwendet werden 

Atomarer Aufbau einfach illustriert nach Brad Frost: 

Illustration Atomic Design according to Brad Frost
Illustration atomic design – Quelle: http://atomicdesign.bradfrost.com/chapter-2/

Atomic Design ist hilfreich bei der Definition der Komponenten, aber es ist nur eine Möglichkeit, die Elemente eines Design-Systems zu beschreiben. Es ist nicht notwendig, dieselbe Terminologie und exakte Benennung für Elemente und Komponenten zu verwenden, aber es ist wichtig, dass man dasselbe Prinzip verwendet und versteht, wie es funktioniert. Sie können auch wiederverwendbare Bausteine oder eine andere Analogie wie Legosteine verwenden.

Zusammenfassung zu Design-Systemen

Wesentliche Vorteile und Werte der Verwendung von Design-Systemen bei der Erstellung digitaler Produkte sind: 

  • Wiederverwendung gut definierter Stile in Elementen, Komponenten und Mustern, die Skalierbarkeit und Konsistenz für digitale Produkte bieten 
  • Verbesserung der Konsistenz = Verbesserung der Qualität der Benutzeroberfläche = Verbesserung der Benutzerfreundlichkeit des digitalen Produkts 
  • Förderung einer gemeinsamen Vision innerhalb des Teams 
  • Den Design- und Entwicklungsprozess zielgerichteter und effizienter gestalten 
  • Festlegung und Dokumentation eines gemeinsamen Vokabulars, einer visuellen Sprache, um eine klare und erkennbare, leicht zu verwendende Anleitung zu bieten 
  • Zeitersparnis bei der Suche nach Komponenten und Spezifikationen zu deren Verwendung 
  • Die Benutzer erhalten ein gut gestaltetes und optimiertes digitales Produkt, das die Erlernbarkeit, die Markenwahrnehmung und die Fehlerreduzierung verbessert. 

 

Autor: Laura Chavarria

Keen Design ist eine reine UX Agentur und bietet seit 2003 maßgeschneiderte UX Lösungen auf großen Projekten, u.a. für das Redesign der Online-Steuererklärung in den Niederlanden. Wir bieten Unternehmen UX Services, mit denen Innovation ermöglicht, Digitalisierung vorangetrieben und User Journeys hochwertig erlebbar werden. Damit sind wir Vorreiter bei den spezialisierten UX Lösungen. Keen Design hat UX-Design-Spezialisierungen in verschiedenen Branchen entwickelt und dedizierte Geschäftseinheiten für den Finanzsektor, Software, den öffentlichen Sektor und das Gesundheitswesen eingerichtet. Weitere Informationen unter www.keen.design

Die Kommentarfunktion ist geschlossen.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More