I’ve been working on this UI of my game for the past 3-4 hours. Even though I have very little experience when it comes to UI but I really want to your opinions on it
35 Likes
First what kind of game is this and what main mood are you aiming for? I am guessing it’s a candy or Halloween themed game with a bit of Toontown inspiration.
7 Likes
Its a candy/treat pvp game where players race to collect the most candy while sabotaging other players, a gameplay video will be released soon
9 Likes
It looks very good! I’d move the UI on the left and right a bit more to the wall of the screen. Otherwise, nice job on this!
6 Likes
Thank you for the feedback I’ll keep working on it
4 Likes
Do you have a screenshot of this in game? Like instead of just a skybox, how it looks like while a round is in progress? I’ll give my feedbacks on it when I can later today.
4 Likes
I’m still working on the round system as the map and scripts are not ready yet but here’s a picture of the progress
4 Likes
a lot of it is a bit big for my liking but otherwise it’s fine 
7 Likes
Thank you! I have some notes.
Font:
Really cool choice of font! Feels a little Tim Burton-y, whimsical, and cartoony and it fits the theme of your game. I recommend keeping this font if you can. However, I don’t know fully if it will be a readable font for people with dyslexia, so if a problem comes up with readability, you may want to have a slightly simpler font that still gives a “whimsical” vibe.
Icons:
I like your icons (i.e. the types of candies and sweets shown). They each have a distinct silhouette and color-coding, which helps players to understand information on the fly. However, I don’t understand the icon on top of what looks to be a temperature bar. Is it supposed to be dice or marshmallows in a flame? Is it an indicator for an oven? I think this specific icon should be clearer, or at least the context surrounding it.
UI Size & Positioning:
Most of the UI is too big, even for mobile. Specifically, I think that the “Match Starting” timer, the Candy Corn readout and Current Ranking Circle in the center of the frame, the “temperature” meter on the right, and the Top 3 Players readout are too large and should be shrunk (maybe shrunk by 20-50%? You will need to test this). I think the size for the different types of candies on the left is fine as it doesn’t distract from the center of the screen, but you might want to make it very slightly smaller (5-10%?).
For positioning, I think that the Match Starting text, Candy Corn center readout, and Current Ranking Circle (i.e. the “6th” Circle) should be moved upward to make more space for the center of the screen. You might be able to move them up by enabling IgnoreGuiInset, which will allow you to push the UI all the way up.
For the text on the “temperature” meter, I suggest making each of them their own text boxes with the alignment set to “Right”, then making sure they all line up on the right side to prevent the “-” text from touching to the meter. The “-” will look more uniform and straight.
Color Palette:
Thank you for sending a screenshot of the UI and the game world. This is important because UI will be pretty much always on top of your game world, so if your UI and game world look too similar, then it will look too “blended” and will be hard to discern.
I think the overall color palette is weak. There doesn’t seem to be a “baseline” color for your UI, and a baseline color would be helpful for defining the identity of your game. For example, the baseline color for Candy Crush is pink.
But since your screenshot shows a mostly pink world, I’m going to assume that your baseline color might be light pink, orange, or a contrasting color. So for your UI color, you may want a contrasting color, such as blue (you will need to test this yourself though, blue might not be the best choice).
I think the saturation of your color palette for both the game world and the UI are too high. Since both are really high saturation (the candy towers in the game world and the Candy Counters on the left are both extremely saturated colors), they blend together too much so from far away it looks very muddy. I would suggest doing either or all of these (especially the 3rd one here):
- Change the colors of your game world to be less saturated (still the same type of colors, just not super vibrant).
- Change the colors of your UI to be less saturated.
- Reduce the total number of colors in your UI (again by picking a “baseline” color, like orange or salmon pink may be a good idea because your orange stands out currently).
Frame Styling:
This is more subjective so you don’t need to do these if you prefer a different way.
I think the frame styling is overall OK if you’re going for a simple style with strong outlines.
If you want it to look more “robust” or “candy-like”, you may want to consider the UI styles like Toontown that make the frames look like they are “popping out of the screen” with some sort of drop shadow. It doesn’t need to be faded out or have a gradient like this example but a general drop shadow would help with a “fuller” cartoon feeling.
The actual frames would also need to be not reliant on only the thick outlines settings. For that, you may need to stack additional frames to get such an effect.
10 Likes
I’m noticing two areas where there’s a dark color as a background and the text is black. You should avoid instances where colors clash with each other, especially when it comes to areas with text. Maybe you should try to use a lighter brown so that you can keep the black font color and not have it just abruptly switch to a lighter color. Plus it would fit well with other lighter colors like the greens the Reds the Blues and the others.
10 Likes
Thank you for the feedback as for the color palette I was hoping to use a wide range of bright colors as to give the vibe of a rainbow themed area making the all the colors stand out on their own. For the map this is how it would look withoud the ‘Color Correction’ i used
Does removing this improve the overall feel?
1 Like
For me at least this is easier on my eyes and the UI stands out better. There’s just a few color contrast issues within the UI itself that you need to resolve here (such as the black and dark brown and dark grey blending into each other).
1 Like
I have fixed the issue with the brown being too dark and scaled the UI down a little I feel it gives a better result.
Right now is there any aspect of the UI that stands out too much or is just unecessary
3 Likes
Nice, looks a lot better with the resizing already. I also like how the Temperature meter changes color depending on the level it is at.
I’ll repeat regarding fixing the contrast for the dark grey in the center ranking readout as well.
Plus a small thing, the Top 3 readout on the left has the 400K Candy Corns text touching the frame too closely. Is there a way you can adjust it to the left a bit, so that there is the same amount of margin as there is on the left aide of that readout (i.e. where it says 1, 2, 3)? You may be able to adjust it by shifting the player name slightly to the left to make room for the Candy Corn 400K pink bubble to shift to the left.
2 Likes
Thank you for your help so far. I will be able to finish and release the game soon
2 Likes