Wie aus einzelnen Oberflächen eine Produktfamilie wurde

Es gibt diesen einen Moment, in dem man mehrere eigene Anwendungen und Websites nebeneinanderstellt und denkt: Sie gehören alle zu mir – aber offenbar wissen sie nichts voneinander.

Jede einzelne war über Jahre gewachsen. Jede hatte ihre Aufgabe, ihre Nutzer und ihre ganz eigenen kleinen Besonderheiten. Funktional war alles da. Optisch erzählten die Produkte allerdings Geschichten aus unterschiedlichen Jahrzehnten. Manche Buttons wirkten, als hätten sie sich nur zufällig auf dieselbe Festplatte verirrt. Abstände wurden eher nach Tagesform vergeben, und eine Überschrift konnte je nach Anwendung durchaus eine andere Vorstellung davon haben, wie wichtig sie eigentlich war.

Das war der Ausgangspunkt für das neue Design.

Warum nicht einfach alles ein bisschen hübscher machen?

Ein neuer Farbton, modernere Schriften, ein paar weichere Ecken – damit wäre die Sache schnell erledigt gewesen. Zumindest auf den ersten Blick.

Aber Gestaltung ist keine Dekoration, die man am Ende über ein fertiges Produkt legt. Sie hilft Menschen dabei, eine Oberfläche zu verstehen. Was ist wichtig? Wo beginne ich? Was passiert als Nächstes? Welche Aktion ist sicher, welche endgültig? Und warum verhält sich ein Dialog in der einen Anwendung anders als in der nächsten?

Je länger ich mich mit diesen Fragen beschäftigt habe, desto klarer wurde: Ich wollte keinen neuen Anstrich. Ich wollte eine gemeinsame Sprache für alle Produkte.

Die Websites und Apps sollten auf den ersten Blick als Teil derselben Familie erkennbar sein. Nicht wie eineiige Zwillinge, die vorsichtshalber dasselbe Hemd tragen, sondern wie gute Geschwister: mit eigener Persönlichkeit, aber erkennbar denselben Werten.

Erst aufräumen, dann gestalten

Die Arbeit begann deshalb nicht in einem Farbwähler, sondern mit einer Bestandsaufnahme. Welche Elemente tauchen immer wieder auf? Wo unterscheiden sich ähnliche Abläufe ohne guten Grund? Welche Informationen brauchen wirklich Aufmerksamkeit – und welche machen gerade nur Lärm?

Dabei wurde schnell sichtbar, dass viele vermeintliche Designprobleme in Wahrheit Strukturprobleme waren. Wenn fünf Dinge gleichzeitig „Hier klicken!“ rufen, braucht es nicht fünf schönere Buttons. Es braucht eine Entscheidung darüber, welcher davon tatsächlich wichtig ist.

Also wurde reduziert, sortiert und priorisiert. Navigationen wurden klarer, Texte kürzer, Aktionen eindeutiger. Aus einzelnen Bildschirmen entstanden nachvollziehbare Abläufe. Das Design durfte erst dann hinzukommen, als feststand, was die Oberfläche eigentlich sagen will.

Die Regeln hinter der Oberfläche

Aus diesen Entscheidungen wuchs nach und nach ein Designsystem. Es definiert nicht nur Farben und Schriftgrößen, sondern die Logik hinter dem Erscheinungsbild.

Farbe gibt Orientierung. Typografie schafft Hierarchie. Abstände sorgen dafür, dass Zusammengehöriges auch zusammengehörig aussieht. Linien, Radien und Flächen geben den Oberflächen ihren Rhythmus. Und Zustände – aktiv, inaktiv, erfolgreich, fehlerhaft oder gerade beschäftigt – folgen überall derselben verständlichen Logik.

Das klingt zunächst nach einer Sammlung kleiner Details. Genau darin liegt aber die Stärke. Ein einzelner Abstand von acht oder zwölf Pixeln verändert kein Produkt. Hunderte konsequent getroffene Entscheidungen verändern sehr wohl, wie ruhig, verlässlich und selbstverständlich es sich anfühlt.

Ein Designsystem beginnt für mich deshalb nicht mit einer Farbpalette. Es beginnt mit der Entscheidung, dieselbe Frage nicht in jedem Projekt wieder neu zu beantworten.

Eine Sprache, verschiedene Dialekte

Konsequenz bedeutet dabei nicht, jede Oberfläche identisch aussehen zu lassen. Eine persönliche Website hat eine andere Aufgabe als ein Werkzeug, das Dateien umbenennt oder QR-Codes erzeugt.

Auf ruesken.net und in den rsk-Tools sorgt das kräftige Magenta für Wiedererkennung und Energie. Auf christian-ruesken.de bestimmen tiefes Blau, viel Weißraum und eine editoriale Typografie den Charakter. Die Farben unterscheiden sich bewusst. Die Prinzipien dahinter bleiben gleich: klare Kontraste, großzügige Flächen, eine ruhige Hierarchie und wenige, dafür eindeutige Akzente.

