How could I improve my Menu and other UI's Design?

So, I have been working on a revamp to a menu for one of my games, and I have a few pictures. Here are a few pictures.

Please keep in mind these are meant to look like pixel art, as that’s the style I am going for my game.

Here is a link to my game ( In case you need it )

Edit: UI’s are in the Game Now, and here are a few more updated pics





The main things I changed are:

  • Moved Images down to not be on the top bar
  • Changed Color of Text and Place in Controls

Notes:

  • Grayed out text means my cursor was hovering over it.
  • I do know the issue with the select button being called a jump button on the controller controls, so no need to tell me
3 Likes

The controller controls UI is hard to read. Try to put all the text outside of the controller pic and have arrows pointing to each corresponding button/stick.

5 Likes

It’s a nice style, the buttons and all look very appealing (I really hope they’re animated, they’d look really good!).

The grey background however doesn’t quite match the pixel art theme, you could try giving it a light gradient, through pixels.

Another thing you could improve is your margin, the Stud’s text and the bars on the top in the last image are too close to the edges! Keep a constant margin and space your elements better (again, the bars and the buttons near them)

Mind moving all the UI lower? The first two UI is overlaying with the top bar.

1 Like

Make the writing clearer but besides that I like the style.

I didn’t move the text out the image, but I did try to make it more visible by changing the colors as well as not having text over lap with colors similar to it. Does it look better?

Alright, I did that. Do you see any more issues?

Did you mean the writing on the controls? If so, I did a bit of that.

I haven’t really been able to change the gradient, but I have moved the things down from the images. Any more issues?

“Jump” is a bit off sicne the J is over the dpad

It should still be moved lower, remember that your margin should ideally from the top bar, as it already has buttons in it.

Also, the spacing between different elements is still off. You should separate Stud’s In Time and the buttons enough so they cover more of the space at the bottom (but don’t invade the margin at the bottom!), groups of similar elements must be appropriately spaced from other groups (here, the text vs the buttons).

I’d say the same thing is applicable for the pause and the other button right below the XP bars, they’re too close to the bars and too far away from each other. They also don’t aptly express what they are, have you considered a currency/XP icon?