Organisation
CERN
Button
Buttons für primäre Aktionen verwenden. Bevorzugt ein primärer Button pro Ansicht. Auf MUI Button abbilden – variant="contained" für primär, variant="outlined" für sekundär.
CERN · UI Design System
CERN UI Design System
Eine gemeinsame Design-Grundlage für CERNs interne Anwendungen – 30+ Komponenten, Design Tokens, Material-UI-Mapping und ein lebendiger Dokumentations-Hub.
01 / Überblick
Kein visueller Relaunch. Eine gemeinsame Produkt-Grundlage.
CERN betreibt hunderte interne Webanwendungen – Verwaltung, Betrieb, Forschungsunterstützung, Engineering-Workflows, organisatorische Dienste. Jede von einem anderen Team gebaut. Jede löst dieselben UI-Probleme unabhängig voneinander.
CERN UI schuf eine gemeinsame Designsprache für diese Produkte: eine Grundlage aus Design Tokens, 30+ wiederverwendbaren Komponenten, dokumentierten Mustern und Implementierungsleitfäden, die auf Material UI abgebildet sind. Gemeinsam mit mehreren CERN-Teams identifizierte ich wiederkehrende Interface-Probleme, übersetzte sie in wiederverwendbare Muster und half, das System in CERNs technischen Stack zu integrieren.
Das Ergebnis ist ein lebendiger Dokumentations-Hub – eine einzige gemeinsame Referenz, um zugängliche, konsistente und produktionsreife Interfaces über das gesamte CERN hinweg zu bauen.
CERN UI · Anwendungsoberfläche
02 / Herausforderung
Viele Teams. Viele Anwendungen. Kein gemeinsamer Interface-Standard.
CERNs interne Tools werden von verschiedenen Teams für verschiedene Kontexte gebaut. Mit der Zeit entstand so eine fragmentierte Produktlandschaft. Dieselben UI-Probleme wurden immer wieder gelöst, aber mit unterschiedlichen visuellen Stilen, Verhaltensweisen, Barrierefreiheit und Implementierungsentscheidungen.
Inkonsistenz
Ähnliche Komponenten verhielten sich in verschiedenen Anwendungen unterschiedlich. Nutzer mussten Muster für jedes Tool neu lernen.
Duplizierung
Teams bauten gängige UI-Muster von Grund auf neu. Buttons, Formulare, Filter, Navigation – immer wieder neu erstellt.
Lücken in der Barrierefreiheit
Barrierefreiheit war inkonsistent und wurde oft spät berücksichtigt. Ohne gemeinsamen Standard war die Qualität über die Produkte hinweg ungleichmäßig.
Keine gemeinsame Referenz
Designern und Entwicklern fehlte eine gemeinsame verlässliche Quelle. Jede Entscheidung wurde erneut von Grund auf getroffen.
Langsame Umsetzung
Ohne wiederverwendbare Muster verbrachten Teams Zeit mit Entscheidungen, die anderswo bereits unabhängig getroffen worden waren.
Design-Code-Lücke
Designentscheidungen wurden selten sauber von Figma in die Produktion übertragen. Bei jeder Übergabe wich die Interpretation ab.
03 / Meine Rolle
Lead Designer, gesamter Design-System-Lebenszyklus.
Audit, Grundlagen, Komponenten-Design, Dokumentation, Material-UI-Mapping, Stakeholder-Abstimmung und Rollout.
Die Design-Richtung von CERN UI von Anfang bis Ende leiten
Bestehende Anwendungen und wiederkehrende UI-Muster auditieren
Grundlagen definieren: Farbe, Typografie, Abstände, Radius, Elevation
Designentscheidungen für die Implementierung auf Material UI abbilden
30+ wiederverwendbare Komponenten in Figma gestalten und dokumentieren
Mit CERN-Teams zusammenarbeiten, um gegen reale Anwendungsfälle zu validieren
Den CERN Design System Hub veröffentlichen
Den Rollout unterstützen und ein Beitragsmodell etablieren
04 / Vorgehen
Ein wiederholbarer Prozess, vom Audit zum lebendigen System.
01
Bestehende Interfaces auditieren
CERN-Anwendungen analysiert, um wiederkehrende Komponenten, Muster, Inkonsistenzen und Reibungspunkte zu identifizieren – und zu zeigen, wo gemeinsame Muster sofort Mehrwert schaffen würden.
02
Grundlagen definieren
Die zentrale Token-Ebene geschaffen: Farbe, Typografie, Abstände, Radius, Elevation und Interaktionszustände. Praktische Regeln, die über Produkte hinweg skalieren – keine abstrakten Stilentscheidungen.
03
Design auf Material UI abbilden
Da MUI Teil von CERNs Stack war, bildete ich Grundlagen und Komponenten direkt darauf ab. Designentscheidungen gelangen von Figma in den Produktionscode, ohne manuelle Neuinterpretation.
04
Die Komponentenbibliothek aufbauen
30+ wiederverwendbare Komponenten auf Basis realer CERN-Anwendungsfälle gestaltet und dokumentiert – jeweils mit Nutzungsleitfaden, Verhalten, Beispielen und Implementierungshinweisen.
05
Den Dokumentations-Hub veröffentlichen
Den CERN Design System Hub veröffentlicht: eine lebendige, durchsuchbare Referenz für Designer und Entwickler. Ein Ort für Grundlagen, Komponenten, Muster und Richtlinien.
06
Governance und Adoption unterstützen
Ein Beitragsmodell definiert, damit Teams Muster aus realen Produktbedürfnissen vorschlagen, verbessern und erweitern können – so bleibt das System mit echten Anwendungsfällen verbunden, statt statisch zu werden.
05 / Grundlagen
Eine gemeinsame Token-Ebene zwischen Design und Code.
Das Token-System definiert visuelle und Interaktions-Primitive, die im gesamten System verwendet werden, und verbindet Figma direkt mit dem Material-UI-Produktionscode.
Farbe
Semantische Farb-Tokens für primäre, sekundäre, Oberflächen-, Feedback- und barrierefreie Textrollen.
Typografie
Eine Schriftskala mit definierten Rollen – Display, Überschrift, Fließtext, Label, Caption – abgebildet auf das Typografie-System von MUI.
Abstände
Eine konsistente Abstandsskala als Tokens, angewandt auf Padding, Margin, Gap und Layout-Einheiten über alle Komponenten hinweg.
Radius
Border-Radius-Tokens für Buttons, Karten, Eingabefelder und Dialoge – konsistent abgerundete Ecken im gesamten System.
Elevation
Schatten-Tokens, um Oberflächen, Menüs, Dialoge und Karten in einer klaren visuellen Hierarchie zu schichten.
Interaktionszustände
Hover-, Fokus-, Aktiv-, Deaktiviert- und Fehlerzustände als Tokens definiert und für jede Komponente dokumentiert.
Figma Variables — 134 Paletten-Tokens, 252 Material-/Farbwerte, heller und dunkler Modus. Primärzustände (Hover 4 %, Selected 20 %, FocusVisible 30 %) werden direkt auf Material-UI-Theme-Overrides abgebildet.
06 / Komponentenbibliothek
30+ Komponenten. Jede dokumentiert. Jede auf MUI abgebildet.
Geformt von wiederkehrenden CERN-Anwendungsfällen – keine generischen UI-Elemente, sondern wiederverwendbare Antworten auf Probleme, die in realen Produkten auftraten.
Alert
Button
Checkbox
Navigation Drawer
Filter
App Bar
Backdrop
CERN Login
Chips
Divider
Dropdown
Floating Action Button
Feedback
Footer
Loading
Tooltip
+ 14 weitere
Button — Primär / Sekundär, Contained / Outlined / Text, alle 5 Interaktionszustände. Jede Variante wird mit einem entsprechenden Theme-Override auf den MUI-Button abgebildet.
Slider — Primär / Sekundär, Medium / Small, Continuous / Discrete / Range. Interaktionszustände, Thumb-Größe und Track-Verhalten alle tokenisiert.
07 / Dokumentations-Hub
Das System als Produkt – durchsuchbar, lebendig, gemeinsam genutzt.
Der CERN Design System Hub ist das Hauptergebnis: eine veröffentlichte Referenz, die das Design-System in etwas verwandelt, das Teams tatsächlich nutzen können.
08 / Ergebnis
Eine einheitliche Grundlage über CERNs interne Produkte hinweg.
30+
wiederverwendbare Komponenten dokumentiert
6
Grundlagen-Token-Kategorien
1
gemeinsamer Design-System-Hub
∞
Teams, die beitragen können
Einheitliches Design-System für CERNs interne Anwendungen
30+ wiederverwendbare, dokumentierte UI-Komponenten
Gemeinsame Grundlagen-Ebene für Design und Code
Vollständiges Material-UI-Mapping für die Implementierung
CERN Design System Hub, veröffentlicht und lebendig
Muster, geformt von realen Anwendungsfällen über Teams hinweg
09 / Reflexion
Ein Design-System ist ein organisatorisches Werkzeug, keine Komponentenbibliothek.
Der schwierigste Teil von CERN UI war nicht, einen Button zu gestalten. Es war, genug Klarheit, Vertrauen und praktischen Nutzen zu schaffen, damit viele Teams denselben Button wählten – ohne dazu gezwungen zu werden.
Dieses Projekt stärkte meine Fähigkeit, Design im großen Maßstab zu leiten: teamübergreifend zu arbeiten, Anwendungsfälle in wiederverwendbare Muster zu übersetzen, Design mit Code zu verbinden und Dokumentation zu schaffen, die einem System über den ersten Launch hinaus hilft.
CERN UI bewegte Teams von isolierten Interface-Entscheidungen hin zu einer gemeinsamen Produkt-Grundlage. Dieser Wandel – von Fragmentierung zu Kohärenz – ist der eigentliche Sinn eines Design-Systems.
Brauchen Sie ein Design-System, das Teams tatsächlich nutzen?
Machen wir Ihre Produkt-Herausforderung testbar.