Diseñar un Reverie más sereno: del chat a todo el producto

Si has abierto una conversación durante los últimos días, quizá hayas notado que algo se siente diferente.

La interfaz del chat se volvió un poco más serena. Los mensajes son más fáciles de leer, los controles se sienten más ligeros y los paneles y diálogos ya no compiten tanto con la conversación. Nada se ha movido a un lugar desconocido, pero el espacio alrededor de tus personajes empezó a sentirse más tranquilo.

Empezamos por el chat porque es donde muchas personas pasan más tiempo en Reverie. También era el mejor lugar para poner a prueba la pregunta que guía este rediseño: ¿cómo debería sentirse una interfaz cuando debe seguir siendo cómoda durante toda una conversación, y no limitarse a causar una buena primera impresión?

Lo que viste allí no era un cambio aislado. Era la primera parte visible de un nuevo sistema de diseño, y ahora lo hemos extendido a todo el producto: desde el descubrimiento y las páginas de personajes hasta las herramientas de creación, las historias, los pagos, las recompensas, los ajustes y esas pequeñas pantallas de utilidad que conectan unas áreas con otras.

Reverie siempre ha sido un producto expresivo.

Esa personalidad aparecía en todas partes: bordes marcados, sombras visibles, tarjetas superpuestas, controles llenos de color y superficies que querían sentirse como objetos en lugar de simples rectángulos en una pantalla. Le daban calidez al producto y hacían que se reconociera como nuestro.

Pero un lenguaje visual puede ser adecuado para una etapa del producto y volverse demasiado pesado para la siguiente.

A medida que Reverie crecía, la interfaz tenía que sostener mucho más que el descubrimiento. Las personas pasaban más tiempo en las conversaciones, gestionaban personajes, escribían historias, comparaban planes, configuraban herramientas avanzadas y recorrían flujos cada vez más complejos. Los mismos detalles decorativos que daban personalidad a una página de presentación podían convertirse en ruido visual al repetirse en cada diálogo, tarjeta, menú y botón.

No rediseñamos Reverie para hacerlo menos distintivo. Lo hicimos para que esa distinción naciera de la propia experiencia.

Una interfaz más ligera, no más fría

“Ligero” puede convertirse fácilmente en sinónimo de fondos blancos, texto gris demasiado fino y componentes con tan poca presencia que todo parece inacabado. Ese nunca fue el objetivo.

El nuevo sistema es más sereno, pero sigue siendo cálido.

Alejamos el lienzo del blanco puro y lo llevamos hacia superficies neutras con un matiz suave. El texto es más oscuro y un poco más firme cuando la lectura prolongada lo requiere. Los bordes son más discretos, las sombras menos profundas y el color se usa con mayor intención. El resultado tiene menos peso visual sin perder la sensación de que Reverie es un lugar hecho para historias y relaciones.

Este equilibrio era especialmente importante en el roleplay. Una conversación no es un panel de ajustes. Las personas leen mensajes largos, perciben cambios sutiles de tono y a menudo permanecen mucho tiempo en la misma vista. La tipografía y el color de fondo deben seguir siendo cómodos después de veinte minutos, no solo verse limpios en una captura de pantalla.

Una tipografía preparada para lecturas largas

Uno de los cambios más importantes es también uno de los menos espectaculares: reforzamos la jerarquía tipográfica.

Los titulares grandes conservan su expresividad, pero el texto principal tiene ahora más seguridad visual. Las etiquetas importantes, la navegación y las acciones usan pesos más fáciles de recorrer con la mirada. El texto secundario sigue siendo secundario, pero ya no es tan tenue que leerlo suponga un esfuerzo.

El principio es sencillo:

Los textos largos deben sentirse serenos y sólidos.
Las acciones deben reconocerse antes de leer cada etiqueta.
La información de apoyo debe retroceder sin desaparecer.
Una página debe seguir siendo legible en distintas pantallas, temas y condiciones de luz.

Una buena tipografía no exige atención. Hace que sea más fácil mantenerla.

Un solo lenguaje de componentes en todo el producto

Esto no fue un cambio de aspecto página por página. Reconstruimos el lenguaje compartido de componentes que sostiene el producto.

Botones, tarjetas, diálogos, menús, pestañas, controles de formulario, tablas, tooltips, avisos, cajones, popovers y elementos de navegación comparten ahora las mismas reglas para:

radio de las esquinas
contraste de los bordes
color de las superficies
elevación
indicación de foco
estados al pasar el cursor y al pulsar
peso tipográfico
espaciado
color semántico

Esa coherencia importa más que cualquier decisión visual aislada. Cuando una misma acción se ve y se comporta igual en todas partes, se necesita menos esfuerzo para interpretar la interfaz. Una acción destructiva parece destructiva. Una opción seleccionada parece seleccionada. Una superficie flotante se distingue de la página inferior. Una acción principal resulta fácil de encontrar sin que todos los botones compitan por ser protagonistas.

