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!