I have some UI here that I’ve made for my sword fighting game and by no means am I a UI designer, I’m a builder/modeller. I just want a bit of feedback on these bits of UI since I have little experience. Do they match well? What else could I do to improve them?
Good job! I really liked your work, but something is off with UI elements
-
Right now, the green, blue, and yellow bars are a bit too bright.
-
Try using softer colors like:
- Green:
#88C070
(for health) - Blue:
#7EC8E3
(for energy or mana) - Yellow:
#FFD700
(for XP)
- Green:
-
Also, instead of black boxes, use dark gray with some transparency so it looks cleaner.
-
The avatar box in the bottom left is okay, but a little plain.
-
My Ideas:
-
Put the avatar inside a circle
-
Show the level bar as a progress bar, not just text
-
Use a cleaner font (like
Gotham
orSource Sans
) -
The tiny avatar on top can be replaced with:
- A mini map or
- A compass (showing N, S, E, W)
-
You can move the avatar icon to the top right corner.
Thanks for the feedback! I think the colours are much better (although I’m not too sure on the green personally). Somehow I hadn’t thought of putting the avatar in a circle. Great idea, thank you! I’ve also changed the font to bangers as it looks less boring imo. I’ve got an updated version here:
Just got a few questions though:
For the black boxes, do you mean the stroke outlines?
And what do you mean by showing the level bar as a progress bar? As in have 4 bars and remove the text where it says my level?
- Yes, by black boxes I meant the black stroke outlines around the UI parts. Maybe making them thinner or using a softer color could help them blend better.
- And for the level bar, I meant like a visual progress bar that fills up as you level up, instead of just showing “LEVEL 0” with text. For example, if you’re at level 2 out of 4, the bar could be half full. That kind of thing!
Hope that clears it up! Excited to see the next version.
there should be a way to close the ui in the bottom left and it also blocks the mobile move joystick
Here’s the updated version: Imo I think the borders look weird now but that might just be because I wasn’t used to it. Also I don’t have an idea what the max you can level up to will be but I think it will be decently high. I just feel like maybe a bar for that would be somewhat futile? It’s always something that can be added later if it does seem like a good idea, but thank you.
Oh that’s a fair point actually. I honestly completely forgot about mobile. Where should I put it? I have no knowledge on how to optimise things for mobile whatsoever.
That looks so good! I struggle with making ui and i absolutely suck at it, idk why, but i do. This is 101x better then anything i can make even with a YouTube tutorial.
Thank you so much! I found out today that making UI is actually somewhat complicated lol but I’m sure if you practice it will look great!
I tried so many times to make a simple mute/unmute button for the background music but i just can’t. Atm I have someone else to do my ui but eventually i do want to learn how to get better. Good luck on your game, could you send me the game link when it’s done/in testing stages? Looks like a really cool game.
Could you also by chance tell me how you made your group logo? Did you make it? Hire? Or ai?
Just takes a bit of practice, that’s all. And thank you, of course I’ll send you game the link when it’s done! (If i remember )
The group doesn’t have an updated group logo yet. Its called besieged studios and it has one i made like 2 years ago in Photopea but it was made for simulators so it needs a bit of an update I think.
Lol alright, i can also test the game for you if you want.