También incorporamos variantes semánticas más claras para estados destacados y de éxito. Ahora forman parte del sistema compartido, en lugar de ser degradados o colores personalizados que cada función recrea por su cuenta.

La parte difícil: encontrar las excepciones

Actualizar el componente de botón no actualiza automáticamente todos los botones.

Con el tiempo, los productos acumulan decisiones locales: una tarjeta de precios con su propio borde, un diálogo de recompensa con un resplandor personalizado, una ventana para compartir con un fondo especial, una acción escondida con un degradado privado o una tarjeta de función que reconstruye desde cero su comportamiento al pasar el cursor.

Esas excepciones son las que suelen hacer que un rediseño termine sintiéndose incoherente.

Nuestra revisión fue más allá de la biblioteca de componentes. Integramos en el lenguaje común aquellas interfaces personalizadas que merecía la pena ajustar. Esto incluyó experiencias de marketing, flujos de pago, recompensas, logros, tarjetas de personajes e historias, diálogos para compartir, controles de navegación, estados vacíos, banners y pantallas de utilidad menos visitadas.

No eliminamos todas las excepciones. Algunas interfaces necesitan una identidad más intensa porque comunican celebración, urgencia, rareza o estado. La diferencia es que ahora esos momentos amplían el sistema en lugar de ignorarlo.

Menos decoración, interacciones más claras

El rediseño elimina muchos efectos que parecían interactivos sin aportar información útil.

Ya no hay sombras pesadas en cada tarjeta. El movimiento al pasar el cursor es más contenido. Los degradados se reservan para los momentos que se benefician del énfasis. Los bordes definen la estructura sin encerrar cada fragmento de contenido en otra caja.

Al mismo tiempo, los estados de interacción reales son más claros:

Las opciones seleccionadas expresan su estado de forma visual y semántica.
El foco del teclado es más fácil de seguir.
Las tarjetas interactivas comparten un tratamiento coherente de foco y hover.
Los botones comunican su jerarquía mediante variantes compartidas.
Los diálogos y menús se separan del fondo sin sentirse ajenos al producto.

Al reducir la decoración, ganamos espacio para mejorar la respuesta. La interfaz se mueve menos, pero comunica más.

La accesibilidad forma parte del sistema visual

Un sistema de diseño está incompleto si solo describe el aspecto de los componentes cuando se usa un ratón.

Durante la refactorización revisamos los anillos de foco, el comportamiento con teclado, la semántica de selección, el contraste y la conducta de las tarjetas interactivas. Algunos controles comunican ahora con mayor claridad a las tecnologías de asistencia si están pulsados o seleccionados. Los elementos de historia que actúan como enlaces pueden recibir foco y activarse con el teclado. El tratamiento del foco sigue la misma lógica visual en todos los controles compartidos.

Estos cambios son deliberadamente sutiles. La accesibilidad no debería sentirse como un modo separado colocado encima del producto. Debe formar parte del comportamiento predeterminado.

Una base mejor para lo que viene

El resultado más valioso de este trabajo no es un tono, un radio o una sombra concretos. Es que el producto tiene ahora menos respuestas contradictorias a la misma pregunta de diseño.

Cuando creamos una función nueva, ya no tenemos que decidir desde cero cómo debe sentirse un diálogo, cómo debe responder un campo o cómo representar una tarjeta seleccionada. El sistema ya ofrece esas respuestas. Eso acelera el trabajo y, aún más importante, hace que la experiencia final sea más predecible.

La coherencia no consiste en hacer que todas las pantallas parezcan iguales. Consiste en ofrecer expectativas estables para que el contenido pueda cambiar sin que la interfaz resulte desconocida.

Lo que esperamos que notes

Idealmente, no demasiado al principio.

Reverie debería sentirse simplemente más fácil de leer, más sereno al navegar y más coherente cuando pasas del descubrimiento a la conversación, la creación y las herramientas de cuenta. Las acciones importantes deberían destacar antes. Los controles secundarios deberían dejar de competir por tu atención. Las sesiones largas deberían cansar menos la vista.

Los personajes siguen siendo expresivos. Las historias siguen teniendo atmósfera. Los momentos que merecen celebrarse pueden seguir siendo intensos.

La interfaz simplemente sabe mejor cuándo hablar y cuándo guardar el silencio necesario para que todo lo demás importe.

El nuevo sistema de diseño ya se extiende por toda la experiencia de Reverie. Si algo se siente especialmente mejor —o todavía fuera de lugar—, nos encantará conocer tu opinión en nuestra comunidad de Discord.