Ein systematischer Designansatz verkürzt die Time-to-Market und spart wertvolle Entwicklungskosten bei laufendem Betrieb. Wir berichten aus unserer Praxiserfahrung warum dies so ist, welcher Logik ein Designsystem folgen sollte und wie man es bestmöglich in die Websiteentwicklung integriert.
Von Markus Remscheid
Von einem grafischen Standpunkt aus betrachtet sind E-Commerce-Shops komplexe Konstrukte. Die meisten Shops setzten sich aus vielen unterschiedlichen Seitentypen zusammen, wie z.B. Start-, Übersichts- und Produktdetailseite.
Ist ein Online-Shop zudem responsiv optimiert, d.h. ist er für alle Bildschirmgrößen angepasst, existiert jeder Seitentyp in drei bis vier unterschiedlichen Ausprägungen.
Rechnet man die Anzahl der Seiten hoch, kommen schnell hunderte, wenn nicht gar tausende verschiedener Templates zusammen.
All diese Seitentemplates mit ihren zahlreichen UI-Elementen, wie Buttons, Links, Slidern, Textblöcken, Trust Elementen, Teasern, individuell zu designen, erfordert einen hohen Entwicklungs- und Abstimmungsaufwand.
Auch ist eine individuelle Gestaltungsmethodik sehr anfällig für „Wildwuchs“. Besonders dann, wenn mehrere Teams an einem Projekt arbeiten. Die Frontend-Teams laufen in Gefahr immer wieder neue Lösungen für die gleichen User-Szenarien zu erfinden. Ein konsistentes User Interface über den gesamten Shop hinweg aufrecht zu erhalten, wird dann zur echten Herausforderung.
Es braucht also effizientere und systematischere Methoden, um nutzerfreundliche Online-Shops zu realisieren.
Hier kommen Designsysteme ins Spiel, die übergreifende Designstandards etablieren. Sie legen einmalig fest, wie UI-Elemente in einem Online-Shop auszusehen haben und wie sie sich im Seitenkontext verhalten.
Somit werden Templates nicht mehr als eigenständige Seiten betrachtet, die der individuellen Gestaltung bedürfen. Vielmehr identifiziert man wiederkehrende Elemente und Designmuster (Patterns) und gestaltet diese so, das sie möglichst modular in unterschiedlichen Seitenkontexten verwendet werden können. Erst im letzten Schritt setzt man die einzelnen Seitentemplates aus den gestalteten Patterns zusammen.
Ein Designsystem kann man sich als Weiterentwicklung eines Styleguides vorstellen. Styleguides beschreiben vor allem die markengerechte Verwendung von Logos, Farben, Typografie, Icons etc. Ein Designsystem ist mehr als das und legt Standards fest, wie wiederkehrende Interface-Elemente aussehen und wie sie in unterschiedlichen Kombinationen verwendet werden.
Effiziente Designsysteme basieren in der Regel auf einer Gestaltungsmethode, die unter dem Begriff des Atomic Design bekannt wurde. Im Jahr 2013 von Brad Frost veröffentlicht, bedeutete dieser bis dahin neue Ansatz eine Kehrtwende für die Konzeption komplexer Webseiten.
Im klassischen Grafikdesign-Prozess geht der Gestalter vom Großen zum Kleinen vor. Vom Groblayout arbeitet sich der Designer in mehreren iterativen Schritten bis zum finalen Entwurf vor.
Die Atomic Design-Methode funktioniert dagegen vom Kleinen zum Großen. Atomic Design fasst Webseiten als verschachtelte Systeme auf, die beginnend von den kleinsten Gestaltungseinheiten, wie Schriften und Farben, zu nächstgrößeren Designelementen zusammengesetzt werden. Dies kann z.B. eine Formularzeile sein, die Teil eines Anmelde-Formulars ist. Und diese Komponente ist wiederum Teil einer Anmelden-Seite zum Mein Konto-Bereich, die weitere Komponenten, wie Header und Footer enthält.
Brad Frost unterteilt Webinterfaces in fünf verschachtelte Ebenen: Atome, Moleküle, Organismen, Templates und Seiten.
Moderne Webseiten funktionieren nach dem Matroschka-Puppen-Prinzip und sind in sich verschachtelte Systeme.
Die Atomic Design-Methodik hat zu einem Umdenken in der Interface-Gestaltung beigetragen. In der Praxis allerdings kann die Methode mit seinen fünf verschachtelten Ebenen schnell zu komplexen und schwerfälligen Ergebnissen führen.
Sehr gute Erfahrungen haben wir stattdessen mit einem dreistufigen System gemacht, bestehend aus Designtokens, Komponenten und Seiten.
Designtokens bilden die kleinste Gestaltungseinheit. Sie legen grundlegende Designstandards wie z.B. Raster, Farben, Schriftarten und ein Set an Abständen fest.
Die nächsthöhere Ebene stellen Komponenten dar, die auf den Designtokens basieren. Komponenten sind z.B. Textstyles, Buttons, Links, Tabellen, Textfelder, Icons, etc.
Aus den Komponenten setzen wir vollständige Seiten zusammen. Durch grundlegende Änderungen an den Designtokens, können wir dem gesamten User Interface eine neue Richtung geben. Farbänderungen z.B. lassen sich so sehr schnell realisieren.
Nach unserer Auffassung stellt ein Designsystem ein theoretisches Model dar, das definiert wie ein Interface auszusehen hat. Ein Designsystem kann man sich als einen Bauplan vorstellen, der festlegt, wie sich eine Webseite aus kleineren Bausteinen zusammensetzt.
In der Praxis einsatzfähig wird ein Designsystem, wenn der Bauplan über eine digitale Bibliothek allen Stakeholdern zugänglich gemacht wird. Die gesamten Disziplinen finden im Idealfall so eine zentrale Anlaufstelle vor, unter der sie sich die Informationen holen können, die für ihre Arbeit wichtig sind. Product Owner erhalten einen Überblick welche Komponenten existieren und wie diese verwendet werden. Entwickler finden Codekonventionen und Code Snippets vor.
Solch eine Bibliothek kann in unterschiedlichen Formen aufgesetzt werden.
Die Pattern Library ist eine Sammlung wiederverwendbarer UI-Elemente, wie Buttons, Labels, Headings, Formulare, Bildunterschriften, usw. Damit die Bausteine miteinander kombiniert werden können und sich automatisch an unterschiedliche Bildschirmgrößen anpassen, sollten sie Abstands- und Verhaltenslogiken mitbringen.
Der Idealfall tritt ein, wenn eine Pattern Library, direkt an den produktiven Code angeschlossen ist. Die enthaltenen Patterns und Komponenten sind so zwangsläufig immer auf dem aktuellen Stand. So wird die Pattern Library zur „Quelle der Wahrheit“. Ein solches Setup stellt aktuell die effizienteste Möglichkeit dar, eine nutzerzentrierte User Experience bereitzustellen und kundengerecht weiterzuentwickeln und zu optimieren.
Eine Pattern Library ohne Verbindung zum produktiven Code ist die zweitbeste Möglichkeit ein Designsystem bereitzustellen. Diese Variante läuft allerdings in Gefahr nicht konsequent aktualisiert zu werden und somit an Relevanz und Beachtung zu verlieren.
Die statische Library ist die Lösung für kleinere Websites, bei denen der Aufwand für das Aufsetzen einer Pattern Library nicht im Verhältnis zum Nutzen steht. Unabhängig von der Größe eines Online-Shops, profitiert jedes User Interface von einem Designsystem. Kleinere digitale Produktentwicklungen können sich mit statischen UI-Bibliotheken behelfen, die mit Sketch, Photoshop oder anderen Tools angelegt wurden.
Vier inspirierende Pattern Libraries, die öffentlich zugänglich sind, haben wir zusammengestellt:
„Material Design“, das Design System von Google
https://material.io
Die Pattern Library von IBM
https://www.carbondesignsystem.com
Das Design System von Salesforce
https://lightningdesignsystem.com
Die Pattern Library von Shopify
https://polaris.shopify.com
Durchdachte Designsysteme mit Pattern Libraries, die an den produktiven Code angeschlossen sind, stellen aktuell die effizienteste Methode dar, Shopinterfaces auszuspielen und weiterzuentwickeln. Ist das System einmal aufgesetzt, kann der Shop sehr schnell und kostensparend ausgebaut werden. Zudem führt der systematische Designansatz zu mehr Konsistenz und qualitativ besserem Code.
Unternehmen, die die Anfangsinvestion für ein Designsystem nicht stemmen wollen oder können, profitieren von einer statischen Pattern Library, die nach der Atomic Design-Methode oder einer Variante davon, konzipiert wurde.
Die durch die Produktivitätssteigerung gesparte Entwicklungszeit, läßt sich nun an anderer Stelle investieren. Z.B. um das Designsystem weiter an die Nutzerbedürfnisse anzupassen oder das Marken- und Produkterlebnis zu verbessern.
Sie haben eine Frage zum Thema Designsysteme oder möchten wissen wie wir bei einer Umsetzung unterstützen können? Ich freue mich von Ihnen zu hören: markus.remscheid@h2d2.de, Telefon: 030. 78 89 03-21
Markus Remscheid ist Gründer und Geschäftsführer von H2D2 und bringt mehr als 15 Jahre Erfahrung in der Gestaltung von Interface-Systemen für große und kleine E-Commerce-Sites mit.