Keen Design

Designsysteme: Wie man Design und Code wiederverwendbar, skalierbar und konsistent macht

Laura Chavarria

Geschrieben von

Laura Chavarria - Montag, 10.2.2020

5 Minuten Lesezeit

Designsysteme ermöglichen es Teams, bessere digitale Produkte schneller zu entwerfen und zu bauen.

 

Warum? Denn die Wiederverwendung wohldefinierter Stile, die auf Komponenten und Muster angewendet werden, sorgt für Skalierbarkeit und Konsistenz. Aber der Hauptwert eines Designsystems liegt in der Förderung enger Teamarbeit und in der Verbreitung der Werte und Prinzipien des Unternehmens im Team, was sich auch in klaren Vorteilen für den Benutzer widerspiegelt.

Ein häufiges Problem

Wenn Sie in oder mit UX-Design, mit Entwicklern und Designern innerhalb eines oder mehrerer Teams arbeiten, sind Sie wahrscheinlich auf folgendes Problem gestoßen:

Designer und Entwickler verbringen bemerkenswert viel Zeit mit der Suche nach den Standards eines einfachen Elements eines digitalen Produkts, zum Beispiel einer Schaltfläche. Häufige Fragen sind: 

  • Was ist die genaue Farbe der Schaltfläche?
  • Welche Textgröße wird für die Verwendung der Schaltfläche auf einem Desktop-Bildschirm verwendet und wie groß ist sie für die Verwendung auf einem Tablett oder einem mobilen Gerät?
  • Wie sind die Abmessungen der Zwischenräume zwischen Text und Container?

Designer und Entwickler stellen sich diese Fragen bei der Erstellung ihrer digitalen Produkte gegenseitig und verschwenden dabei Zeit damit, den Stil eines Elements oder einer Komponente zu finden. Sie suchen sicherlich nach Standards. Diese können sich leicht anhäufen, wenn sie nach komplexeren Komponenten und Mustern suchen. Dies kann zu Frustrationen innerhalb des Teams, Inkonsistenzen und Verzögerungen bei Design und Entwicklung führen. Das Ergebnis: ein digitales Produkt, das beim Benutzer Frustrationen hervorruft, ganz zu schweigen von den Kosten dieser Zeitverschwendung für das Unternehmen oder die Organisation, die dieses Produkt herstellt.

Was ist ein Designsystem?

Oder anders ausgedrückt: Was ist NICHT ein Designsystem. 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?

Beschreiben wir es als die Art und Weise, wie Designer und Entwickler mit einer gemeinsamen Vision, klaren Prinzipien und starken Werten zusammenarbeiten. Die Arbeit mit einem Designsystem bringt spürbare Vorteile für Unternehmen und Organisationen und damit für alle ihre Benutzer, seien es Kunden, Bürger oder Mitarbeiter.

Es handelt sich um ein laufendes oder ein Live-Projekt, das Unternehmen und Organisationen die Möglichkeit gibt, auf dieser Art und Weise ihre digitalen Produkte zu entwerfen und herzustellen, innovativ zu sein.

Ein Designsystem umfasst eine Sammlung von standardisierten wiederverwendbaren Komponenten und Mustern, die von einer klaren visuellen Sprache geleitet werden. Nennen wir diese Bildsprache einen Styleguide. Zusammen können diese Komponenten und Muster zu einer beliebigen Anzahl von Websites und Anwendungen zusammengestellt werden.

Jedes Element, jede Komponente und jedes Muster wird einmal entworfen und gebaut, der Code passt zum Design, und zusammen stellen sie die Persönlichkeit der Produktmarke dar. Eine optimierte und konsistente Anwendung oder Website bringt den Benutzern klare Vorteile wie schnelles Lernen, erhöhte Produktivität und weniger Fehler bei der Nutzung.

Dies sind die Schlüsselelemente eines Designsystems:

Screenshot 2020-01-31 at 09.56.24-1

 

