# 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í:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1751990195049/f7c876e1-43a5-4b94-9a59-bfcc46d2e6b7.png align="center")

### 🧠 ¿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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1751990334419/ee770e8c-adcf-483e-9f07-0be7f1af749a.png align="center")

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](https://www.notion.so/grehtcreativa/Gu-a-de-Handoff-22a52d8721278040b6fcdf0eb697f7ec?source=copy_link))

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.

¿Quieres ver cómo evoluciona *Respuesta Correcta*?  
👉 Suscríbete al blog o sígueme en [LinkedIn](http://www.linkedin.com/in/grehtlingmar-fernandez) para no perderte las siguientes entregas.