[SUGGESTIONS] Topic: UI Designing

Hello!
So, today, I want to know the core exact details from some ACTUAL UI designers on roblox.

I’ve searched the DevForums, and it doesn’t exactly show me how to make advanced, or even simple but cool looking GUI’s, like the one in simulators.

This is what a quite mockup I made in Adobe XD, image as a settings button.

Can anybody help me with some actual tips and tricks or a tutorial that isn’t outdated! Also, psst, feedback on my GUI would be appreciated!

5 Likes

My two cents would be to trim the sides of the button’s container to a more uniform appearance.

1 Like

I use Pinterest to find GUI designs for inspiration, here is an example of one I found recently that I like.
decff0dd4cb679eb1a94dfb4b1c605c9

For creating a color palette I like to use Adobe Colors and Coolors to ensure the colors are harmonious, also Adobe Colors has a nice Color extraction tool so if you find a GUI with a nice color scheme you can extract the color codes.

1 Like

Thanks man, this helps me with color combinations! However, I still wanna know, how the process is made.

I like to design my GUIs iteratively, so I would keep tuning it until I’m satisfied so its kind of difficult to explain. You should always make a simple mockup in studio first so you know the requirements. The general steps would be to do the mockup, do an initial design and then keep improving it until your satisfied.

I just made this. Suggstions?

1 Like

For background colors I like to do a neutral color like black, greys or white. Also, since Roblox added UI corners you can make rounded guis in studio. Also, as I mentioned before it would be best if you created a mockup in Roblox studio, script it, and then make you it pretty.

2 Likes

Alright. UI Designer here. First of all, always make sure your colors are on point. I am a honest person, so I will say that these colors you used are ugly. The green and purple doesn’t match. If you are going for a cartoony look then go for example and look at Adopt Me’s UI Colors, they all match. Second: Scale / Offset. Your Center “Frame” is not scaled properly. It’s size relative to the purple background is bigger on the Y axis than on the X axis. And lastly: Font, use a different font as your current one is too light and doesn’t match the rest. Good luck. And I mean it.

1 Like

Kinda hurts my feelings but makes me stronger and I know what to work on. Thank you!

Sorry for being harsh. I suck at being nice. Although I recommend you to watch youtube tutorials depending on what software to make UI you use. They really help. Since I see you are a programmer, there is hope for you, because with coding you can make the trashiest UI look good. Have fun

1 Like

cahenge the font to a more blocky straightforward one also if ur using ps make the outline blending options “overlay” good luck :slight_smile:

1 Like