I’ve been making an animated health bar. It works, but it looks plain and boring. How can I make it look better / improve on it?
Don’t be afraid to roast me, I want honest feedback!
7 Likes
Impressive. I like the tweening a lot.
I have nothing to complain about that Health Bar 
1 Like
Great bar! Just a little notice on the colors: i don’t like the complete black for GUIs, white border with red circle wuld be better for me
1 Like
The text is really difficult to read at a first glance, however the rest is great.
2 Likes
Looks really good, it seems to be better than my 2 blank frames, but I think a slight white highlight showing reflection on the top would look nice.
It looks a little too wide on the Y-axis.
1 Like
maybe make the tweening a little slower? it looks pretty fast to me, but overall it’s pretty sweet!
Do you mean like this?
I’ve added a white stroke to it
Red = white
Bue = red
That’s what i mean
I think a thicker black stroke would make it easier to read, remember that the health bar isn’t generally something you want someone to have to take a second to process but just something you want them to quickly glance at.
Maybe I’m wrong though, I haven’t made a health bar before
the ui seems great and smooth but the ui is a little tall on the y axis
i’d say get rid of width and keep it same width. make use of all the space in your thing but still keep distance. and make sure stuff like this doesnt happen: 
too much gap
Change the text color to something darker (literally anything that doesn’t match the green)
How’s this?
1 Like
Looks great. Better the the first one in my opinion.
You can change a lot here. Me being a UI designer myself, however, I went ahead and created a sample health bar for you to reference off of.
As you can see (I hope) in the photo above, I added several ideas of my own to attempt to enhance the look of your health bar. Now, going off of assumptions, I am guessing you were going for a more sci-fi or technology/space/futuristic look for your health bar, so I added a theme for that with the beveled edges. Okay, time for the criticism.
First off, the text color for the “100” and its respective background color are wayyy too neon for my eyes. It is almost as if the whole circle is solid cyan. Furthermore, the extra space between the health amount indicator and the health bar just seems unnecessary. Why add that gap? You can just clip the number onto the corner or simply split the UI. Remember, when you make UI designs like this, user experience is always a top priority. You do not need to know how tall your green 100% health is. That is why most (and I say most) people choose to go for thinner designs, because… yeah.
With that stuff out of the way, this might come off as picky, but the brightness of the green health bar should be toned down. (in the perspective of the player) That UI element is something I will be constantly referring to while I am playing the game, so it would be nicer if it was a darker tone so it is easier on the eyes. Lastly, the black background color should not be (0,0,0). This is NEVER a good option for ANY UI design, as it is too intense and straight-up looks like my laptop screen just got Thanos snapped in that region. Instead, it would be much better to go for something of more resemblance to carbon black, which is technically black, but somehow brighter.
Then, of course, I assumed the extra, unfilled space was intentional, so I went in and added some text, more specifically the player’s name, and their kills & deaths. So, there you go. That is my advice to you. Apply small (and big) changes and the world will become a better place.
8 Likes
Thanks so much for the in detail feedback! I really appreciate it when people take the time to write out complex answers.
I really like the idea of the big number, with the dark green background.
1 Like