Videogame UI
Mistborn HUD
Proyecto de diseño de HUD para un videojuego ficticio basado en el libro Mistborn de Brandon Sanderson.
Rol
Diseñador UI
Herramientas
- Figma
- Illustrator
Tiempo
Abril 2025 - Junio 2025
Descripción general
Cree esta interfaz de videojuego pensando en practicar mis habilidades de diseño en un medio que no habia diseñado anteriormente, además de repasar las herramientas de autolayout y componentes de figma.
Consideré el estilo de juego como uno de acción con uso de poderes, que fuera reflejado dentro de la propia interfaz y fuera clara de comprender.
Mapa de navegación
Para comenzar el diseño, cree un mapa de navegación basandome en el flujo entre cada pantalla de un videojuego de este mismo estilo, considerando las pantallas de inicio, configuración, cargar partida e inventario.
Referentes
Considerando el mapa de navegación, realicé una búsqueda de referentes que me permitiera tener una guia visual de cual es el estándar de cada una de las pantallas.
Guia de estilo
Para generar una guia de estilo, tomé tipografías que fueran serif y tonos café basandome en la atmosfera del libro en que se basa.
En cuanto a los iconos, tomé la simbología del propio libro para los poderes y los botones y ubicación estándar de la mayoría de juegos con interacciones similares.
Wireframes
Ver Wireframes en FigmaAntes de comenzar el mockup, diseñé un bosquejo de las 6 pantallas mas importandes dentro de la navegación, siendo estas la de inicio, configuración, HUD, rueda de poderes e inventario.
Mockups
Ver Mockups en FigmaApliqué los códigos gráficos y rearmé cada pantalla añadiendo el contenido correspondiente por cada página.
El cambio más significativo que apliqué fue el fondo, el cual consiste en llamas, haciendo referencia al mundo extremadamente caluroso en que se desarrolla el libro.
Los render de base para la sección de HUD los armé tomando assets gratuitos, pero solo dejandolos como base.
Menu principal
Configuración
HUD en el juego
Inventario
