Wireframes

Un wireframe es una herramienta de diseño que nos permite distribuir el espacio de un interfaz antes de empezar a diseñarla como tal. Haciendo un wireframe implica conocer la proporción de la página/ventana y los mensajes que se pretenden comunicar.

El diseño de un wireframe es un proceso simple, pues sólo basta con distribuir los espacios de manera funcional y proporcional para que todas las personas trabajando en el proyecto tengan la misma idea de las dimensiones del proyecto final. A continuación mostraré 3 wireframes como ejemplo:

Pantalla de juego

En el wireframe anterior se puede ver la distribución espacial de los elementos gráficos de la interfaz. Esta distribución de espacios puede funcionar para que se tenga una idea general del proyecto y finalmente se elabore sin perder tiempo en intentos de diseño que pueden fracasar. Cada elemento explicado a detalle:

  1. - Zona segura. Este espacio permanecerá negro como garantía de que la zona de juego no se verá afectada si la pantalla no es del tamaño adecuado.
  2. Espacio del juego. En este espacio el jugador podrá moverse y ver a su personaje.
  3. Mini mapa. En este espacio estará ubicado un mini mapa que muestre el progreso del oponente.
  4. Información básica. En este espacio se verá el tipo de arma que se tiene equipado así como las solicitudes pendientes, que pueden ser de pausa o de cambio de arma.
  5. Marco. Este espacio sirve para envolver el área de juego y complementar a la composición visual. Después de un rato sin usar el interfaz, este bajará su opacidad y se verá transparente para despejar la zona de juego.

Estas representaciones gráficas sirven para todo tipo de pantallas:

Menú de pausa
  1. - Nombre de la pantalla. En esta pantalla se colocará el nombre del interfaz en uso.
  2. Botones de opción. Estos botones mostrarán las opciones disponibles dentro de este menú.
  3. Espacio negativo. Esta zona llevará un color tenue que sea amigable con el ojo humano, pues esta pantalla pretende brindar tranquilidad al jugador.
  4. Zona segura. Este espacio permanecerá negro como garantía de que la zona de juego no se verá afectada si la pantalla no es del tamaño adecuado.
Pantalla de inicio
  1. - Logo del juego. En esta parte se colocará el logo del juego.
  2. Botones de opciones. En estos espacios se colocarán los botones con las opciones disponibles dentro de esta pantalla.
  3. Salir. En este cuadro se encontrará el botón para cerrar el juego.
  4. Preview. En este espacio se mostrará un video de como se juega para preparar al jugador antes de que inicie el juego.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.