SEW-EURODRIVE Website-Relaunch und Designsystem
Ausgangssituation
Mit rund 21.000 Mitarbeitenden in 54 Ländern und einem Umsatz von über 4,2 Mrd. Euro (2022) zählt SEW-EURODRIVE zu den weltweit führenden Herstellern von Antriebsautomatisierung. Das Unternehmen entwickelt und produziert Getriebe, Getriebemotoren, Industriegetriebe, Umrichter- und Steuerungstechnik, Software und Systeme zur kontaktlosen Energieübertragung.
SEW-EURODRIVE benötigte für seine Unternehmens- und Produktwebsites sowie für zahlreiche komplexe Maschinenanwendungen 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.
Lösung
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.
Vier Themes
Die aufgrund der unterschiedlichen 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 auch ist, in der Praxis zeigten sich 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.
Abstände und Grid
Große Komponenten im Designsystem wie 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
soll sich aber 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 und zum anderen den Abstand zur vorherigen Komponente ein- bzw. ausschalten.
Ein System für alles
Unterschiedliche Anforderungen hätten leicht zu einer Dopplung der Komponenten im Designsystem von SEW-EURODRIVE mit entsprechend hohem Aufwand und redundantem Code führen können- 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 den externen Designern.
Unserem Ziel, Designvorschläge näher zusammenzubringen, näherten wir uns so Schritt für Schritt.
Technologien
Frontend: HTML, CSS, Angular Angeschlossenes CMS: FirstSpirit Frameworks/Tools: Storybook, Stencil
Erfolg
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. 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.
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.
Kommen Sie einfach auf uns zu! Wir freuen uns, mit Ihnen zu sprechen.
