Ejemplos de Wireframes y Composiciones en Minyiu

Los wireframes son más o menos una serie de prototipos gráficos con los que se grafican y distribuye la información en pantalla sin la necesidad de construir elementos estéticos para obtener un resultado aproximado a lo que el usuario experimentaría por la parte del diseño mecánico en un producto. 

Éstos nos ayudan a detectar fallas inesperadas y sirven como punto de partida para la elaboración preliminar de las interfaces finales, también conocidas como composiciones

EJEMPLOS DE WIREFRAMES EN MINYIU

Primer Wireframe del Menú Principal

Esta pantalla delimita el espacio de visión del usuario hacia el centro, donde el botón de jugar aparece como el más importante al estar tan cerca del título y el botón de salir se establece como el punto de menor importancia al estar más alejado de otros. 

Segundo Wireframe del Menú Principal

Al igual que con el wireframe anterior, la segunda revisión del menú principal se concentró en explotar la importancia céntrica de la interfaz al incluir un botón adicional con el que el jugador  pudiera diferenciar entre las dos acciones principales del menú. Esto, al igual que el incremento de las letras del título, ayudan a protagonizar al botón de jugar debido a que las letras de mayor tamaño llaman la atención del jugador y, por ende, 'jugar' es el primer botón con el usuario entra en contacto visualmente.

Primer Wireframe del Menú de Pausa

Este wireframe en particular se agregó una imagen de fondo para observar el contraste entre los elementos del menú y los elementos del juego. Su función es similar al del menú anterior con la excepción de mantener un sistema simétrico entre los cuatro elementos en pantalla. 

Segundo Wireframe del Menú de Pausa

La segunda revisión del wireframe de pausa encontró problemas distintos a los resueltos en la revisión del wireframe del menú principal; éstos siendo la incompatibilidad gráfica entre el título del menú y los botones. Para solucionarlo, el título del menú si hizo más prominente y se ajustó el color de los botones a uno un poco más uniforme.

Wireframe de Diálogos

El wireframe de diálogos sirvió antes que nada como un posicionador del cuadro de texto en pantalla y, en retrospectiva, ayudó a relocalizar la posición del jugador para una vista más 'placentera' para el usuario.

EJEMPLOS DE COMPOSICIONES EN MINYIU

Menú Principal

Tomando como referencia a los wireframes anteriores, se decidió elaborar una composición visual posible para el mnú principal del videojuego. Ésta consiste de letras claras con un fondo oscuro para resaltar los botones y de un gradiente de celeste a azul marino para representar harmonía en colores.

Pausa

La composición del menú de pausa, por otro lado, vió un ajuste artístico a la compatbilidad de los botones a través de una pequeña ventanilla trasera en colores oscuros para evitar conflictos con los colores naturales del juego.