The Maestros - Evolving our UI Visual Language
Published 3 years ago
Lessons Learned in UI/UX design when polishing an RTS or release.
This is a small piece of an article about UI/UX Design for The Maestros. The complete original copy of this article can be found here:
When unifying our design language, we made sure that our coloration of elements was consistent across the board – black text on decorative buttons for clickable elements, yellow text for dynamically passed information such as player level or games played, and white for alert or information text. We’ve downsized all of the game buttons for a more modern design and even shifted our entire main menu to the left side of the screen to accommodate the future implementation of submenus in an effort to minimize the number key presses a player has to make to jump into a game.
An interesting and fairly recent example of this is the addition of banners to the menus. Whenever I go through a redesign of a menu, I take a catalog of all of the elements I need to display, and try different layout combinations to find what fits. To take a term from the film and theatre industries, I call this step in the process “blocking,” similar to when a director determines where actors will stand and move around a set for greatest dramatic effect or proper sightlines. During the redesign of the lobby screen, I tried about 7 different configurations to determine the most optimal layout. In one of these configurations I positioned the red team and blue team player lists at the top of the screen, stretching horizontally across the top of the screen.
This, on top of the fact that we’re designing for 16:9 screens, didn’t leave us with a lot of vertical space for the red and blue team header text above the player lists. On the flip side, the lists were overly wide for the information we wanted to display, so I took advantage of this by creating vertical colored banners to represent the teams. In the end, I reverted to a variation of the original layout, but the banners carried over from the variation before because, frankly, they look dope. In fact, it was that design change that influenced the addition of menu banners across the board.
And just as a bonus gif, here’s our new loading screen design :D
Mark Yampolsky
Game Developer - Designer