Hello! I’m developing a game and my old hotbar UI was less than ideal. I used the default ROBLOX toolbox and some poorly made buttons with icons.
Seen Here:
However, I recently started redesigning all of the UI and came up with a cool layout I think for a new hotbar. Instead of having it set off to the bottom left of the screen, I moved everything to the bottom center – alongside my new custom made toolbox design.
Any thoughts and feedback on my new hotbar UI design?
I like the colours a lot. Personally I would make the orange to yellow gradient vertical rather than horizontal (orange on the top, yellow on the bottom.)
The stamina bar uses a different style to the health bar and has no label, which looks kinda weird and could be confusing for players. The design is an improvement though, good job.
I don’t think the orientation of the gradient is very important because it’s subtle. If it was stronger and significantly affected visibility (text is harder/easier to see, etc.), it would be important, but currently it’s not so it’s not a big concern. I personally prefer the horizontal/angled gradient as it gives the UI a bit of an interesting sense of depth and lighting that you don’t get in the same way with a simple vertical gradient. Ultimately up to you!
I tested out both orientation for the gradient and I’m sticking with the horizontal one as I agree with your opinion on it having a nice dynamic effect to it. As for the stamina bar, I was going for something similar to that in Apocalypse Rising. It’s the same sliced image as the Health bar just thinner and colored differently, I thought it was to thin to add a label to.
Any suggestions on how to design the stamina bar that you think might make it easier to understand or should I give players a game tip that the purple-pink bar at the bottom is the stamina measure?
I like the colors you put in the UI, nice job on that.
I would maybe want to put something with the stamina bar, because some players would have no idea that ‘stamina’ is a feature in your game. I would put some kind of label next to it to show that you can sprint.
I would put the music and settings buttons next to each other on one side, and put the other two in the other side. The stamina bar is also kind of out of the way, and might look better on the top of that section.
I see what you mean with Apocalypse Rising. I think what makes this situation different is that there are other buttons around and there are many things that aren’t status-related causing it to be confusing what the unlabelled bottom bar represents, where in Apocalypse Rising the bottom bar is the only thing there (along with the health / hunger / … bars). In other words, there’s more visual clutter in your case so the minimalism of that single element in contrast to everything else is not very helpful.
I think the solution there would either be to get rid of some of the clutter or move the health bar up and put the stamina bar under it with a similar style and a label. The name label isn’t very useful or necessary anyway.
One thing I also noticed is that the purple color is kind of hard to see or uncomfortable to look at with the bright yellow / orange background. Perhaps a blue would work better?
The icon buttons are good since they are simplistic without conflicting colors. (white looks usually good with a lot of colors anyways)
The new design feels and looks bland partially due to the basic healthbar and stamina look. The horizontal gradient looks like it doesn’t fit as well (test vertical out). I think you can add some more to the design of the frames and stat bars.
