Typ: Branding
Kunde: MAHLE GmbH
Deliverables: Konzept, Aufbau des Komponentensystems, Frontend-Entwicklung, Dokumentation
Digital Design System von mahle.com
Für MAHLE haben wir ein digitales Designsystem gebaut, mit Grundelementen, Bausteinen und fertigen Seitentypen. Jede Komponente ist im Code umgesetzt und dokumentiert. Zusammen mit dem Konzern-CMS entstehen neue Websites damit schneller, und alle sehen nach MAHLE aus.
Drei Formen für einen Button
Wenn viele Teams an vielen Websites arbeiten, sieht nach ein paar Jahren jede ein bisschen anders aus. Buttons haben drei Formen, und Abstände folgen keiner erkennbaren Regel. Ab 2027 sollen alle MAHLE-Websites über das neue Konzern-CMS laufen. Dafür braucht es eine gemeinsame Gestaltung, auf die sich alle verlassen können.
Ein Design System in drei Ebenen
Das Design System hat drei Ebenen, die aufeinander aufbauen. Ganz unten stehen die Grundelemente, also Farben, Überschriften, Fließtext und Buttons. Sie legen fest, wie MAHLE digital aussieht, bevor es überhaupt eine Seite gibt.
Aus diesen Grundelementen entstehen wiederverwendbare Bausteine. Dazu gehören ein Hero für die Startseite, Feature Grids, Zeitleisten, Kennzahlen und Zitate. Dazu kommen Kontaktblöcke, Produktkacheln, Downloads sowie Navigation und Footer. Jeder Baustein ist nach seinem Zweck sortiert, damit ein Team schnell findet, was es braucht.
Ganz oben stehen fertige Seitentypen. Es gibt Vorlagen für Startseite, Produktübersichten, Geschäftsbereiche, Strategie und Unternehmensgeschichte. Dazu kommen Personenlisten und Themen wie Laden. Eine neue Seite fängt damit nicht mehr auf einem leeren Blatt an, und auch nicht mit denselben Grundsatzfragen wie die letzte.
Jede Komponente im Code dokumentiert
Jede Komponente ist direkt im Frontend umgesetzt und dokumentiert. Wer eine Seite baut, sieht, wie ein Baustein aussieht und wofür er gedacht ist. Auch wie er sich verhält, ist beschrieben. Design, Entwicklung und Redaktion schauen damit auf dasselbe System.
EINMAL GEBAUT, ÜBERALL IM EINSATZ.
Zusammen mit dem Headless CMS entstehen neue Websites bei MAHLE so schneller. Die Bausteine werden einmal gebaut und dann überall eingesetzt. Ändert sich etwas am Markenauftritt, passt man es an einer Stelle an, und es gilt für alle Seiten.
