Bild vom User Interface des Bosch „My Workspace“.

Festool
Atomic Design System

21TORR entwickelt für Festool ein intelligentes Design System auf Basis des Atomic Designs

Design for the future and beyond

Historisch gewachsene Content-Strukturen, zahlreiche Design-Facelifts und unkontrollierbare Inselprojekte führen zum all­gegen­wärtigen „Wildwuchs“ und zu starken Inkonsistenzen bei vielen internationalen Online-Auftritten. Ausgerechnet dort, wo durch­gängige UX unabdingbar ist.

Die Abhilfe? Ein zeitgemäßes Design System schafft einen konsistenten Rahmen für Projektbeteiligte in allen Teams – Marketers, Designer und Entwickler. Ein solches System steigert die Produktqualität und ist kosten- und ressourcenschonend. Auch für unseren Kunden Festool haben wir ein intelligentes Design System entwickelt – auf Basis des sogenannten Atomic Design.

Was ist Atomic Design?

Atomic Design ist ein Webdesign-Ansatz, in dem ein Design-Konzept von seinen einzelnen Bestandteilen her entwickelt wird. Aus kleinsten Komponenten kombiniert der Designer größere, funktionale Module. Die kleinsten Elemente des Design Systems sind sogenannte Atome, zum Beispiel die Farbpalette, Typographie-Elemente oder Icons. Daraus setzt man Moleküle zusammen, also kleine funktionale Einheiten – Formularfelder oder Buttons. Moleküle wiederum werden zu Organismen wie Content-Modulen kombiniert.

Flexible. Scalable. Ready for endless possibilities!

Klares Ziel, klare Lösung: Um die globalen Website-Strukturen bei Festool zu harmonisieren und jedem Land dennoch ein Höchst­maß an Individualiät zu er­mög­lichen, haben wir auf Basis des Pattern Labs ein skalierbares Design System nach dem Atomic Design Prinzip geschaffen, das flexibel und nachhaltig ist – und bleibt.

Beim Atomic Design werden aus kleinsten Komponenten funktionale Module gebaut

A living styleguide

Das Atomic Design System dient nicht nur der Vereinheitlichung aller Festool Websites. Es ist ein Living Styleguide, der auf weitere digitale Projekte angewandt werden kann – und dabei kontinuierlich mitwächst. In Zukunft können neue Elemente schnell und einfach aus dem Pool der vorhandenen Komponenten erstellt werden. Konsistenz? Zu jedem Zeitpunkt und über alle Teams hinweg gewährleistet.

Ein Design System auf Basis des Atomic Designs ist modular aufgebaut
Das Festool Atomic Design System in Aktion
Isabell Höffner, Chief Design Officer bei 21TORR

Der Living Styleguide ist die Basis einer nachhaltigen, positiven User Experience und erspart zeitraubende Fleißarbeiten bei der Erstellung von UI-Komponenten

Isabell Höffner
Chief Design Officer

We empower business

Der Festool Website Relaunch hat gezeigt: Die Etablierung eines intelligenten Design Systems auf Basis von Atomic Design wirkt nachhaltig. So konnten wir den Aufwand für die Neugestaltung des Festool Händlerportals extrem schlank­halten. Das spart Zeit und Kosten.

100%

konsistente Design- und Code-Elemente

75%

weniger Aufwand bei Folge­projekten