It’s Lucas (designer/programmer) here to show off the 4th-wall-breaking Pause Menu. Maybe it’s my background in web development but I love a solid, usable, juicy UI. Our process on this Pause Menu feature could be fun to see and was kind of textbook design and implementation so I thought I’d share a bit about it for all the gamedevs out there.
https://store.steampowered.com/app/943140/Sparklite/
We were working with an outside programmer-friend and both of our artists on this, so we wanted requirements to be pretty solid to avoid miscommunication between the team. To do that, we created wireframes in Figma, which is mostly a tool for mobile app prototypes and website interface design. But it worked really well at creating a clickable wireframe. I actually even use Figma for some simple game design “paper” prototypes.
In the video above you can see we referenced Hyper Light Drifter for the audio meters. We are big believers in using references to find out how other people have tackled similar problems and understand UI design patterns. So, once we had the wireframes set up in Figma, Rafael did a rough mockup of a style we could use.
Then once we approved it, he filled out and added tweens, and finally, art that our programmer could import and reference when implementing UI tweening.
I’m sure our programmer could talk about all the little hurdles along the way, (including that custom font) but we can save that for another post. We are super happy with how our team worked together to produce this UI and we think it turned out great.
Keep up to date by joining our Discord Server and following #sparklite
https://discord.gg/merge