My Process
I. Planning
My core goal in creating the UI was to cultivate an eye-catching, classical, arcade-style feeling with the menus.
To do so, I:
-
Conducted research across 20+ popular arcade fighting games to discover themes and provide references
-
Created wireframes of all menus in Figma
-
Juxtaposed light and dark color schemes to draw attention
-
Worked closely with artists, writing accessible documentation to collaborate across disciplines
Figma UI Wireframe Flow + Documentation Samples
II. Prototyping
To complete Strike Back, we first built a prototype of the game in Unity before creating the final version in a custom C++ engine.
Throughout Prototyping, I...
-
Drew custom prototype assets in Procreate
-
Set up menus and UI in Unity using canvases and C# programming
-
Experimented with visual effects such as dynamic health bar colors and glows
-
Hosted several playtests to refine gameplay choices
Prototype Gameplay
III. Final Build
For the final build of Strike Back, I worked closely with the artists on the team to create a more polished look. It was also extremely important to me to remain open to ideas and feedback from other team members, which allowed me to practice good communication habits, as I was working hand in hand with other disciplines alongside being the associate producer.
C++ Build
I Learned About:
1
Scope and Iteration
Throughout development, the overall design of the game changed several times from how many characters are playable, to which systems exist, to the number of moves each character has, and more. I learned how to adapt on the fly and make quality decisions for the direction of the game without overscoping. I also learned to iterate through adjusting the UI to match the state of development.
2
Communication
Team Fuzzy Guard had 13 members, which included students from four different majors. As a designer and producer, I helped in managing communications and creating a positive working environment. I specifically worked closely with the artists on the team, ensuring that their voices were heard and that they were not being overworked. I also helped reach amicable conclusions in cases where members needed to be fired from the team.
3
UI Workflow
I developed an understanding of UI pipelines through learning how to effectively use Figma as well as how to communicate my ideas to the rest of the team. My workflow generally consisted of researching and compiling references, wireframing the UI in Figma, writing documents to explain menu functionality and style guidelines, and then sitting down with the artists to help bring the UI to life.