Some UI Resources
2025-05-15
Whaaaaa-zaaaaaaap👋🏿
So I've been doing some work polishing my unannounced game's aesthetic and naturally, since I love JRPGs (RPGs are my favorite genre of game in the first place), I'm leaning heavy into that era of games and tapping into many aesthetics associated with the genre.
As well as some that are NOT associated with JRPGs.
But this isn't a post about game aesthetics and why I'm in love with xyz style. It's about some UI stuff I'm doing and the tools I'm using to smash my vision together as violently as possible.
First the Vision
When I'm thinking about how to make a UI, I usually sketch it out first on paper. I want to get a feel for the perspective and vision clutter that the final product would turn out with.
But what if you don't already have a vision? Inspiration is the answer!
Long ago, when I actually still had a soul in this meat husk of a body, I was told by my art teacher that I couldn't turn in my work if I didn't have at least 5 different pictures of reference.
Younger, happier, and brighter me thought that was the stupidest thing he had ever heard. "I already made it. It's right here. I did it without reference. I could see it in my head. Are you dumb?" I would think to myself in a happier and more innocent tone of inner voice.
I don't have aphantasia. It was true that I could see images in my head vividly and I was somewhat upset about people who literally had to speak out loud to think to themselves, telling me how the fuck I'm supposed to do art.
I didn't understand what the point was and so I never did it. But now I do. You gather reference, not to understand what's in your head, but to find what isn't.
If you have an inner world like I do, picture a mountain range. You already have a solid idea with a bunch of abstract triangles, some colors depending on the weather you chose, and whatever else. But you probably didn't think of trees. What kind of trees are in your mountain range? Spruce? Pine? Something stereotypical I'm sure.
But there can be other trees. And the mountains don't have to be triangles. That's why you gather reference. To see the things you don't know. Let them inspire you as much as they guide you.
Here's my Pintrest by the way. You can take a gander of what my style is like, my aesthetic, and pretty much everything else about what I'm trying to make from this alone. It houses all of my reference images. Which is a fucking crime because if this website shuts down, I'm FUCKED.
I'm in the process of moving all my reference images to BeeRef (An open source alternative to PureRef) at this very moment. I encourage you to do the same.
Local is power! Or something like that.
Those Who Came Before
Ok ok that's nice and all. Thanks Luther, for giving me a site that's overflowing with AI. But I need a particular UI and I want it to be like a game that I can't remember!
I gotchu.
Say hello to the UI Database.
A community contributed website dedicated to documenting game UIs. And it's going to save your ass. Need a screen for a button layout? See how the others do it. What about a weapon wheel? Yep. Difficulty Menu? Yes Sir.
When you don't know the exact game, you can just seach the mechanic you want to build from here, and browse till your heart's content.
And if you liked what you saw, support the creator! Eddy is a god and deserve so much more than what he's getting!
And if you can't pay, then at least contribute. If you want to make games, then you obviously play them. Grab some screenshots, and contribute to the site. Especially if you play games with unique UIs. You can help everyone at once.
Drill down
After I'm done glazing indie sites, I tend to focus in on specific information at this point. I look for specific games and specific pieces of UI and build them up into a image board. Once again, I'm using BeeRef for this.
Here's a look at the cursors I'm going for in my game. Since I work in 3D, it's going to be a lot of trial and error to convert these into a way that makes sense with what I'm going for.
And what's super funny about going after specific UI parts like this is that you'll come across others who have already done the majority of the work for you.
Enter - my god-queen - Champy!
Champy's blog is a hidden treasure trove that contains a LOT of JRPG UI design analysis. And she takes screenshots as well as makes clipped edits to make her different points.
Font design, credit screens, ability wheels, Champy fucking does it.
If you don't have your own Champy, that sucks for you, because that means you'll be going into each game, or finding a high quality video with no commentary of that game, and screenshotting the UI wherever you can find it.
There's a lot more to the process that I didn't cover, but that's stuff you wouldn't be able to replicate with just me telling you anyways. Are you really going to remember Menu Open & Closing Easings? Yeah, thought not.
Anyways, I'm outtie!
Later Alligator~ | Luther✌🏿
