UIUX Design: DG21 FIGHTERS
Created as an assignment to design a UIUX prototype for multiple screens of a faux 2D Mobile Fighter, DG21 FIGHTERS.
This project involved designing multiple UI screens around the provided assets (characters and logo art, which were pre-created by the lecturer) and then animating their transitions via Adobe XD's prototype function.
Download the XD working file below, or scroll further to learn more about this project.
Programs used:
- Photoshop (UI elements design)
- Adobe XD (wireframing and prototyping)
Research, References, and Inspiration
As a first step, I looked for references and inspiration of how other games handled their UIUX elements for the relevant areas in this game. These areas include the Main Menu, Friends List, Shop/"Gacha", Character Select, and in-game Fighting Screen. My first point of reference were games I'm directly familiar with and whose UI I really enjoyed: Guilty Gear Strive by Arc System Works was my largest inspiration for its main menu elements (in addition to being a fighting game itself), and Alchemy Stars by Tourdog Studios handled its friendlist in a way that I thought worked really well.
I used this research as points of reference for how UI is 'commonly' designed and what are the staple elements or styles that make it work, while also thinking about how I can push these designs to better fit the aesthetic and theme of the DG21 FIGHTERS game.
To me, a big part of UIUX design is keeping everything practical while making it flavorful and stylish to fit the theme of the game itself.
Development: Wireframes
Before designing the actual individual UI elements, I started brainstorming layout ideas via greyboxing and simple wireframing for the different screens. This are rough concepts for how each individual screen could possibly look like, largely based off the above research I had done prior. Wireframing and sketching ideas is also the phase where I explored different possibilities, and begun to draft a rough vision of how each screen may animate or transition. This thought process would come in handy during the prototyping and general XD work itself later!
Development: Designing the Screens
Based off the ideas from the wireframes, I finalized the designs and created each individual screen. Certain elements, like the milipede-inspired sidebar, had to be created manually via photoshop, but most buttons and shapes were made using the features of Adobe XD itself. This also made it easier to iterate and adjust designs without too much cross-application hassle.
From here, all that's left was to connect all the different interactive elements to one another using the prototype function, and using auto-animate to create seamless transitions between each screen.
Final Prototyping
Final Thoughts
With all that, the project was done fulfilling the design requirements of designing the UIUX elements for this faux mobile fighter.
As this was my first time using Adobe XD for a project, it was a fulfilling learning experience and I got to create proper transitions for what the prototype UIUX for a game would look like, as opposed to just designing individual static screens. There are same areas which I feel could have used more improvement (the Gacha section in particular could use more original ideas), but putting into practice different considerations for practicality and design allowed me to apply the same mindset to other projects I did after.
All in all, I'm satisfied with the way this prototype turned out, and perhaps I'll expand on the ideas showcased here for an even more robust showcase that can include other menus and screens.