Als je de afgelopen dagen een gesprek hebt geopend, heb je misschien gemerkt dat er iets anders aanvoelt.
De chatinterface werd wat rustiger. Berichten lazen makkelijker. Bedieningselementen voelden lichter aan. Panelen en dialoogvensters concurreerden minder met het gesprek zelf. Niets verhuisde naar een onbekende plek, maar de ruimte rond je personages begon kalmer aan te voelen.
We begonnen bij de chat, omdat veel mensen daar de meeste tijd in Reverie doorbrengen. Het was ook de beste plek om de vraag achter dit herontwerp te testen: hoe moet de interface aanvoelen als die een heel gesprek lang comfortabel moet blijven, en niet alleen een sterke eerste indruk moet maken?
Wat je daar zag, was geen losse opfrisbeurt. Het was het eerste zichtbare deel van een nieuw designsysteem, en dat systeem hebben we nu doorgetrokken naar het hele product - van ontdekken en personagepagina's tot de makerstools, verhalen, betalingen, beloningen, instellingen en de kleine hulpschermen daartussen.
Reverie is altijd expressief geweest.
Die persoonlijkheid was overal te zien: stevige randen, zichtbare schaduwen, gelaagde kaarten, kleurrijke bedieningselementen en vlakken die eerder als objecten wilden aanvoelen dan als rechthoeken op een scherm. Het gaf het product warmte en maakte het herkenbaar als het onze.
Maar een beeldtaal die past bij de ene fase van een product, kan te zwaar worden voor de volgende.
Naarmate Reverie groeide, moest de interface meer ondersteunen dan alleen ontdekken. Mensen brachten meer tijd door in gesprekken, beheerden personages, schreven verhalen, vergeleken abonnementen, stelden geavanceerde tools in en bewogen zich tussen steeds complexere werkstromen. Dezelfde decoratieve details die een landingspagina karakter gaven, konden visuele ruis worden als ze in elk dialoogvenster, elke kaart, elk menu en elke knop terugkwamen.
We hebben Reverie dus niet herontworpen om het minder onderscheidend te maken. We hebben het herontworpen zodat het onderscheid voortkomt uit de ervaring zelf.
Een lichtere interface, geen kilere
"Lichtgewicht" kan al snel een synoniem worden voor kale witte achtergronden, dunne grijze tekst en componenten met zo weinig aanwezigheid dat alles onaf begint te voelen. Dat was nooit het doel.
Het nieuwe systeem is rustiger, maar nog steeds warm.
We hebben het canvas verschoven van fel wit naar zacht getinte, neutrale vlakken. Tekst is donkerder en iets krachtiger waar langdurig lezen belangrijk is. Randen zijn ingetogener, schaduwen ondieper en kleur wordt bewuster ingezet. Het resultaat is minder visueel gewicht, zonder het gevoel te verliezen dat Reverie een plek is die gemaakt is voor verhalen en relaties.
Die balans was vooral belangrijk bij roleplay. Een gesprek is geen instellingendashboard. Mensen lezen lange berichten, merken subtiele toonverschillen op en blijven vaak lang in hetzelfde scherm. Typografie en achtergrondkleur moeten na twintig minuten nog comfortabel aanvoelen, niet alleen strak ogen op een screenshot.
Typografie die lang lezen aankan
Een van de belangrijkste veranderingen is tegelijk een van de minst opvallende: we hebben de typografische hiërarchie versterkt.
Grote koppen blijven expressief, maar de lopende tekst heeft nu meer visuele zelfverzekerdheid. Belangrijke labels, navigatie-items en acties gebruiken letterdiktes die makkelijker te scannen zijn. Secundaire tekst is nog steeds secundair, maar niet langer zo vaag dat lezen moeite kost.
Het principe is simpel:
- Lange teksten moeten rustig en substantieel aanvoelen.
- Acties moeten herkenbaar zijn voordat je elk label hebt gelezen.
- Ondersteunende informatie moet naar de achtergrond gaan zonder te verdwijnen.
- Een pagina moet leesbaar blijven op verschillende schermen, in verschillende thema's en bij verschillend omgevingslicht.
Goede typografie vraagt niet om aandacht. Ze maakt het makkelijker om je aandacht vast te houden.
Eén componententaal voor het hele product
Dit was geen nieuw jasje per pagina. We hebben de gedeelde componententaal onder het product opnieuw opgebouwd.
Knoppen, kaarten, dialoogvensters, menu's, tabbladen, formulierelementen, tabellen, tooltips, meldingen, laden, pop-overs en navigatie-elementen volgen nu dezelfde regels voor:
- hoekradius
- randcontrast
- vlakkleur
- hoogte
- focusaanduiding
- hover- en ingedrukte toestanden
- letterdikte
- witruimte
- semantische kleur
Die consistentie is belangrijker dan welke afzonderlijke visuele keuze ook. Als hetzelfde soort actie er overal hetzelfde uitziet en zich overal hetzelfde gedraagt, hoeven gebruikers minder moeite te doen om de interface te begrijpen. Een destructieve actie voelt destructief. Een geselecteerde optie voelt geselecteerd. Een zwevend vlak voelt los van de pagina eronder. Een primaire actie is makkelijk te vinden zonder dat elke knop probeert de primaire te zijn.
We hebben ook duidelijkere semantische varianten geïntroduceerd voor acties, zoals uitgelichte en geslaagde toestanden. Die maken nu deel uit van het gedeelde systeem, in plaats van eenmalige verlopen of eigen kleuren die binnen afzonderlijke functies opnieuw worden gemaakt.
Het lastige deel: de uitzonderingen vinden
Een knopcomponent bijwerken werkt niet vanzelf elke knop bij.
Producten verzamelen in de loop van de tijd lokale beslissingen: een prijskaart met een eigen rand, een beloningsvenster met een speciale gloed, een deelvenster met een bijzondere achtergrond, een verborgen actie met een eigen kleurverloop, of een functiekaart die het hovergedrag helemaal zelf nabouwt.
Juist bij die uitzonderingen begint een herontwerp meestal inconsistent aan te voelen.
We hebben het product verder doorgelicht dan alleen de componentenbibliotheek en waardevolle maatwerkinterfaces teruggebracht in de gedeelde taal. Daaronder vielen marketingpagina's, betaalstromen, beloningen, prestaties, personage- en verhaalkaarten, deelvensters, navigatie-elementen, lege toestanden, banners en minder vaak bezochte hulpschermen.
Niet elke uitzondering is verdwenen. Sommige interfaces hebben een sterkere identiteit nodig, omdat ze een feestje, urgentie, zeldzaamheid of status uitdragen. Het verschil is dat die momenten nu voortbouwen op het systeem in plaats van het te negeren.
Minder decoratie, duidelijkere interactie
Het herontwerp schrapt veel effecten die interactief oogden zonder nuttige informatie toe te voegen.
Zware schaduwen staan niet meer op elke kaart. Beweging bij hover is ingetogener. Kleurverlopen zijn voorbehouden aan momenten die baat hebben bij nadruk. Randen geven structuur zonder elk stukje inhoud in nog een kader te stoppen.
Tegelijk zijn echte interactietoestanden duidelijker:
- Geselecteerde opties tonen hun toestand zowel visueel als semantisch.
- De toetsenbordfocus is makkelijker te volgen.
- Interactieve kaarten krijgen een consistente behandeling bij hover en focus.
- Knoppen communiceren hiërarchie via gedeelde varianten.
- Dialoogvensters en menu's maken zich los van de achtergrond zonder los van het product te voelen.
Door minder te decoreren kregen we meer ruimte om de feedback te verbeteren. De interface beweegt minder, maar zegt meer.
Toegankelijkheid hoort bij het visuele systeem
Een designsysteem is onvolledig als het alleen beschrijft hoe componenten eruitzien met een muis.
Tijdens de refactor hebben we focusringen, toetsenbordgedrag, de semantiek van geselecteerde toestanden, contrast en het gedrag van interactieve kaarten opnieuw bekeken. Sommige bedieningselementen geven hun ingedrukte of geselecteerde toestand nu duidelijker door aan hulptechnologie. Verhaalitems die zich als links gedragen, zijn met het toetsenbord te bereiken en te activeren. De focusweergave volgt dezelfde visuele logica in alle gedeelde bedieningselementen.
Deze veranderingen zijn bewust subtiel. Toegankelijkheid moet niet aanvoelen als een aparte modus bovenop het product. Ze moet aanwezig zijn in het standaardgedrag.
Een beter fundament voor wat komt
Het waardevolste resultaat van dit werk is niet een bepaalde tint, radius of schaduw. Het is dat het product nu minder concurrerende antwoorden heeft op dezelfde ontwerpvraag.
Als we een nieuwe functie bouwen, hoeven we niet meer vanaf nul te bepalen hoe een dialoogvenster moet aanvoelen, hoe een invoerveld moet reageren of hoe een geselecteerde kaart moet worden weergegeven. Het systeem geeft die antwoorden al. Dat maakt nieuw werk sneller, maar belangrijker nog: het maakt de ervaring die eruit voortkomt voorspelbaarder.
Consistentie gaat er niet om dat elk scherm er hetzelfde uitziet. Het gaat erom dat mensen een stabiele set verwachtingen krijgen, zodat de inhoud kan veranderen zonder dat de interface onbekend wordt.
Wat we hopen dat je opmerkt
Idealiter in eerste instantie niet veel.
Reverie moet gewoon prettiger lezen, rustiger navigeren en samenhangender aanvoelen als je van ontdekken naar gesprekken, creëren en accounttools gaat. Belangrijke acties moeten sneller opvallen. Secundaire bedieningselementen moeten ophouden met wedijveren om aandacht. Langere sessies moeten visueel minder vermoeiend zijn.
De personages zijn nog steeds expressief. De verhalen zijn nog steeds sfeervol. De momenten die een feestje verdienen, mogen nog steeds levendig zijn.
De interface weet alleen wanneer ze moet spreken - en wanneer ze stil genoeg moet worden zodat al het andere ertoe kan doen.
Het nieuwe designsysteem strekt zich nu uit over de hele Reverie-ervaring. Voelt iets duidelijk beter - of juist nog niet op zijn plek? Dan horen we het graag in onze Discord-community.