How do I improve my gui

so I made some gui for my game and I want to know how could I improve it
maybe I could change the font or animations I js wanna know what I could do better

GAMEMODE VOTING UI

WINNERS UI

(sorry for the bad quality btw)

5 Likes

Nice job this is pretty decent

2 Likes

thank you bro‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

i actually like this a lot! maybe add images for the game modes?

1 Like

Looks good, but shifting the boxes every time a new one pops up is a bit jarring, just have them pop up where they’re gonna be. Also the text kinda jitters when you select a box. Not really a big deal, but fixing those things could make it a bit more visually appealing.

Stylistically, I think you should make the name of each gamemode stand out more from the descriptions, like maybe bolded or a different font or something. Also maybe shorten the descriptions a little and add a small, colored icon in the corner of each game mode just to make them more recognizable, since people don’t really like having to read.

These are just suggestions tho, your gui already looks pretty good and does what it’s supposed to.

4 Likes

this is the changes I made stylistically I reckon it looks better

1 Like

Nice, but you could add ImageLabel and show players how the map looks, and you should add ‘i’ button for map information (your map description) at the top right corner.

1 Like

Overall pretty good, especially the tweening! However, there are some tweaks that could be made.
First: Let the text get some more space from the edges, and try to also short down the descriptions even more.
Second: make the “votes” text label stand out a bit more, an example could be to thin out the main frames and put each label under them.
Third: this goes a bit against the second but you could maybe stretch the frames vertically and insert an image on each frame.

Bonus: Use Figma to design the frames. However, you would have to learn it in that case (it’s easy, just takes some time). If you would use Figma, your UI could get 10x better, there’re also a lot of free border assets on the internet you could use, which combined with Figma your Ui could get 20x better.

Bonus2: It seems like the voting time is about 100 seconds, that’s WAY too long for a voting system where an unclosable UI pops up in the middle of the screen. Change it to at max 15 seconds.

2 Likes

The advice about padding is spot on. If you aren’t using UIPadding, your UI will always look amateurish regardless of how much you tweak the colors.

1 Like

this is my new changes after your advice


im not sure if that’s what you meant by the voting text so correct me if i’m wrong
btw the voting time being 100 seconds was for testing only, it’s going to be around 10 seconds

1 Like

The voting text still doesn’t stand out enough. It needs more contrast or a different weight so it isn’t blending into the frame, and you should check your padding again because some elements are still too close to the edges.

1 Like

i tried a different font do you reckon it makes it stand out more or just look worse
i also added some extra padding

1 Like

The font change makes it harder to read. Stick to a cleaner weight and focus on the contrast instead of just swapping fonts, and make sure that padding is consistent across all elements.

2 Likes

horizontal padding are around 2 to 3 times more than vertical padding. The benefits of this can be clearly seen in the example below.
(If the proportion is around 2 to 3 times, I personally prefer a ratio of x3)

2 Likes

i’m a bit confused on how to make the votes contrast properly, if it isn’t already