As the title says; I’d like some feedback about my menu UI layout. Any suggestions of what I could improve?
Note: I’m using emoji’s as temporary icons.
7 Likes
To me it looks a little bland, the logos icons are quite blurry. I’d suggest adding a pattern to the blue background and outlines to the white boxes. The text is also inconstant in size, I’d recommend a set font size. If you’d like to make it more “playful”, I’d suggest curved edges to the boxes. I’m not an expert in UI, but just from experience in games that’s basically what I’ve seen looks good.
3 Likes
I think you should have “Party” take up most of the left side of the screen, while all the other buttons are shifted to the right, similar to this example below
10 Likes
Personally I feel as if this was rushed without a design in mind. I highly recommend you use this plugin for a more modern look.
3 Likes
I don’t believe making everything round will essentially make everything to look “modern”. I can see what you’re trying to do.
The layout is too bland, the use of those Icons are massively out of proportion, as well as for the text size for each of those frames. These look like icons forked out of google, not saying its bad but you can implement something to make it look aesthetically pleasing to look at. Since most of your icons are just flat, its better to modify these icons.
Making use of Paint.NET since its free to use and its easy to understand for beginners.
- Using this icon as an example,
At this point, this icon needs its colour scheme to be washed out, preferably white. We can do this by going under Adjustments and then Brightness/ Contrast and make both Brightness and Contrast on the max setting on the slider:
Now we can see that this icon is completely white:
Why make it white? It will give you flexibility for when you upload it to ROBLOX using the ImageColor3 property under ImageLabel or ImageButton. This will allow you to change it to any colour you wish, since its white. If it was a tinted colour of grey or red or whatever, you won’t get the accurate RGB colour you assign to it in the properties.
Because of how Roblox bleeds their images, you’ll need to use this process to remove the black outlines. This will make your UI more clean since there wouldn’t be anything which shouldn’t be there.
I think for this menu, you can follow the Metro UI which will enable you not to change too much of what you got currently but adapt it, so it can look modern.
This is the best example for a Metro UI you should go for:
As you can see with these buttons, they’re not all regular in size in a grid layout system. They’re either the “full size” or exactly “half size”. You can do this on Roblox without the use of UITableLayout, if you don’t plan to add more to it and that its static.
In this UI, you can see that the icons are always in the dominant place, in the middle of the icon. Neither icon is too big or too small which is what you need to do for your UI.
Back to when I said the colour should be white, using tweens, you can make your UI more interactive by using Tweens.
https://gyazo.com/93b9c93c20b0ebe6f5386c8975e6918f
In this UI, I’ve uploaded these icons to be white which allows me to do what I shown above to get the right colour scheme of my other frames.
For the text, you should use SourceSansLight to try to get the closest look to what the Metro UI uses. However, there’s plugins out there which allow you to use a wider selection of fonts.
As for the background, its better if you stitch two 1024p images together so it can stretch across your screen, especially for those who have a higher res picture. This will essentially give you a 2048p background. Alternatively, you can just have a plain solid background, making use of this Metro UI Palette.
If you feel like the amount of buttons you have may not be enough to cater the space on your screen, add other things to the mix such as change log, tips on how to get yourself an advantage in the game, local player stats or even global leaderboards:
Hope you find this information useful!
13 Likes
I think it’s quite clear - design wise but at the same time I would reduce the sizing of basically everything, making it easy on the eyes and also following a consistent sizing pattern. I would also recommend that you add more spacing as it just feels ‘hugged’ and just ‘explode’ everything. I would also recommend that you use a better font such as Gotham.
All of the icons seem a bit blury. Not sure if that is something you intended but I thought I’d inform you
I recommend to combine some fonts and text colors. After some fix this can look good.
Updated OP with the current version of the menu.
Still looking for feedback.
That’s what happens when you use emoji’s as icons.
The use of font could be better in my eyes, you could of used the SourceSans SemiBold, without the TextStroke colour and transparency.
I don’t think you should make this transparent: 
I still think you could add some icons- but nevertheless, it does still clearly show what each of those buttons do.
But good improvements!
1 Like
The label on the Minigames button is uncomfortably close to the edges. Maybe you should make the font size a little bit smaller, or think of another label for the button.
2 Likes
I feel like something’s missing from the top of the screen…
A title?
2 Likes
I agree with jordy. A title would be cool.
1 Like
I would advise you make the following changes to your advice, as someone who has worked on UI professionally outside of Roblox:
Rounded corners are fine. I personally prefer tighter rounded corners and sometimes sharp corners, but they’re pretty foundational to many designs (think iOS or MD). I wouldn’t discredit them immediately.
The lack of contrast between the icons and the background. This is all too common and is bad practice! Make the icon sufficiently lighter or darker than the background so it’s easier to see!
SourceSansLight. Personally it used to be my favourite font but nowadays I see it overused everywhere. It’s a terrible choice for regular text since the light weight cause the text glyphs to lose contrast with the background, and makes a horrible reading experience. It works best in titles and headings, for regular body text I would just use regular Source Sans.
White icons - great idea, bad execution. Making a white icon just by cranking up the brightness is a terrible idea. Make or use a built for purpose white icon - these typically compensate for the lack of colour by including affordances in the icon shape that you would otherwise lose. Look at those Metro icons - notice how details are preserved by including them in the shape. Normal icons use colour for this instead and so you lose those details.
Don’t add filler content to the main menu just to make it look full. Just don’t. Function before form.
Metro looks nice. I’d rather you include more general advice that isn’t specific to one design language, so it can be used across styles.
Overall I would suggest reviewing best practices for UI design - you clearly have skill, but there’s just these small things which add up quickly!
3 Likes
Personally I have no issue with this part of the screen except for icons. The transparency helps keep the UI from being too plain and helps keep more of the game world visible, increasing the immersiveness by letting it gently peek through without disturbing the main UI elements.
1 Like
I would get rid of the all caps personally, and use different button colours. You can generate some neat palettes using online tools such as paletton.com!
Thanks for your feedback
OP has been updated with the current version of the menu.
Still looking for feedback!