So kann jede Anwendung ihre eigene Rolle spielen, ohne den Kontakt zur Familie zu verlieren. Das System ist kein Korsett. Es ist eher eine gemeinsame Grammatik, mit der sich unterschiedliche Geschichten erzählen lassen.

Von der Website bis zum Windows-Dialog

Die eigentliche Bewährungsprobe kam bei der Übertragung. Ein Designsystem sieht in einer Übersicht mit Farben, Schriften und Komponenten schnell überzeugend aus. Spannend wird es dort, wo echte Software beginnt.

Bei rsk.files, rsk.guardian, rsk.rename und rsk.qr musste die neue Gestaltung nicht nur auf Startbildschirmen funktionieren. Sie musste sich in Einstellungen, leeren Zuständen, Fortschrittsanzeigen, Fehlermeldungen und Bestätigungsdialogen bewähren. Ein Hauptbutton braucht eine klare Rolle. Eine riskante Aktion darf nicht versehentlich freundlich aussehen. Und wenn eine Aufgabe einige Sekunden dauert, muss die Oberfläche zeigen, dass sie arbeitet – ohne dabei nervös zu werden.

Auf den Websites stellten sich andere Fragen. Wie verhalten sich Navigation, Karten und Handlungsaufforderungen auf einem großen Monitor und auf einem Smartphone? Wie bleiben lange Texte gut lesbar? Wie viel Raum braucht ein Projekt, damit ein Screenshot wirkt, ohne den gesamten Inhalt zu überrollen? Auch hier wurden aus Einzelentscheidungen wiederverwendbare Muster.

So wanderte das System Schritt für Schritt durch alle Projekte. Nicht per Copy-and-paste, sondern durch Übersetzung: dieselbe Haltung, angepasst an Medium, Aufgabe und Nutzungssituation.

Die unsichtbare Hälfte der Arbeit

Natürlich lebt gutes Design nicht nur von den Ansichten, die später auf Screenshots besonders ordentlich aussehen.

Es lebt von langen Dateinamen, unerwarteten Fehlermeldungen und Fenstern, die jemand erstaunlich schmal zieht. Von Tastaturfokus, verständlichen Zuständen und Texten, die auch dann noch passen müssen, wenn sie ein paar Wörter länger werden. Von kleinen Displays, hoher Skalierung und dem seltenen, aber zuverlässig auftauchenden Sonderfall, an den beim ersten Entwurf niemand gedacht hat.

Genau dort wurde aus einer schönen Idee ein belastbares System. Jede Anwendung deckte neue Fragen auf. Jede beantwortete Frage machte die nächste Umsetzung schneller und sicherer. Die Produkte haben sich dabei gegenseitig verbessert: Eine Lösung, die sich in einem Windows-Tool bewährt hat, schärfte auch die Logik auf der Website – und umgekehrt.

Was sich dadurch verändert hat

Das sichtbarste Ergebnis ist natürlich die neue Optik. Wichtiger ist jedoch, was darunter passiert ist.

Die Produkte wirken heute ruhiger, klarer und vertrauter. Wer eines der Tools kennt, findet sich in den anderen schneller zurecht. Neue Funktionen müssen gestalterisch nicht mehr bei null anfangen. Entscheidungen lassen sich anhand gemeinsamer Regeln treffen, statt jedes Mal neu nach Geschmack zu verhandeln.

Auch die Entwicklung hat davon profitiert. Wiederverwendbare Komponenten und feste Gestaltungswerte sparen Zeit. Änderungen lassen sich kontrollierter in mehrere Projekte übertragen. Und weil Design und Technik nicht mehr getrennt voneinander gedacht werden, entstehen weniger Brüche zwischen Entwurf und fertigem Produkt.

Vor allem aber fühlt sich das Ganze inzwischen richtig an: nicht wie eine zufällige Sammlung einzelner Projekte, sondern wie ein zusammenhängendes Werk.

Fertig? Natürlich nicht.

Ein Designsystem ist nie wirklich abgeschlossen. Produkte verändern sich, Anforderungen kommen hinzu und manchmal zeigt ein einziger ungewöhnlich langer Text, dass eine vermeintlich perfekte Komponente doch noch Gesprächsbedarf hat.

Aber genau das ist der Reiz. Das System liefert keine endgültigen Antworten, sondern eine verlässliche Grundlage für die nächsten Fragen. Es wächst mit jedem Projekt weiter – genauso wie die Software und der Mensch, der sie entwickelt.

Und wenn ich heute die Websites und Anwendungen nebeneinanderstelle, sehe ich nicht mehr sechs Oberflächen, die zufällig denselben Autor haben. Ich sehe eine Produktfamilie. Eine mit unterschiedlichen Charakteren, einer gemeinsamen Sprache und erfreulich wenig Streit darüber, wie groß ein Button sein sollte.