Komplexität reduzieren dank Web Components und Storybook

Die Anforderungen an eine moderne Website sind hoch. Sie soll barrierefrei und mit Screenreadern nutzbar sein, auf hunderten verschiedenen Bildschirmgrössen in fünf Browsern zuverlässig funktionieren und Inhalte in mehreren Sprachen anbieten.

Oft ist die Arbeit auf mehrere Teams verteilt. Stellen Sie sich vor, drei Teams entwickeln parallel an derselben Website und jedes baut eigene Buttons, Formulare und Navigationselemente. Schon kleine Abweichungen bei Farben, Abständen oder Verhalten fallen Ihren Besucherinnen und Besuchern auf.

Gleichzeitig steigt der Aufwand, weil dieselbe Komponente mehrfach entwickelt, getestet und gepflegt wird. Ein gemeinsames Design-System löst genau dieses Problem: Ihre Website wirkt wie aus einem Guss, und die Effizienz leidet nicht darunter. 

Designtokens sind die zentralen Gestaltungsvariablen Ihrer Website. Farben, Schriften und Abstände werden an einem Ort definiert, und eine Änderung wirkt sich automatisch auf alle Komponenten aus. Für ein neues Theme definieren Sie lediglich einen neuen Satz Tokens, die Komponenten bleiben unverändert. 

Die Komponenten selbst setzen wir als Web Components um. Dank der Stencil Library sind sie unabhängig von Framework und Technologie einsetzbar und lassen sich nahtlos in bestehende Web-Applikationen oder CMS einbinden. Ob Magnolia, eine andere Plattform oder eine eigenständige Applikation: Die Komponenten funktionieren überall gleich. 

Damit verwenden alle Teams dieselben Komponenten, statt sie mehrfach zu entwickeln. Jedes Team konzentriert sich auf seine Kernkompetenzen, währen das UI zentral entwikelt wird. 

Storybook ist eine interaktive Umgebung, in der alle Komponenten mit ihren Varianten und Zuständen sichtbar sind. Dort können Sie Komponenten und ihr Verhalten prüfen, ohne Magnolia-Know-how und ohne vorher Inhalte erfassen zu müssen.

So können Sie schnelles Feedback zur Designumsetzung geben, lange bevor eine Komponente live geht. Content und Design sind dabei sauber getrennt: Das Design wird in Storybook abgenommen, danach bauen wir sie in Ihrem CMS ein.

Eine einzige Story zeigt eine Komponente in allen Themes, und auch unterschiedliche Bildschirmgrössen lassen sich direkt simulieren. Gleichzeitig dient Storybook als Dokumentation, mit der andere Teams die Komponenten verstehen und in ihre eigenen Projekte integrieren können.

Ihr Vorteil: Sie erkennen Abweichungen früh, sparen Abstimmungsaufwand und verfügen über eine Dokumentation, die immer aktuell ist. 

Mit Designtokens, Web Components und Storybook entsteht ein gemeinsames Fundament für Ihre Website. Ihre Teams arbeiten mit denselben Bausteinen, Änderungen erfolgen zentral, und das Ergebnis wirkt wie aus einem Guss. Gerade bei mehreren Brands, Sprachen und Teams zahlt sich dieser Ansatz schnell aus.