[UI Advice] Can I get some advice on my UIs

I was curious if I can get some advice on my UIs I’m just not certain which would look this any recommendations apart from color change here are my two example so far.


Dark Or Light Theme is first after that what would you guys recommend me add or fix.

6 Likes

The title part looks pretty great to me. What you have inside looks a bit weird though but it’s some light work.

  1. The health bar isn’t centered in your second picture (guessing you fixed it afterwards).
  2. You shouldn’t have arbitrary text/frames like this either. Try to have these things labeled or attached to something.
  3. Bank and wallet text labels are not aligned. Try using the same offset on both TextLabels.
  4. You probably shouldn’t include menu in your “information” box and/or leave it hanging it like that. You should make it look more like a button instead of just floating text.
  5. The player name and health are not really

I’m not sure if this is a me thing but I really dislike having to look at my health bar anywhere but the top right (this change was enough as it is). You can choose to keep both but it’s just a duplicate of what’s already there. The same goes for the player name box and their icon. Try using this space for something else or removing it making the information box more concise.

If you want to get all cool and stuff, you can turn the “Information” box into a button and have it TweenSize the bottom content and turn the Menu button into a button that looks similar to the Information bar. Keeping all three objects in a frame that’s formatted with a UIListLayout, you can get a really nifty effect with the tweening.

3 Likes

Alternative To Player Image


Good thing I remember seeing this article filled with useful web API. Perhaps you should switch to one of the images which has a close-up view on the player:

-- Suggested line:
local userHeadshotId = "https://www.roblox.com/headshot-thumbnail/image?userId=" .. player.UserId .. "&width=420&height=420&format=png"
2 Likes

You should give menu its own box.

1 Like

There is an existing API for obtainting user thumbnails. As seen in the API page, there is a enum passed when specifically getting the Headshot variation.

4 Likes

I like the dark theme, but the bank and wallet icon are too dark. Consider making them white, otherwise I’d suggest what @Qxest said about the Band and wallet text alignment.

FPSVision, hello! :smile: :wave:
I can critique your light theme UI, although it is very nice. :+1:

  • The UI overall is not consistent
    • This can mean how the “Information” text is a different color-shade than the rest of the text, or how the “health” text is shown on the dark theme but not light; and maybe how the user profile is shown on the dark theme but not light theme
  • Make the themes fit in together
    • This can mean how the “Menu” text is much larger than the “Bank/Wallet” text - move the menu above the “Bank” text, make the “Menu” text the same size as “Bank/Wallet” and slightly extend the UI to fit it in more. If the “Menu” text is supposed to be clicked, add a dark-theme background

Other than that, it’s pretty nice. I would prefer the dark theme.

Cool UI, but I have one suggestion:

In my opinion, you should remove the name tag as it’s redundant and it could be used for other necessary UI elements.

It looks really good. My personal suggestion would be dark mode. If an interface element is locked on the users’ screen I have found that static elements tend to be more distracting to the gameplay if they are bright. I prefer to set the color of static GUI elements to darker neutral colors, but this can also changed based on the game’s lighting. Overall great work so far though.

image
Is this any a better revamp I just thought a little transparency may help, I was thinking where should I have the Menu text button.

1 Like

Choices


  • A menu icon is an alternative. The most common one is a symbol of three lines, you can find it in DevForums, right on your screen.
  • Another menu suggestion is to tilt the button 90 degrees and align it with the right side.
  • You can add a small border or thin line between the user information and the rest below; bank, wallet and optionally menu.
1 Like

Thank you, I’ll work something out with these ideas, alternatively roblox is filled with underaged kids so I’m assuming most of them won’t know what the symbol means usually when people want to change a setting they press ESC key instead of clicking the roblox default symbol, so I’ll just add an alternative menu button somewhere hopefully findable…