Mit mehr als 20 000 Mitarbeitern in 52 Ländern und einem Umsatz von 3,6 Mrd. Euro (2021) zählt SEW-EURODRIVE zu den weltweit führenden Herstellern von Antriebstechnik und Automatisierung. Die SEW-Spezialisten entwickeln und produzieren Getriebe, Getriebemotoren, Industriegetriebe, Umrichtertechnik und Steuerungstechnik, Software und Systeme zur kontaktlosen Energieübertragung – in 17 Fertigungswerken und 88 Drive Technology Centern. Das inhabergeführte deutsche Familienunternehmen hat seinen Hauptsitz in Bruchsal.
Für seine Webseiten zu Unternehmen und Produkten sowie für zahlreiche komplexe Maschinenanwendungen brauchte SEW-EURODRIVE ein System, mit dem sich das Interface-Design weltweit konsistent halten und Mehrfachaufwände vermeiden lassen. Darüber hinaus sollten die Komponenten des Designsystems auf unterschiedlichen Hintergründen funktionieren. Hierfür brauchte es also mehrere Themes. Zugreifen auf das Designsystem von SEW-EURODRIVE sollten das Website-Redaktionssystem (CMS) sowie zahlreiche Frontend-Entwickler, die Anwendungen für das Unternehmen mit Angular programmieren.
Der Aufbau eines Designsystems stellt Software-Entwickler vor spannende Herausforderungen, die fundierte Kenntnisse auf zahlreichen Gebieten erfordern:
- UX-Design
- CMS-Integration
- Frontend-Framework-Entwicklung (Angular)
- HTML und CSS
Technisch entwickelte mediaman das Designsystem für SEW-EURODRIVE mit Webkomponenten auf Basis von Stencil und Storybook.
Die wegen unterschiedlicher Hintergründe erforderlichen vier Themes realisierten wir mit CSS-Variablen. Hier setzten wir für die Vorgaben der Gestalter sogenannte Design Tokens ein – im wesentlichen für Farben und Schriften. Je nachdem, welches Theme verwendet werden soll, passen wir per CSS-Selektor nur die Werte der Farbvariablen an. Sprechende Bezeichnungen für die rund drei Dutzend Design-Tokens in diesem Projekt erleichtern die Kommunikation zwischen Designer und Entwickler. So logisch der von uns gewählte Ansatz ist, zeigten sich in der Praxis doch auch Fallstricke: Zum einen kann ein Design-Token nicht immer so einfach und eindeutig benannt werden wie z.B. im Fall einer Headline. Zum anderen bietet nicht jede Design-Software die Option, Stilvorgaben in Form eines Design-Tokens anzulegen. Trotz dieser Herausforderungen erwies sich unser Ansatz im Projektverlauf als sehr hilfreich: Als die Farben im laufenden Projekt noch einmal deutlich geändert wurden, mussten wir nur einige Design Tokens anpassen.
Große Komponenten im Designsystem, z.B. Slider, Bild-Text-Module oder Akkordeons, orientieren sich grundsätzlich an einem Gestaltungsraster. So weit, so klar. Komplexer wird es für Entwickler durch den Umstand, dass nicht alle Komponenten sich an dieses Grid halten. Typischer Fall: Die Komponente selbst soll sich über die gesamte Breite des Viewports erstrecken, ihr Inhalt aber sich am Raster ausrichten. Oder: Die UX-Designer wünschen sich eine Komponente, die in andere Komponenten verschachtelt werden kann. Dazu kommen die Erwartungen der CMS-Integratoren: In ihren Templates wollen sie Komponenten aufeinander „stapeln“, dabei sollen sich die Abstände zwischen den Komponenten automatisch ergeben. An anderer Stelle dagegen darf eine Komponente keinen Abstand mit sich bringen, weil sie z.B. in einem Sonderfall verwendet wird oder verschachtelt ist. Um all diesen Fällen im Designsystem gerecht zu werden, haben wir bei den betroffenen Komponenten jeweils ein Property ergänzt, mit dem wir zum einen das Grid, zum anderen den Abstand zur vorherigen Komponente ein- bzw. ausschalten.
Unterschiedliche Anforderungen hätten leicht zu einer Dopplung der Komponenten im Designsystem von SEW-EURODRIVE führen können, mit entsprechend hohem Aufwand und redundantem Code – eine Folge, mit der sich kein Software-Entwickler zufriedengeben kann. Wir überlegten daher, Varianten von Komponenten zusammenzufassen und Abweichungen rein über CSS zu lösen. Dieser erfolgreich praktizierte Ansatz erforderte intensive Kommunikation zwischen den Entwicklern/Designern von mediaman und externen Designern. Unserem Ziel, Designvorschläge näher zusammenzubringen, näherten wir uns so Schritt für Schritt. Enormer Vorteil dieses Vorgehen: Es machte uns sowohl in der Entwicklung der Komponenten als auch auch deren Wartung deutlich effizienter. Nichtsdestotrotz galt es, bei diesem Projekt einiges im Hinterkopf zu behalten. So hat eine Komponente im Designsystem fünf Farbvarianten und zwei grundsätzliche Varianten, die weitere Abweichungen haben können.
Frontend: HTML, CSS, Angular
Angeschlossenes CMS: FirstSpirit
Frameworks/Tools: Storybook, Stencil
Die Zusammenarbeit von mediaman mit SEW-EURODRIVE startete annähernd zeitgleich mit unseren Arbeiten an Website-Relaunch und Designsystem. Parallel ließ der Kunde weitere Komponenten für das Designsystem durch interne Nutzer entwickeln, für spezielle Anwendungsfälle. Dies führte naturgemäß anfangs zu Komponenten mit unterschiedlichen technischen Ansätzen. Beispiel: Was packt der Entwickler in den Slot einer Webkomponente? Was übergibt er als Attribut?
Vor diesem Hintergrund begannen unsere Software-Entwickler so früh wie möglich damit, Prototypen fürs Designsystem auszuliefern. Das heißt: Sie programmierten sehr schnell die wesentlichen Funktionen einer Komponente, ohne in dieser Phase zu sehr auf Design und eventuelle Animationen zu achten. Auf diese Weise konnten die Nutzer des Designsystems schnell mit den ausgelieferten Komponenten weiterarbeiten. Bei diesem Prozess kommt der große Vorteil von Webkomponenten zum Tragen: Ihr Design und sogar ihre Funktionen lassen sich im Nachhinein ändern, ohne dass eine Anpassung in der Integration erforderlich ist.
Genauso schnell wie wir sie ausliefern, bekommen wir Feedback zu unseren Komponenten. Und das ist gut so, denn viele Probleme in der Software-Entwicklung tauchen erst in der Praxis auf. Auch basiert die Darstellung der Webkomponenten in Storybook auf statischen HTML, und gelegentlich gibt es Überraschungen, wenn Komponenten asynchron befüllt oder Angular-Direktiven auf sie angewendet werden. Zum Erfolg des Gesamtprojekts wesentlich beigetragen hat die agil organisierte, gute Zusammenarbeit zwischen mediaman und SEW-EURODRIVE. Alle Beteiligten waren und sind immer in Bewegung, um die beste Lösung zu finden. Es ist eine Haltung, die den Marktführer für Antriebstechnik und Automatisierung in seiner über 90-jährigen Geschichte geprägt hat.