Designsysteme in Drupal

Wie ein Designsystem die Effizienz und Konsistenz Ihres Drupal-Projekts fördert

Was ist ein Designsystem?

Ein Designsystem ist die zusammenhängende Sammlung von Designelementen und Gestaltungsprinzipien, die dazu dienen, digitale Produkte konsistent und ansprechend zu gestalten.

Es fungiert als zentrale Referenz und Ressource für Designer, Entwickler und alle Teammitglieder, die an der Entwicklung eines Produkts oder einer Marke beteiligt sind.

Konkret heißt das: Ein Designsystem umfasst eine Vielzahl von Komponenten wie Farbpaletten, Schriftarten, Icons, UI-Elemente, Layoutstrukturen, Interaktionsmuster und Richtlinien zur Barrierefreiheit.

Warum setzen wir auf Designsysteme?

Neben Drupal-Entwicklung bieten wir Konzeption und Design für Ihre Webprojekte an.

Unser Team aus UX/UI-Designern, Developern und Projektmanagern arbeitet dabei eng mit den Stakeholdern auf Ihrer Seite zusammen.

Um eine reibungslose Kommunikation und Zusammenarbeit zwischen allen Projektbeteiligten zu gewährleisten, setzen wir auf Designsysteme.

Designsysteme bieten eine einheitliche „Sprache“, klare Richtlinien und leicht zugängliche Ressourcen.

Durch die Verwendung von Designsystemen werden Missverständnisse vermieden, Iterationen erleichtert und ein tieferes Verständnis für Designentscheidungen gefördert.

In den folgenden Abschnitten werden wir ausführlich erläutern, wie Designsysteme in Ihre Drupal-Projekte integriert werden können und welchen Mehrwert sie bieten.

Ist Atomic Design ein Designsystem?

Immer wieder wird Atomic Design zu Unrecht mit Designsystemen gleichgesetzt.

Atomic Design ist eine Methode zur strukturierten Gestaltung von Benutzeroberflächen, indem sie in kleinere, wiederverwendbare Bausteine wie Atome, Moleküle, Organismen, Templates und Seiten unterteilt wird.

Dadurch ist Atomic Design ein Teil innerhalb eines umfassenderen Designsystems, das zusätzlich zu den Atomic-Design-Prinzipien auch Richtlinien, Ressourcen und Best Practices für das Design und die Entwicklung von digitalen Produkten umfasst.

Was beinhaltet ein Designsystem?

Ein durchdachtes Designsystem ist für eine konsistente Benutzererfahrung entscheidend. Doch was genau steckt hinter einem solchen System?

Ein Designsystem umfasst eine Vielzahl von Elementen, von grundlegenden Designprinzipien über visuelle Richtlinien bis hin zu wiederverwendbaren Komponenten und Barrierefreiheitsstandards.

Designprinzipien 

Grundlegende Leitlinien und Werte, die die Gestaltung beeinflussen und sicherstellen, dass das Produkt die Unternehmenswerte und die Benutzererfahrung widerspiegelt

Visuelle Richtlinien 

Farbpaletten, Typografie, Icons und andere visuelle Elemente, die für die konsistente Darstellung des Produkts oder der Marke verwendet werden sollten

Komponenten 

Wiederverwendbare Bausteine wie Buttons, Formulare, Navigationsleisten, Karten usw., die das Design einheitlich halten und eine effiziente Entwicklung ermöglichen

Barrierefreiheit 

Richtlinien, um sicherzustellen, dass das Produkt für alle Benutzer zugänglich ist, unabhängig von ihren Fähigkeiten oder Technologieeinschränkungen

Dokumentation 

Eine umfassende Beschreibung aller oben genannten Elemente, die von Teammitgliedern als Nachschlagewerk verwendet wird

Tools

Moderne Werkzeuge wie Figma, Wingsuit (unsere eigene Komponentenbibliothek), Storybook und Drupal, die kollaboratives Arbeiten unterstützen

Welche Vorteile bietet ein Designsystem?

Ein Designsystem bietet Ihnen einheitliches, effizientes und skalierbares Design, verbessert die Benutzererfahrung und fördert die Zusammenarbeit im Teams.

Es stärkt die Markenidentität, unterstützt die Barrierefreiheit und ermöglicht eine einfache Wartung und Aktualisierung Ihres Projekts.

Konsistenz 

Ein Designsystem stellt sicher, dass alle Aspekte eines Produkts oder einer Marke konsistent gestaltet sind. Dadurch entsteht ein einheitliches Erscheinungsbild und eine nahtlose Benutzererfahrung über verschiedene Plattformen, Geräte und Medien hinweg. 

Effizienz 

Durch die Verwendung von wiederverwendbaren Komponenten und vorgefertigten Designelementen können Designer und Entwickler Zeit sparen. 

Skalierbarkeit 

Neue Funktionen oder Produktelemente können leicht hinzugefügt werden, ohne das gesamte System neu zu überdenken. 

Benutzererfahrung

Durch die Fokussierung auf konsistente und bewährte Designprinzipien verbessert ein Designsystem die Benutzerfreundlichkeit und die Zufriedenheit der Benutzer. 

Dank des einheitlichen Auftretens wird das Vertrauen der Nutzer in die Marke gestärkt.

Kollaboration 

Da alle Teammitglieder auf dieselben Ressourcen und Richtlinien zugreifen können, werden Missverständnisse reduziert. 

Markenidentität 

Ein Designsystem gewährleistet eine konsistente Darstellung der Markenidentität über alle Medien hinweg.

Barrierefreiheit 

Ein gut gestaltetes Designsystem berücksichtigt auch die Bedürfnisse von Menschen mit Behinderungen und fördert die Zugänglichkeit für alle Benutzer. 

Wartung und Aktualisierung 

Durch die Zentralisierung von Gestaltungsrichtlinien und -elementen ist es einfacher, das Designsystem zu pflegen und bei Bedarf Aktualisierungen durchzuführen.

Wie arbeiten Designsysteme und Drupal zusammen?

Von der Integration von Themes bis hin zur direkten Einbindung von Komponenten (Themeless Integration) bieten sich verschiedene Ansätze, um Designsystem und Drupal zu verbinden.

Drupal wird komponentenbasiert

Ab Version 10.1 wird Drupal komponentenbasiert.

Das Core Modul Single Directory Components (SDC) ermöglicht die Implementierung von Komponenten in Drupal. Alle zur Ausgabe einer Komponente erforderlichen Dateien sind dabei in einem Server-Verzeichnis zusammengefasst.

Auf diese Weise können Entwickler und Redakteure alle Vorteile des Designsystems nutzen, während sie Inhalte erstellen und bearbeiten. 