Bedienoberflächen
Teil von Bedienoberflächen gestalten mit Designsystem, Barrierefreiheit und Tests
Designsysteme im Vergleich von Material Design, Fluent, Carbon und Polaris
Designsysteme im Vergleich: Material Design, Fluent 2, Carbon und Polaris mit Lizenzmodellen, Komponenten, Dokumentation und Pflegeaufwand für Teams.
Das Wichtigste auf einen Blick
- Material Design (Google), Fluent 2 (Microsoft), Carbon (IBM) und Polaris (Shopify) kommen aus vier verschiedenen Produktwelten.
- Material Design und Carbon stehen unter der Apache License 2.0, Fluent 2 unter der MIT-Lizenz; die Markenrechte bleiben beim Anbieter.
- Carbon passt zu dichten Datenansichten, Fluent 2 zu Produktivsoftware mit Desktop-Nähe, Polaris nur zum Shopify Admin, Material Design zu vielen Geräteklassen.
- Der Pflegeaufwand hängt an Token-Anpassung, Release-Takt und Freigaben, nicht am Komponentenumfang.
- Für Textkontrast gilt nach WCAG 2.1 Stufe AA mindestens 4,5:1, für große Schrift 3:1.
Vier Systeme, vier Ursprünge
Material Design von Google beschreibt Flächen, Bewegung, Farbe und Typografie für Produkte auf vielen Geräten; die Regeln stehen in den Material Design Richtlinien von Google. Seit 2021 bildet Material 3 die Grundlage, 2025 kam Material 3 Expressive hinzu.
Fluent 2 von Microsoft ist auf Produktivsoftware, gemischte Gerätelandschaften und dichte Abläufe zugeschnitten. Microsoft dokumentiert die Prinzipien im Fluent 2 Design System; die zweite Generation wurde 2021 vorgestellt.
IBM Carbon entstand aus der eigenen Produktoberfläche und liefert Muster für Tabellen, Filterleisten und Datendichte; Carbon 11 ist seit 2022 die aktuelle Hauptversion. Shopify Polaris ist an die Admin-Oberfläche des Shopsystems gebunden und deckt Bestellungen, Produkte und Kundendaten ab.
Lizenz und Nutzungsrechte je System
Dokumentation ist keine Lizenz: Die Richtlinien erklären Gestaltung, der Quellcode folgt eigenen Bedingungen.
Material Design
- Herkunft
- Zielumgebung
- Web, Android, viele Geräte
- Codebibliothek
- Web und Mobil
- Lizenz des Codes
- Apache License 2.0
- Pflegeaufwand bei Eigenanpassung
- hoch
Fluent 2
- Herkunft
- Microsoft
- Zielumgebung
- Produktivsoftware, Desktop und Web
- Codebibliothek
- React und Web Components
- Lizenz des Codes
- MIT
- Pflegeaufwand bei Eigenanpassung
- hoch
Carbon
- Herkunft
- IBM
- Zielumgebung
- Enterprise-Anwendungen mit Datenmengen
- Codebibliothek
- React
- Lizenz des Codes
- Apache License 2.0
- Pflegeaufwand bei Eigenanpassung
- mittel bis hoch
Polaris
- Herkunft
- Shopify
- Zielumgebung
- Shopify Admin
- Codebibliothek
- React
- Lizenz des Codes
- quelloffen, Markenrechte bei Shopify
- Pflegeaufwand bei Eigenanpassung
- niedrig bei Shopify-Nähe
Vier Systeme im Kriterienvergleich
Material Design
- Herkunft
- Zielumgebung
- Apps, Web, viele Geräte
- Komponenten
- Web- und Mobilbibliotheken
- Dokumentation
- Richtlinien mit Beispielen
- Pflegeaufwand
- hoch
Fluent 2
- Herkunft
- Microsoft
- Zielumgebung
- Produktivsoftware im Web
- Komponenten
- Web- und Desktopbibliotheken
- Dokumentation
- Richtlinien mit Figma-Kits
- Pflegeaufwand
- hoch
Carbon
- Herkunft
- IBM
- Zielumgebung
- Enterprise mit Datenmengen
- Komponenten
- React-Bibliothek mit Mustern
- Dokumentation
- Richtlinien mit Datenmustern
- Pflegeaufwand
- mittel bis hoch
Polaris
- Herkunft
- Shopify
- Zielumgebung
- Shopify Admin
- Komponenten
- Admin-Komponenten
- Dokumentation
- Codebeispiele und Muster
- Pflegeaufwand
- niedrig bei Shopify-Nähe
Rechtlich relevant wird die Lizenz bei abgeleiteten Werken. Wer Komponenten verändert, in eigene Produkte einbettet oder an Kunden weitergibt, braucht geklärte Nutzungsrechte; Einzelheiten regelt das Urheberrechtsgesetz. Kundenverträge sollten Umfang, Dauer und Übertragung dieser Rechte schriftlich festhalten; Hinweise bündelt der Ratgeber Vertragsrecht der IHK München.
Bei der Dokumentation liegen Material Design und Fluent 2 vorn: Beide liefern Richtlinien mit Beispielen, Bildschirmmustern und Figma-Bibliotheken. Carbon ergänzt Muster für Datenvisualisierung, Polaris bleibt schlanker und eng an die Shopify-Schnittstellen gekoppelt.
Barrierefreiheit, Muster und Pflegeaufwand
Material Design deckt Android, Web und Wearables ab und beschreibt Bewegung und Tiefe ausführlich. Fluent 2 trennt Web- und Desktop-Bibliotheken und legt Wert auf Tastaturbedienung und Kontrastmodi. Carbon liefert Muster für Filterleisten, Datentabellen und Diagramme.
Barrierefreiheit behandeln alle vier Systeme, die Nachweispflicht bleibt beim betreibenden Team. Konkret heißt das: Textkontrast mindestens 4,5:1 nach WCAG 2.1 Stufe AA, sichtbarer Fokusring mit mindestens 3:1 Kontrast zur Umgebung, Tastaturreihenfolge entlang der Leserichtung.
Pflegeaufwand entsteht beim Aktualisieren, nicht beim Einbau: Hauptversionen ändern Token-Namen und Komponenten-APIs. Wer nur Komponenten übernimmt und Tokens ignoriert, arbeitet beim nächsten Versionssprung doppelt.
Beispielrechnung: Theme-Prüfung nach einem Update
Die folgende Rechnung ist ein Beispiel, kein Marktpreis. Annahme: 85 Euro je Stunde. Für 8 Stunden Design und 12 Stunden Entwicklung ergibt die Prüfung eines eigenen Themes nach einem Hauptversionswechsel rund 1.700 Euro netto (ohne Umsatzsteuer). Bei zwei Wechseln im Jahr liegt der Rahmen bei etwa 3.400 Euro netto.
Auswahl in fünf Schritten
- Zielumgebung festlegenWeb, Desktop, mobil, Shop-Admin oder mehrere Kanäle.
- Komponentenlücken prüfenTabellen, Filter, Formulare, Diagramme, Datumsauswahl.
- Lizenz und Nutzungsrechte klären, auch für die Weitergabe an Kunden.
- Token-Strategie festlegen und Farben, Abstände und Schriftgrößen zentral pflegen.
- Pflegebudget verteilenWer liest Release Notes, wer prüft Kontraste, wer gibt frei?
Bei verteilten Teams müssen Design und Entwicklung dieselbe Version nutzen. Sonst laufen Figma-Bibliothek und Code auseinander, und Abweichungen fallen erst im Betrieb auf.
Häufige Fragen
Welches Designsystem passt zu Enterprise-Anwendungen mit vielen Daten?
Carbon, weil Tabellen, Filterleisten und Diagramme zum Kern gehören. Material Design und Fluent 2 decken ein breiteres Feld ab, Polaris bleibt auf den Shopify Admin begrenzt.
Sind die vier Systeme kostenlos nutzbar, auch kommerziell?
Ja. Material Design, Fluent 2 und Carbon erlauben die kommerzielle Nutzung über Apache License 2.0 beziehungsweise MIT. Markenrechte und Supportzusagen sind darin nicht enthalten.
Wie unterscheiden sich die Lizenzmodelle konkret?
Apache License 2.0 bei Material Design und Carbon enthält eine ausdrückliche Patentregelung; MIT bei Fluent 2 ist kürzer und verlangt Urheberhinweis und Lizenztext. Beide verpflichten zur Weitergabe des Lizenztextes. Für Polaris gilt die Lizenzangabe im Repository von Shopify.
Wie hoch ist der Pflegeaufwand im Jahr?
Er hängt an Anpassungstiefe und Release-Takt. Ein unverändertes Basissystem verursacht vor allem Upgradearbeit, ein eigenes Theme zusätzlich Abstimmung zwischen Design und Entwicklung.