Einige andere relevante Themen in einem Designsystem sind:

  • Gestaltungsprinzipien
  • Visuelle Sprache
  • Normen und Spezifikationen
  • Inhalt: Leitartikel & Tonfall
  • Namenskonventionen & Dateistruktur
  • Technologie-Stapel
  • Werkzeugsatz, Anlagen und Vorlagen
  • Bedienungshilfen und -konventionen
  • Führung und Methodik

Ein Designer = eine Lösung

Während die Entwicklung weit vorangeschritten ist, um Wege zur Wiederverwendung von Komponenten zu erfinden, kämpft das Design bei den unterstützten Anwendungen um die Skalierung. Warum? Denn maßgeschneiderte Anwendungen werden in der Regel für jede spezifische Lösung konzipiert. Designer sind sehr interessiert an der Lösung von Problemen und neigen dazu, spezifische Lösungen zu finden, was eine gute Qualität ist. Verstehen Sie mich nicht falsch, ich bin selbst eine Designerin.

Das Problem entsteht, wenn diese spezifischen Lösungen breiter, größer oder für mehrere Produkte oder mehrere Teams werden. Dann beginnen sie Skalierbarkeitsprobleme zu haben wie Inkonsistenz, die den Design- und Entwicklungsprozess langsam und schwierig zu pflegen machen.

Wenn es in Ihrem Unternehmen mehr als einen Designer gibt, können Sie jetzt mit dem Aufbau eines Designsystems beginnen. Selbst wenn es nur einen einzigen Designer gibt, kann er/sie immer noch damit beginnen, den Weg zum Aufbau eines Designsystems abzustecken. Dies bedeutet, dass Sie ein Design-System-Mindset oder eine Philosophie, einen spezifischen Ansatz bei der Strukturierung Ihres Designs und der Organisation verwenden können.

Philosophie der Designsysteme

Eine Möglichkeit, die Struktur des Designs zu ändern, die die Wiederverwendung von Komponenten ermöglicht, besteht darin, es skalierbar zu machen, indem die atomare Designphilosophie, auf der die Designsysteme basieren, angewendet wird.

Atomic Design verwendet eine praktische Analogie der Chemie:

  • Die Atomanalogie würde die Entwürfe in ihr individuellstes Element zerlegen, das noch funktionsfähig ist, zum Beispiel eine Schaltfläche.
  • Dann kann man diese Atome zu kleineren, miteinander funktionierenden Gruppen zusammenfügen, die man Moleküle nennt. Stellen Sie sich ein Eingabefeld vor.
  • Organismen sind etwas komplexer und verbinden Moleküle und/oder Atome; ein Beispiel könnte ein Header sein.
  • Dann haben Sie auch Vorlagen und Seiten, die außerhalb der Analogie liegen, aber immer noch von Atomic Design verwendet werden.

Abbildung Atomic Design (http://atomicdesign.bradfrost.com/chapter-2/)

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

Zusammenfassung

Bedeutende Vorteile und Werte der Verwendung von Designsystemen bei der Erstellung digitaler Produkte sind:

  • Wiederverwendung wohldefinierter Stile in Elementen, Komponenten und Mustern, die die Skalierbarkeit und die Konsistenz für digitale Produkte beinhalten
  • Verbesserung der Konsistenz = Verbesserung der Qualität der Benutzerschnittstelle = Verbesserung der Benutzerfreundlichkeit des digitalen Produkts
  • Förderung einer gemeinsamen Vision innerhalb des Teams
  • Den Design- und Entwicklungsprozess gezielter und effizienter gestalten
  • Einrichtung und Dokumentation eines gemeinsamen Vokabulars, einer visuellen Sprache, um einen klaren und erkennbaren, leicht zu verwendenden Leitfaden zu erstellen
  • Zeitersparnis bei der Suche nach Komponenten und Spezifikationen für deren Verwendung
  • Benutzer erhalten ein gut gestaltetes und optimiertes digitales Produkt, das die Lernfähigkeit, die Markenwahrnehmung und die Fehlerreduzierung verbessert.

In unseren nächsten Artikeln werden wir uns die Schlüsselelemente, Themen und andere Vorteile von Designsystemen genauer ansehen.

Für weitere Informationen über Designsysteme kontaktieren Sie uns bitte!

Laura Chavarria - Keen Design