Heartdive UI Concept
Personal Project
Tools Used:
Figma
Picrew
Overview:
A personal project with the purpose of practicing creating a stylized RPG pause menu, inspired by the stylish nature of the Persona series (specifically Persona 5 and Persona 3 Reload) and some elements of Kingdom Hearts.
Mood Board
The visual inspiration I had for this this project was based on games like Persona and Kingdom Hearts. I wanted to channel the use of color and dynamic, visually engaging shapes.
Initial Sketch
I like to sketch out mock ideas to better visualize what I'd like to design once I get in any software. I use it as a way to guide and constrain myself to the general design I have in mind. I also leave notes for myself to keep track of certain elements.
Figma Wireframe
Style Guide
I found this combination to be closest to design "feel" suited this project best! The colors especially were fun to mess around with, but considering the heart imagery I wanted to find a palette that would most compliment that! I also knew I wanted a font that felt both rounded but this with enough sharpness to go along with the potentially angular layout!
UI Components
This sheet is a frame made within figma that collects each shape I made to create the final resulting design. You'll see that there is a lot of use of gradients, layering, drop shadows, and colored strokes certain assets. The character and background art were not created by me, as noted in the sheet above!
No Art/Text Version
For this screen I laid out what every option/button would look like if they were selected. The wireframe shown earlier served as a basis for how information and assets would be laid out, and I tinkered a lot with angling, layering, colors, opacity/gradients, and stroke weights to try and get a result that felt true enough to my initial design.
No Art Version
The added text more accurately portrays how the player would see the screen hovering over a specific option. Firstly, the large numbers and text to the left that display which "number" option the player is hovering. Secondly, there is the bottom right, displaying a short description of the option being hovered over.
Final Product
I added in custom art and also added a color filter over it to ensure it blended better with the surrounding colors and shapes.