Ein ruhigeres Reverie gestalten: vom Chat zum gesamten Produkt

Wenn du in den letzten Tagen eine Unterhaltung geöffnet hast, ist dir vielleicht aufgefallen, dass sich etwas anders anfühlt.

Die Chat-Oberfläche ist etwas ruhiger geworden. Nachrichten lassen sich leichter lesen, Bedienelemente wirken leichter und Panels sowie Dialoge konkurrieren weniger mit dem Gespräch selbst. Nichts ist an einen ungewohnten Ort gewandert, doch der Raum um deine Charaktere fühlt sich entspannter an.

Wir haben mit dem Chat begonnen, weil viele Menschen dort die meiste Zeit in Reverie verbringen. Er war außerdem der beste Ort, um die Leitfrage dieses Redesigns zu prüfen: Wie sollte sich eine Oberfläche anfühlen, wenn sie über ein ganzes Gespräch hinweg angenehm bleiben und nicht nur einen starken ersten Eindruck hinterlassen soll?

Was du dort gesehen hast, war keine isolierte Überarbeitung. Es war der erste sichtbare Teil eines neuen Designsystems. Inzwischen haben wir es auf das gesamte Produkt ausgeweitet – von der Entdeckung und den Charakterseiten über Kreativwerkzeuge, Geschichten, Zahlungen, Belohnungen und Einstellungen bis hin zu den kleinen Hilfsansichten dazwischen.

Reverie war schon immer ausdrucksstark.

Diese Persönlichkeit zeigte sich überall: in markanten Rahmen, sichtbaren Schatten, geschichteten Karten, farbigen Steuerelementen und Flächen, die eher wie Gegenstände als wie Rechtecke auf einem Bildschirm wirken wollten. Das verlieh dem Produkt Wärme und machte es unverkennbar zu unserem.

Doch eine visuelle Sprache kann für eine Phase eines Produkts richtig sein und für die nächste zu schwer werden.

Mit dem Wachstum von Reverie musste die Oberfläche mehr als nur Entdeckung unterstützen. Menschen verbrachten länger in Gesprächen, verwalteten Charaktere, schrieben Geschichten, verglichen Tarife, konfigurierten fortgeschrittene Werkzeuge und bewegten sich durch immer komplexere Abläufe. Dieselben dekorativen Details, die einer Landingpage Charakter geben, können zu visuellem Rauschen werden, wenn sie sich in jedem Dialog, jeder Karte, jedem Menü und jedem Button wiederholen.

Wir haben Reverie also nicht neu gestaltet, um es weniger eigenständig zu machen. Wir wollten, dass seine Eigenständigkeit aus dem Erlebnis selbst entsteht.

Leichter, nicht kälter

„Leicht“ wird schnell zum Synonym für rein weiße Hintergründe, dünnen grauen Text und Komponenten mit so wenig Präsenz, dass alles unfertig wirkt. Das war nie unser Ziel.

Das neue System ist ruhiger, bleibt aber warm.

Statt grellem Weiß verwenden wir sanft getönte neutrale Flächen. Text ist dort dunkler und etwas kräftiger, wo längeres Lesen wichtig ist. Rahmen sind zurückhaltender, Schatten flacher und Farbe wird gezielter eingesetzt. So entsteht weniger visuelles Gewicht, ohne das Gefühl zu verlieren, dass Reverie ein Ort für Geschichten und Beziehungen ist.

Gerade beim Rollenspiel ist dieses Gleichgewicht wichtig. Eine Unterhaltung ist kein Einstellungs-Dashboard. Menschen lesen lange Nachrichten, nehmen kleine Tonwechsel wahr und bleiben oft lange in derselben Ansicht. Typografie und Hintergrund müssen sich nach zwanzig Minuten noch gut anfühlen und nicht nur auf einem Screenshot sauber aussehen.

Typografie für längeres Lesen

Eine der wichtigsten Änderungen ist zugleich eine der unspektakulärsten: Wir haben die typografische Hierarchie gestärkt.

Große Überschriften bleiben ausdrucksstark, während Fließtext jetzt mehr visuelle Sicherheit besitzt. Wichtige Bezeichnungen, Navigationselemente und Aktionen nutzen Schriften, die sich leichter überfliegen lassen. Sekundärer Text bleibt sekundär, ist aber nicht mehr so blass, dass das Lesen anstrengend wird.

Das Prinzip ist einfach:

Längere Texte sollen ruhig und solide wirken.
Aktionen sollen erkennbar sein, bevor jede Beschriftung gelesen wurde.
Unterstützende Informationen dürfen zurücktreten, aber nicht verschwinden.
Eine Seite muss auf verschiedenen Displays, in verschiedenen Themes und Lichtverhältnissen lesbar bleiben.

Gute Typografie verlangt keine Aufmerksamkeit. Sie hilft dabei, sie zu halten.

Eine Komponentensprache für das gesamte Produkt

Das war kein seitenweiser Anstrich. Wir haben die gemeinsame Komponentensprache unterhalb des Produkts neu aufgebaut.

Buttons, Karten, Dialoge, Menüs, Tabs, Formularelemente, Tabellen, Tooltips, Toasts, Drawer, Popover und Navigationselemente folgen nun denselben Regeln für:

Eckenradius
Rahmenkontrast
Flächenfarbe
räumliche Ebene
Fokusdarstellung
Hover- und gedrückte Zustände
Schriftgewicht
Abstände
semantische Farben

Diese Konsistenz ist wichtiger als jede einzelne visuelle Entscheidung. Wenn dieselbe Art von Aktion überall gleich aussieht und funktioniert, müssen Nutzer weniger Energie in die Deutung der Oberfläche stecken. Eine destruktive Aktion wirkt destruktiv. Eine ausgewählte Option wirkt ausgewählt. Eine schwebende Fläche hebt sich von der Seite darunter ab. Eine primäre Aktion ist leicht zu finden, ohne dass jeder Button um diese Rolle kämpfen muss.

