UI Design und Design-System-Entwicklung für komplexe Produkte

Ein Design System ist eine koordinierte Sammlung aus Design Tokens, wiederverwendbaren Komponenten, dokumentierten Patterns und Nutzungsregeln. Am Anfang steht UI Design als visuelle Gestaltung: die Qualität des Produkts sichtbar machen, es differenzieren, Markenwerte in die Oberfläche übersetzen — dieselbe visuelle Welt an jedem Touchpoint. Das Design System systematisiert diese Gestaltung, damit sie über Produkte und Teams hinweg konsistent bleibt und bewährte Bausteine wiederverwendet statt neu entworfen werden. Bei komplexen B2B-Produkten löst es ein konkretes Problem: gewachsene Interfaces verlieren ihre Kohärenz, wenn Produktlinien und Anforderungen wachsen.

Splore entwickelt UI Design und Design Systems für Unternehmen, deren Produkte in anspruchsvollen professionellen Kontexten eingesetzt werden. Die Arbeit beginnt dort, wo [Research-Erkenntnisse Designkriterien liefern](/ux-research): Welche Information muss in welcher Situation sichtbar sein, wie werden Zustände und Daten kommuniziert, welches Maß an Fehlertoleranz ist gefordert? Aus diesen Kriterien entstehen Interfaces und die Komponenten, Tokens und dokumentierten Patterns, die den Gestaltungsansatz über die gesamte Produktfamilie reproduzierbar machen.

UI Design für komplexe Produkte

UI Design steht bei Splore für visuelle Gestaltung: Die Oberfläche soll die Qualität des Produkts widerspiegeln, sich visuell differenzieren, innovativ wirken und Markenwerte transportieren. Hinzu kommt, dass sich das Interface im Nutzungskontext beweisen muss. Fachpersonal in Fachanwendungen arbeitet mit dichten Informationsräumen — Produktionsübersichten, Befundansichten, Konfigurationsdialoge mit vielen Abhängigkeiten. Ein Interface muss diese Dichte abbilden, ohne zu überfordern: durch klare Hierarchien, nachvollziehbare Zustandswechsel und visuelle Unterscheidbarkeit, die auch nach Stunden am Bildschirm funktioniert.

Splore gestaltet Interfaces für Produktteams, die im Sprint arbeiten. UI Design ist dabei Grafik, Ästhetik, Marke und System. User Feedback fließt ein, steht aber selten im Vordergrund — außer bei Fragen der Lesbarkeit. Bedienbarkeits- und Konzeptfragen werden im Interaktionsdesign beantwortet: eine bewusste Arbeitsteilung, die beide Disziplinen schärft.

Was ein Design System umfasst

Der Übergang vom validierten Prototyp zur systematisierten Gestaltung verläuft über vier Ebenen, die aufeinander aufbauen:

**Design Tokens** definieren die grundlegenden Gestaltungswerte: Farben, Abstände, Schriftgrößen, Schatten. Sie bilden die gemeinsame Sprache zwischen Design und Entwicklung.

**Komponentenbibliothek** enthält die wiederverwendbaren Bausteine des Interfaces: Eingabefelder, Tabellen, Navigationen, Dialoge. Jede Komponente ist dokumentiert, mit Varianten, Zuständen und Anwendungsregeln.

**Patterns** beschreiben wiederkehrende Lösungen für typische Interaktionssituationen: Wie werden Fehler angezeigt? Wie funktioniert eine Filterung über mehrere Kriterien? Patterns stellen sicher, dass gleiche Probleme im gesamten Produkt gleich gelöst werden.

**Dokumentation und Governance** regeln, wie das System gepflegt und weiterentwickelt wird: Wer darf Komponenten ändern, wie werden neue Patterns aufgenommen, was passiert bei Abweichungen?

Abgrenzung zum Styleguide

Ein Styleguide legt visuelle Regeln fest: Farbpalette, Typografie, Logo-Verwendung. Ein Design System geht darüber hinaus. Es definiert nicht nur, wie etwas aussieht, sondern wie es sich verhält, in welchen Kontexten es eingesetzt wird und wie Design und Code zusammenhängen.

Sie wollen herausfinden, ob ein Design System für Ihre Produkte sinnvoll ist? Schreiben Sie an hello@splore.de.

Implementierung und Governance

Ein Design System entsteht nicht auf Vorrat. Es wächst mit dem Produkt. Splore empfiehlt den Einstieg über die Komponenten, die am häufigsten gebraucht und am häufigsten abweichend umgesetzt werden. Daraus entsteht ein Kern-Set, das sukzessive erweitert wird.

Die Einführung gelingt, wenn das Entwicklungsteam das System von Beginn an mitträgt. Deshalb arbeitet Splore als Boutique-Beratung in der Implementierungsphase direkt mit der Entwicklung zusammen: Design-Spezifikationen werden in Abstimmung mit der technischen Architektur erstellt, Komponenten gemeinsam definiert und abgenommen. So entsteht kein Übergabe-Artefakt, sondern ein gemeinsames Arbeitswerkzeug.

Zur Pflege gehört eine Governance-Struktur: definierte Verantwortlichkeiten, klare Regeln für Änderungen und Ergänzungen, regelmäßige Abstimmung zwischen Design und Entwicklung. Ohne Governance veraltet ein Design System innerhalb weniger Quartale.

Beispielprojekte

Krones: UI Design für die Connected HMI

Splore verantwortet das UI Design für die zentrale Maschinensteuerung von Krones. Die Leistung umfasst die visuelle Gestaltung der Bedienoberflächen für Maschinen und Anlagen und den Aufbau eines modularen Interface-Baukastens für verschiedene Endgeräte, integriert in das bestehende Krones Design System.

Zum Case

Honic: UI System für eine HealthTech-Plattform

Für das HealthTech-Startup Honic entwickelt und erweitert Splore das „HUI“ — das Honic UI System mit Komponentenbibliothek, Gestaltungsrichtlinien und Design Tokens. Über eine Figma-Komponenten-Library stellt das HUI Konsistenz über drei Produkte hinweg sicher — ein bewusst schlankes, aber echtes System.

Zum Case