Advice on my UI?

Make this part transparent.

image

It just feels weird having the character against the grey.

1 Like

Fully or just enough to see through with a gray tint? Just trying to clarify for the OP.

I’d probably make the numbers left aligned rather than center aligned, it looks a bit strange imo.

The numbers I'm talking about

image

I’d also suggest making the ‘Professional’ text underneath the name left aligned underneath the name, maybe even put it in some sort of box to show it’s a tag / title.

Sorry perhaps I needed to be clearer. The “X” button (including the red part not just the text “X”) should be smaller than the ribbon bar its on. It should be “inside” you could say. Refer to the picture I posted earlier of my Shop UI.

This might seem like a minor problem but if you look at the view achievements button, the value (lightness) of the white text is the same value as the yellow surrounding it. This makes it really hard to see on desktop computers, and i imagine it would be even harder to see on a laptop or phone. I heavily recommend making it either the same grey as the text surrounding it or just black.

just to give you an idea of how much easier it is to see with dark text,
lighttext
darktext

2 Likes

It may be a good idea to mess with the image endpoint some - it feels a tad off from the rest of the UI. Initially I couldn’t tell that there was more to the grey bar on the left of the image.

1 Like

In addition to everything everyone else has said (which I agree with), I suggest:

  • Move the money graphics so that they are horizontally aligned with the middle of the Achievements graphics.
  • Maybe make the money graphics bigger so they fill more space? I don’t know how that would look.
  • Make the exit button (or the whole top bar) either slightly shorter or extend it so that it is more square.
  • Change the font on the exit button to something that is more symmetrical so it looks less like a font and more like a symbol.

Adding onto what 2Hex, stated. Even though the Tags text likely already has the same properties as the adjacent text, It’s always important to remember optically balancing is more important then mathematically balancing it. I’m not the best working with UI design , but I thought I might as well mention this while I’m browsing :slightly_smiling_face:

1 Like

Little small thing here but I recommend putting the view achievements where the 0/10 is and the 0/10 where the view achievements is. From there, make sure the top of the View Achievements button is aligned with the top of the + button next to the money.

And as RBZs said, you should either center both the title and the number (i.e. “Games” and 879) or make them both from the left.

2 Likes