Cyberpunk Tactics RPG - User Interface Design
Project Overview:
For this project, I set out to create the 'Big 3' UI screens for a tactics RPG game with a cyberpunk aesthetic. I met with a mentor once a week to help refine my designs over 6 weeks. The 6-week process consisted of initial conception (mood board, synonym list, elevator pitch), sketching, wireframing, and multiple art passes. The result is a well-refined set of 3 UI screens: The HUD, the Inventory Screen (in my case, a Character Information Screen), and the Modal (of which I have created 2 examples).
Mood Board:
Synonym List & Elevator Pitch:
Initial Sketches:
HUD
Character Information
Modal
What was successful:
The process of mood boarding with intent and developing a synonyms list/ elevator pitch helped to give me a lighthouse to look towards as I moved through the sketching, wireframing, and art passes. Taking the time to define the tropes and UX problems of similar games gave me a base to build my sketches and wireframes. With the HUD specifically, I could deviate from the norm of most tactics games and draw inspiration from other game genres that do it better (i.e., Starcraft, Diablo). This resulted in a unique HUD that unsuspectingly works well in the tactics RPG genre.
Wireframes:
HUD
Character Information
Modal
What needed work:
After my first art pass, it was clear that I had done some 'over-designing.' I added too many extra design elements that did not add to the design but distracted the eye. After discussing with my mentor, I did an art pass 'from the ground up,' creating a more focused design based on the good UX bones I had built in the wireframes. This helped me to get back to the basics and create a design that helps move the user's eye through the screen rather than distract them with overly designed elements.
Final UI:
HUD
Character Information Screen
Item Information Modal
Character Information Modal
