Thoughts on UI?

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?

7 Likes

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)
  • 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 or Source 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.

3 Likes

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?

3 Likes
  • 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. :smile:

3 Likes

there should be a way to close the ui in the bottom left and it also blocks the mobile move joystick

4 Likes

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.

2 Likes

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.

1 Like

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.

1 Like

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!

1 Like

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.

1 Like

Could you also by chance tell me how you made your group logo? Did you make it? Hire? Or ai?

1 Like

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 :skull:)

1 Like

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.

1 Like

Lol alright, i can also test the game for you if you want.

1 Like