How can I make this UI BETTER?

I am making a leaderboard for my Roblox Revival / Simulation and I am wondering how I can make this leaderboard better and more user friendly?

image

What I mean is like, what fonts do I use? What colors do I use? The usual.

Thanks in advance.

6 Likes

I am also wondering what I can change for my main UI in the main game?


This is the Home page

4 Likes

Avatar Editor

3 Likes


Catalog

4 Likes


Games

this is all im sending for now so i dont get flagged for spam .

3 Likes

You can put everything into one topic if you did not knew and you tell me whats missing and what sucks because I can write an entire book about things that are wrong.

7 Likes

Well UX Design isnt my best thing. So, can you tell me whats wrong and how I can fix it?

2 Likes

Overview

Change color, add padding, fix alignment size etc, and go to 🎨 Material Design Colors, Color Palette | Material UI for good colors that match every theme.

Detail

PlayerList
Doesnt need something that much except padding and the transparency should be less and a new font

Menu
Status text is not aligned properly needs alignment and padding.
This goes to every other element. There is uneven spacing, sizing and alignment.
Same goes for home page.

Avatar Editor
The category buttons are not spaced properly and the text is not a constant size. To fix this set automaticsize to “X” and remove the background from it and add padding to it to make it smaller… Also the background of the catergory area is not looking that good as the color is too bright. Make it a bit less bright.
Same goes for redraw character and guest mode.

Catalog
Not bad but the buttons need the same work as listen in avatar editor. The Search icon needs padding. I am a fan of the search bar btw its amazing.

Games
The refresh icon is not aligned properly and the playing label should be gray, preferably: #AAAAAA and it should be smaller as well. There is a lot of padding in the games section as well. Keep it to a minimum. I suggest a padding of: CornerRadius*2 for background and frames and for textlabels i suggest a padding of: TextSize/2

Notes
You can do better in UI making, just need to put some more effort and note things that are wrong with your UI. I would suggest taking inspiration from google and for color pallete I would suggest you to see: 🎨 Material Design Colors, Color Palette | Material UI. They have quite good colors that match with any theme.
Also I would suggest you to change the color theme of the entire ui as pitch black isn’t that good. See the black in the website listed above.

Side Notes
Sorry that you have to read such a long post.

5 Likes

Alright, thanks for being straight forward with me and I will be making these changes later on.

The website you listed has some really nice colors as well and will definitely be using those.

Finally, For the padding, I use Roblox’s implemented UIPadding, right?

2 Likes

No problem. Glad to be of assistance!

Thank you, I also use it all the time to find good colors.

Yes you need to use roblox’s implemented UIPadding.

1 Like

As I am using padding and different colors, i’m beginning to notice my UI is a LOT better than what it was. Everything is more aligned, everything is more evenly spaced. Just better all around. Thanks again for your help.

1 Like

No problem! I am glad that I have been of your assisstance and hope I will be once again.

1 Like