Hey, I’ve been starting to experiment UI designing and I would appreciate constructive feedback on my first UI design. You can take a look at the design below:
12 Likes
its actually really good 2 questions
did you use any other softwares to make this or only roblox studio?
and second what is that boatbombed on top?
2 Likes
its like an in-game username, like to show username and rank and yeah
also i recommend like, eh, not making the bars look like ovals and have better font
2 Likes
Looks pretty nice! I would recommend you switch out the progress bars for something more rectangular in nature with rounded corners at the end. The ones you currently have look a bit like elongated ovals.
2 Likes
A few things I would maybe mention is:
- The red line is not showing 75/100 health which is confusing (if the red line even shows health)
- What does the blue line show? That is not very clear just from the colour
- The “Level 3” Text and the “75/100” Text are very compressed and close together. Possibly put them beside each other to give the text more space.
- Add some padding around the edges of the box to give everything inside some space from the edges.
4 Likes
I have some issues, first of all, the level % text doesn’t feel to be in the center of the circle. Secondly, please don’t use arial, it’s boring. And finally, make the progress bars look less rounded and size them correctly
I’d recommend switching to Figma or Lunacy to make better UI.
Edit: I also forgot to mention that you should move your level and 75/100 text to the left a bit
1 Like
Check out gravit it is a pretty cool free tool for Graphic Design which I use but there are lots others including figma. But Gravit is free and much more helpful than a photo editing software.
1 Like
Instead of stretching a circle or whatever you did, for the Health and Xp/Stamina (I’m assuming), try using a frame or something and using an UICorner. Also you might want to change the font for the level and the 75/100 since when it’s smaller, it may be a bit harder to read since the font is thin and not very ‘bright’. I like how you used the gradient on the circular 75% thing, you could also try using gradients for the red and blue bar, and even text.
The Level 3 starts at the top, as high as the circle, but the blue bar ends at around 80% down in height. Try changing the spacing so that the blue bar is on the bottom and the entire height is used.
The entire background in general also seems to be a round square that was stretched or something, try rounding the corners AFTER you’ve sized it.
The circular progress bar also seems a bit large and is almost touching the edges, you might want to scale it down so it fits a bit better, and doesn’t look too cramped.
2 Likes
I will definitely change up a few things and take your advice, thank you for your feedback.
Looks nice, but it’s an exact copy of ROBLOX UI TUTORIAL: Clean Profile | GFX COMET - YouTube, maybe try doing different designs on your own. Otherwise, looks nice!
Not horrible… One thing is, I saw that exact tutorial on YouTube by the creator, “GFX COMET”. Other than that, it isn’t bad.
looks great! I would recommend making the red and blue statistics bar a bit more squareish but other than that it’s amazing!
Now I know I am late but I have a few suggestions. Personally, I am not a UI designer, but I do have a couple suggestions.
- Try spacing the BoatBombed text out a little bit. Not the words, but the letters.
- The blue and red shapes looked very I guess squished. Maybe you can’t fix it due to the size of the main UI.
Other than that, great first UI!
You could add a gradient to the red and blue bars to make it look bettter
The circle is a bit too big … or the box needs to go lower and more to the left.
(sorry just my ocd kicking in)
Its actually amazing! The only thing I would do is make the progress bar flat from the top and bottom. Other than that, it is amazing