Diseñar tanto a nivel conceptual como gráfico el interfaz de usuario para los menús, pantallas de puntuaciones o ayudas visuales para el jugador no es una tarea sencilla y requiere de muchas pruebas.
En este artículo sobre el diseño de UI en videojuegos mostramos dos grandes ejemplos: Persona 5 y Monument Valley. Ahora queremos profundizar un poco más con algunos consejos que pueden ser realmente útiles y que utilizamos constantemente en Gametopia.
Elegir una buena paleta de colores
El color es una poderosa herramienta narrativa y de diseño visual, ya que produce emociones en el jugador.
Elegir una paleta no es fácil, lo importante es empezar con unas preguntas: ¿Cómo es nuestro juego? ¿Violento, amable? ¿Qué emociones quiero despertar en los jugadores? ¿Nostalgia, alegría, miedo? Elige las palabras que mejor definan a tu proyecto y trata de buscar un color acorde a ellas.
En el videojuego The Wolf Among Us de Telltale, arriesgaron con colores morados y rojos que encajaban perfectamente con la historia Noir pero desde un punto de vista colorido de un cómic.
Paletton es una herramienta muy sencilla que te permite generar rápidamente tu paleta de colores.
Las tipografías mejoran la inmersión del jugador en la narrativa.
La tipografía ayuda en la inmersión de la historia
Estar jugando a un juego steampunk y que tenga una tipografía Arial de toda la vida en los menús arruina la experiencia de juego. Hay que dedicar tiempo a encontrar una fuente que encaje tanto en la temática como en el diseño.
La tipografía juego un papel clave en la inmersión del jugador y lo hace de manera más sutil, ya que muchos no se darán cuenta (al igual que pasa al leer un libro), pero se pueden hacer cosas sorprendentes jugando solo con la tipografía.
Es importante reflexionar y elegir las fuentes como hicimos en el paso anterior, pensando en cuáles coincidirán con el tono del proyecto.
Bioshock Infinite es un buen ejemplo de cómo una tipografía ayuda en la inmersión del jugador en el mundo.
A través de webs como 1001 free fonts puedes conseguir tipografías muy interesantes, pero ten cuidado, revisa que la fuente tenga todos los caracteres para los idiomas que necesitas. Muchas tipografías son muy bonitas, pero no tienen acentos o ñ.
Utiliza imágenes para facilitar la lectura
Cuando tenemos que poner mucho texto, por ejemplo, en un resumen de misión o en una ficha de personaje, siempre hay que poner imágenes que inviten al jugador a leer, si no, se asustará con la cantidad de texto y no lo leerá.
Las imágenes no solo deben ser decorativas, deben funcionar bien con las palabras clave que hemos definido para la paleta de colores y fuentes.
Los menús de The Outer Worlds de Obsidian incorporan imágenes para hacer más atractivos los textos.
Presta atención a la jerarquía visual y estructura.
La jerarquía visual consiste en llamar la atención del usuario sobre el elemento más fundamental en el diseño y establecer la importancia del resto de elementos en pantalla.
No solo es un tema de tamaño, también de colores, tipografías y posición. Podemos, por ejemplo, destacar un elemento poniendo la fuente en negrita, o cambiando la fuente, añadiendo un recuadro de otro color y cambiando su alineación respecto al resto.
Batman Arkham Knight tiene un excelente diseño de UI donde todo está bien estructurado y fácil de comprender.
Otro aspecto que ayuda mucho a trabajar en UI es la rejilla o grid, que pronto se convertirá en tu mejor amiga. La rejilla te permitirá organizar el contenido en columnas perfectamente espaciadas. Estas cuadrículas ayudan a la comprensión y navegación, así como mostrar un aspecto más profesional y estructurado.
Ejemplo de estructura con rejilla.
Espero que estos consejos te ayuden a seguir mejorando el apartado UI de tu videojuego, pero, recuerda, lo más importante es tener claro qué es lo que quieres mostrar y cómo.
¿Te ha gustado? ¡Compártelo!
Guionista, diseñador de videojuegos y creador de Gametopia y sus cursos online. Creativo en la agencia de publicidad Flas Marketing y profesor de Guion y diseño de videojuegos en el Master de la Universidad Politécnica de Madrid.
Linkedin - Twitter