Auch für hervorgehobene und erfolgreiche Zustände gibt es klarere semantische Varianten. Sie gehören nun zum gemeinsamen System, statt als individuelle Verläufe oder Farben in einzelnen Funktionen neu erfunden zu werden.

Der schwierige Teil: die Ausnahmen finden

Eine Änderung an der Button-Komponente aktualisiert nicht automatisch jeden Button.

Produkte sammeln mit der Zeit lokale Entscheidungen: eine Preiskarte mit eigenem Rahmen, einen Belohnungsdialog mit individuellem Leuchten, einen Teilen-Dialog mit besonderem Hintergrund, eine versteckte Aktion mit eigenem Verlauf oder eine Funktionskarte, deren Hover-Verhalten von Grund auf nachgebaut wurde.

Solche Ausnahmen lassen ein Redesign am Ende oft uneinheitlich wirken.

Deshalb endete unsere Prüfung nicht bei der Komponentenbibliothek. Wir haben sinnvolle individuelle Oberflächen wieder in die gemeinsame Sprache zurückgeführt – darunter Marketing-Erlebnisse, Zahlungsabläufe, Belohnungen, Erfolge, Charakter- und Story-Karten, Teilen-Dialoge, Navigationselemente, leere Zustände, Banner und seltener besuchte Hilfsseiten.

Nicht jede Ausnahme wurde entfernt. Manche Oberflächen brauchen eine stärkere Identität, weil sie Feierlichkeit, Dringlichkeit, Seltenheit oder Status vermitteln. Der Unterschied ist, dass solche Momente das System nun erweitern, statt es zu ignorieren.

Weniger Dekoration, klarere Interaktion

Das Redesign entfernt viele Effekte, die interaktiv aussahen, ohne nützliche Informationen zu liefern.

Schwere Schatten liegen nicht mehr auf jeder Karte. Bewegungen beim Darüberfahren sind zurückhaltender. Verläufe bleiben Momenten vorbehalten, die von Betonung profitieren. Rahmen schaffen Struktur, ohne jeden Inhalt in eine weitere Box zu sperren.

Gleichzeitig sind echte Interaktionszustände klarer:

Ausgewählte Optionen zeigen ihren Zustand visuell und semantisch.
Der Tastaturfokus lässt sich leichter verfolgen.
Interaktive Karten haben einheitliche Hover- und Fokuszustände.
Buttons vermitteln ihre Hierarchie durch gemeinsame Varianten.
Dialoge und Menüs heben sich vom Hintergrund ab, ohne losgelöst vom Produkt zu wirken.

Weniger Dekoration gab uns mehr Raum für besseres Feedback. Die Oberfläche bewegt sich weniger, sagt aber mehr.

Barrierefreiheit gehört zum visuellen System

Ein Designsystem ist unvollständig, wenn es nur beschreibt, wie Komponenten mit einer Maus aussehen.

Während des Refactorings haben wir Fokusringe, Tastaturverhalten, die Semantik ausgewählter Zustände, Kontraste und interaktive Karten erneut geprüft. Einige Steuerelemente teilen Hilfstechnologien nun eindeutiger mit, ob sie gedrückt oder ausgewählt sind. Story-Elemente, die sich wie Links verhalten, lassen sich per Tastatur erreichen und öffnen. Die Fokusdarstellung folgt über alle gemeinsamen Elemente hinweg derselben visuellen Logik.

Diese Änderungen sind bewusst dezent. Barrierefreiheit sollte sich nicht wie ein zusätzlicher Modus über dem Produkt anfühlen. Sie sollte im Standardverhalten enthalten sein.

Ein besseres Fundament für alles, was folgt

Das wertvollste Ergebnis dieser Arbeit ist kein bestimmter Farbton, Radius oder Schatten. Es gibt nun weniger konkurrierende Antworten auf dieselbe Designfrage.

Bei einer neuen Funktion müssen wir nicht jedes Mal neu entscheiden, wie ein Dialog wirken, wie ein Eingabefeld reagieren oder wie eine ausgewählte Karte aussehen soll. Das System liefert diese Antworten bereits. Dadurch wird neue Arbeit schneller und das fertige Erlebnis vor allem vorhersehbarer.

Konsistenz bedeutet nicht, dass jeder Bildschirm gleich aussieht. Sie schafft stabile Erwartungen, damit Inhalte wechseln können, ohne dass die Oberfläche fremd wird.

Was du hoffentlich bemerkst

Im Idealfall zunächst nicht viel.

Reverie sollte sich einfach leichter lesen, ruhiger bedienen und zusammenhängender anfühlen, wenn du von der Entdeckung zu Unterhaltungen, Erstellung und Kontowerkzeugen wechselst. Wichtige Aktionen sollten früher auffallen. Sekundäre Bedienelemente sollten nicht mehr um Aufmerksamkeit kämpfen. Längere Sitzungen sollten visuell weniger ermüden.

Die Charaktere bleiben ausdrucksstark. Die Geschichten behalten ihre Atmosphäre. Momente, die gefeiert werden sollen, dürfen weiterhin lebendig sein.

Die Oberfläche weiß nur besser, wann sie sprechen muss – und wann sie ruhig genug werden sollte, damit alles andere zählt.

Das neue Designsystem erstreckt sich jetzt über das gesamte Reverie-Erlebnis. Wenn sich etwas besonders viel besser – oder noch immer unpassend – anfühlt, freuen wir uns über dein Feedback in unserer Discord-Community.