Zum Seiteninhalt springen
19.08.2025

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.

Symbolbild fürs Festool Design System | by 21TORR

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.

Symbolbild für Chaos im Design | by 21TORRStifte, Papiere und Bastelmaterial beim "Work in Progress" | by 21TORRGrafik, die Atomic Design veranschaulicht | by 21TORR

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.

Mockups des Festool Design Systems in verschiedenen Viewports | by 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
Isabell HöffnerChief 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

Isabell Höffner

Klingt gut? Lassen Sie uns reden.

Case Study: Atomic Design System für Festool | 21TORR | 21TORR