Hay una segunda versión de todo proyecto que vale la pena contar. La primera versión resuelve el problema. En esta historieta construimos una segunda versión, mucho más elegante y útil.
En esta segunda versión de nuestra app de dados contamos cómo pasamos de la primera versión de la app de escritorio de lanzamiento de dados que hice con mi hija de 6 años, con una interfaz oscura y genérica, a un diseño claro, cálido y conectado visualmente con los juegos de mesa reales a los que acompaña.
Los cambios fueron estéticos y funcionales a la vez, y cada decisión llevó a la siguiente con una lógica que, mirándola en retrospectiva, parece inevitable. 🙂
El punto de partida: una app que funcionaba pero no sentía
La versión original tenía todo lo «técnicamente» necesario. Una ventana de 550 x 700 píxeles. Un fondo degradado radial en azul marino profundo. Una card central con efecto glassmorphism que contenía dos dados en 3D hechos en CSS puro, un contador de total en turquesa brillante con neón, un botón TIRAR en degradado rojo-coral y cinco burbujas de historial.
Funcionaba bien. Los dados giraban, el número aparecía, las partículas doradas explotaban al sacar doble seis. Técnicamente, correcto.
Visualmente, era un diseño de manual. El glassmorphism, los degradados, el neón de color turquesa: vocabulario de interfaz digital de los últimos años, reconocible hasta el punto de ser invisible.
No había nada realmente en esa pantalla que dijera «esto es una app para jugar a La Oca con tu familia en una tarde de domingo». Y eso, para una herramienta pensada exactamente para ese momento, era un problema.
Primer cambio: separar el tamaño de la ventana del tamaño del contenido
La primera petición fue directa: queremos que la aplicación sea más grande. Y la respuesta instintiva de escalar todo proporcionalmente habría sido la equivocada.
Lo que en realidad se necesitaba no era contenido más grande, sino más espacio alrededor del contenido. Espacio que pudiera usarse. Espacio con significado. 😉
Así surgió una decisión de diseño importante: la card de dados se quedó más o menos igual. Similar padding arriba y abajo, parecido a los lados, mismo ancho máximo… Lo que cambió fue la ventana: primero a 750 x 900 píxeles, luego a 1125 x 900. La card flotaba en el centro, igual que antes, pero ahora rodeada de un espacio que pedía ser habitado.
Esta separación entre el tamaño del contenedor y el tamaño del contenido es una de las decisiones más limpias del proyecto. Obliga a pensar en el fondo como un elemento activo, con responsabilidad visual propia, no como el vacío que queda cuando el contenido ya está colocado.
Los blobs y su problema: bonito pero genérico
La primera solución para ese espacio fueron blobs. Formas orgánicas de color, verde bosque, naranja fuerte, rojo ladrillo, amarillo mostaza, con un desenfoque gaussiano de 80 píxeles y una animación suave de deriva que las hacía moverse levemente.
El resultado era atractivo. Moderno. Y completamente desconectado del contexto. XD
El mismo fondo de blobs valdría para una app de meditación, para un dashboard de criptomonedas o para una landing de startup de inteligencia artificial. No decía nada sobre dados, sobre tableros, sobre juegos de mesa. Era decoración pura, sin narrativa.
Había que encontrar algo que hablara el mismo idioma que el juego.
Segundo cambio: el fondo como contexto
La solución llegó con las imágenes reales de los tableros.
Tres fotografías: el tablero de La Oca con su espiral de casillas de colores y sus ocas blancas; el tablero de Parchís con su fondo verde y las caras de animales en las esquinas; el tablero de Serpientes y Escaleras con su naranja intenso y sus escaleras y serpientes entrelazadas.
Al seleccionar el juego, el fondo cambia. No con una transición compleja ni con un efecto elaborado. El cambio es directo: un event listener sobre el selector actualiza el background-image del body. Inmediato. Sin ruido.
Sobre las imágenes, un overlay semitransparente hace dos cosas a la vez: suaviza la imagen para que no compita con la interfaz, y cohesiona el conjunto dándole una tonalidad unificada.
Tercer cambio: el selector de juego
El selector fue el primer cambio funcional. Hasta ese momento, la app lanzaba dados sin saber para qué. Con el selector, ganó contexto y propósito.
Tres opciones con sus emojis correspondientes: La Oca, el Parchís, las Escaleras. Cada opción enlaza a su imagen de fondo. El selector se coloca justo debajo del título, antes de los dados, estableciendo una jerarquía clara de uso: primero eliges el juego, luego tiras. Obvio, ¿no? Pues a veces no tanto.
Desde el punto de vista de diseño, la misión del selector es integrarse sin imponerse. Es un elemento secundario —el juego ya está elegido, lo que importa es tirar— y su tamaño, su peso visual y su posición lo reflejan. Pequeño, claro, funcional.
La decisión de mantenerlo en un tamaño discreto, incluso cuando exploré hacerlo más grande, fue correcta. Los elementos de configuración no deben competir con los elementos de acción.
Cuarto cambio: el giro al tema claro
El cambio más profundo fue la transición del tema oscuro al claro. No fue una decisión arbitraria sino una de coherencia contextual que, al tomarla, parecía clarísima.
Los juegos de mesa son objetos de luz. Sus colores son saturados, primarios, alegres: el rojo brillante del Parchís, el amarillo solar de Escaleras, los verdes vivos de La Oca. Un fondo oscuro comprime esos colores, los aplana, les roba energía. Un fondo claro los amplifica y los deja ser.
Para el tema claro se siguió un sistema de diseño muy concreto: la paleta Blue-Red-Brown, pensada para interfaces con estética cálida, densidad informativa alta y legibilidad sin esfuerzo. Sus principios son claros: fondo de página en cream cálido, nunca blanco puro; cards con fondo blanco o blanco cálido; tipografía oscura de alto contraste; sombras sutiles sin drama; sin glassmorphism (y mira que me gusta últimamente); sin degradados decorativos; colores dentro de la paleta definida.
Cada elemento de la interfaz se tradujo a este nuevo vocabulario.
- El fondo de la card principal pasó del azul semitransparente oscuro al cream intenso, un tono más dorado y visible que el de un dashboard corporativo, pero que mantiene la elegancia sin estridencias.
- El botón TIRAR perdió su degradado y se convirtió en un rojo sólido: más directo, más honesto, más fácil de mantener. El número del total, antes turquesa con text-shadow de neón, pasó a un casi-negro cálido que contrasta limpiamente sobre el cream.
- El título abandonó el dorado decorativo para compartir ese mismo color oscuro: coherencia por encima de ornamento.
- Los dados, que tenían un fondo hueso-amarillento con degradado de tres tonos, pasaron a blanco puro. Sobre el cream de la card, el contraste es exactamente el que debe ser: suficiente para distinguirlos, sin agresividad.
- El panel del Total, antes con glassmorphism, se convirtió en una pequeña card blanca con borde sutil en tono arena.
- Las burbujas del historial pasaron del semitransparente oscuro al azul cielo claro con texto en azul principal.
Lo que aprendimos en el proceso
Este proyecto concentra varias lecciones que vale la pena comentar porque no son evidentes desde el principio.
La primera es que el espacio de fondo no es vacío. Es una decisión de diseño tan activa como el color de un botón. Abrir la ventana sin escalar el contenido fue el gesto que hizo posible todo lo demás.
La segunda es que la coherencia contextual importa más que la coherencia estética. Los blobs eran estéticamente coherentes con el glassmorphism. Pero los tableros reales eran coherentes con el propósito de la app. Y el propósito siempre gana.
La tercera, quizás la más difícil de articular: el carácter visual y la funcionalidad limpia no son opuestos. Esta app tiene dados en 3D, imágenes de tableros reales, un selector con emojis y partículas doradas al sacar doble seis. Y a la vez es directa, legible y sin ruido.
El carácter no es decoración añadida encima de la función. Es la función expresada con intención.
Estado actual y próximos pasos
La aplicación está en un punto sólido. Hace lo que tiene que hacer, lo hace bien y lo hace de una manera que tiene sentido visual y contextual.
La ventana mide 1125 x 900 píxeles. El selector elige entre tres juegos. El fondo cambia con cada elección. La card es cream, los dados son blancos, el botón es rojo y el total es casi negro. El código vive en GitHub, versionado y documentado.
Hay ideas que orbitan para las próximas iteraciones: reconocimiento por voz para pedir «nueva tirada», inclusión de nuevos juegos con dados especiales (Cluedo), y alguna cosa más… 😉
Pero por ahora la app cumple su misión original: ser la alternativa bonita a los veinte sitios con anuncios que aparecen cuando buscas tirar un par de dados online. Y hacerlo rodeada de colores que huelen a tablero de cartón y a tarde de domingo en familia.
Y eso, para una segunda versión, ya es mucho. 🙂
UPDATE: aquí está el Cluedo, con sus dados especiales. Y reconocimiento de voz de regalo.
