Semana 4 – Darle alma al juego

Después de bocetar la estructura general del juego con wireframes, llegó uno de mis momentos favoritos del proceso: empezar a vestir las pantallas, a darles ritmo visual, carácter y emoción.

Diseñar un juego implica mucho más que elegir colores y tipografías. Implica pensar cómo se siente la experiencia, qué tono transmite, y qué tipo de conexión quiero que tenga el jugador desde la primera pantalla.

🎨 La intención visual

Para “Respuesta Correcta” quería un diseño que fuera:

• Divertido pero no infantil

• Ligero, para que no distraiga del contenido

• Accesible y funcional en pantalla móvil

• Capaz de guiar la atención con claridad visual

Comencé trabajando en media fidelidad, donde ya definí espaciados, jerarquías, elementos UI, y empecé a esbozar el sistema visual del juego:
botones, tarjetas de respuestas, estilo de íconos, transiciones y retroalimentaciones.

También probé varias combinaciones de paletas de color hasta dar con una que evocara energía y ganas de jugar, sin saturar ni perder claridad. (Dato: evité el verde vibrante a propósito, buscando un tono más fresco y propio.) Te muestro un poco del UI Kit que definí:

🧠 ¿Qué decisiones tomé como diseñadora UX/UI?

• Incorporé indicadores visuales claros para respuestas correctas e incorrectas.

• Opté por componentes UI reutilizables, pensando en la escalabilidad.

• Usé una tipografía redondeada y legible, que comunica juego sin infantilizar.

• Definí un sistema de estados para cada botón y elemento (hover, selección, feedback).

• Priorizo la accesibilidad visual: contraste, tamaño de tipografías y jerarquías claras.

Todo esto ya empezó a consolidar el lenguaje visual de la app, base para el diseño en alta fidelidad y para lo que recibirá el equipo de desarrollo.

👀 Verificando accesibilidad con Stark en Figma

Una vez que definí los primeros elementos visuales en media fidelidad, validé que el diseño no solo se viera bien, sino que fuera accesible para todos.

Para eso, utilicé el plugin Stark – Contrast & Accessibility Checker dentro de Figma, que permite:

• Verificar tamaños de fuente recomendados.

• Evaluar contraste entre texto y fondo según los estándares WCAG.

• Obtener sugerencias para mejorar la legibilidad y el cumplimiento de accesibilidad.

📊 Resultados destacados:

• ✅ Tipografía mínima de 15px y 20px para botones y respuestas.

• ✅ Contraste aprobado para texto normal y texto grande según los niveles AA y AAA.

• ✅ Feedback positivo del plugin: “Looks good! Nothing to suggest.”

🖼️ Aquí un vistazo al proceso:

Esto demuestra cómo cuidé cada detalle del sistema visual, no solo desde lo estético, sino desde la inclusión y la experiencia real de uso.

🎯 Resultado de esta semana

✅ Diseño en media fidelidad para todas las pantallas del MVP
✅ Paleta de colores definida
✅ Sistema UI preliminar armado
✅ Estilo visual validado con usuarios cercanos
✅ Preparación para la siguiente etapa: alta fidelidad + guía de handoff (puedes ojearla en mi Notion)

Esta semana me dediqué a encontrar el alma visual del juego.
Convertir ideas en experiencias no es magia, es decisión, coherencia y empatía.

Si estás en proceso de diseñar un producto, preguntate:
¿Qué emoción quiero que sienta la persona cuando use esto?

La próxima semana te mostraré cómo llevé estos diseños a alta fidelidad y cómo preparé el material para los desarrolladores.

¿Querés ver cómo evoluciona Respuesta Correcta?
👉 Suscríbete al blog o sígueme en LinkedIn para no perderte las siguientes entregas.