Hello!
I created a HUD design for my game and just wondering everyone’s opinion on it. Feedback appreciated! (yes timer works and notification bell too)
1 Like
Ah! I thought it was a HUD. Thanks for the feedback!
1 Like
Hey man! Is this your first UI? If so, you did pretty good! But you came here for feedback and not just appraisal, so…
- It looks like you’re trying to conform to Roblox’s new Chrome UI thing. Is that what you’re trying to go for?
If so, here is a Figma template I made so you can get the exact dimensions of the topbar and the buttons… and for whatever else you wanna throw on top.
- The icons are not sized and positioned correctly.
I’m assuming these are just little ImageLabels that are there for cool looks. An easy way to center the images with the parent frame is to set their AnchorPoints to 0.5, 0.5, and then set the Y scale of the images to be 0.5 too, i.e. the position would be 0.1, 0, 0.5, 0. As for sizing, there’s step 3, which is:
- Make margins and paddings and stick to them.
Don’t size your images all willy-nilly. Make sure they’re spaced out awesomely. A good one to go for is something like 5px padding and 5px margins.
What the hell are margins and paddings? Margins could be like the space between the time image and the clock text. Paddings could be like space between the gray round frame and the actual contents of that frame. Ok, so now that you know what margins and paddings are, how do you actually implement them in Roblox?
It’s as simple as adding another pseudo-frame that’s invisible, centering it with AnchorPoint 0.5,0.5 and Position 0.5, 0, 0.5, 0, and setting its Size to 1, -10, 1, -10, and putting everything you had in there and rearranging it so it’s cooler. Why the negatives? 5 pixels from the top and bottom, and 5 from the left and right sides - that’s your margins.
Need more resources? Check out https://www.designer.tips/ or https://lawsofux.com/, they are AWESOME!!
Oh, and… welcome to the suck.
1 Like
Speaking of padding and stuff, a good way to space the contents of the bar out is to use UIListLayouts. That way you can maintain a consistent spacing.
Thank you! Yes, it is my first year in UI making and I indeed made this with Figma. I always had trouble with the sizes, etc. Appreciate the feedback.
I heard of them before but barely used them. I think I’ll start using them more often. Cheers!