How to Properly Design/Scale GUIs?

I've also faced many of the same problems as you when designing UIs. And I understand what it's like to painstakingly craft UIs that look great in Studio Play mode but only to have it look too tall when you actually play it.

Over the course of many, many failed attempts at making UI, I have managed to learn a few guidelines to stick by when you're making gooies.

Always use the scale property in UDim2

This is kind of a no-brainer, but it does help out greatly when you're trying to make UI that looks clean in all resolutions. By using scale, the size and position of the UI will change automatically and dynamically to ensure that the position is always accurate.

You can use negative offsets too in order to "pad" elements

This is really really useful. Let's say you wanted something to be in the bottom-left corner of the screen but not directly touching the corner. You could position it at:

ui.Position = UDim2.new(1, -5, 1, -5)

so that it's 5 pixels away from the edge. However, this isn't going to work until...

Use AnchorPoints!

Normally, the position of a UI element is calculated from its topleft. That means setting the position of a Frame would move the top left pixel to that position. This can be troublesome in certain situations. AnchorPoints allow you to to change which part of the UI object is actually positioned at the position (does that make sense?)

So if you wanted to center something, you could easily do:

ui.AnchorPoint = Vector2.new(0.5, 0.5)
ui.Position = UDim2.new(0.5, 0, 0.5, 0)

When I set the AnchorPoint to (0.5, 0.5), the center of that ui is now where the position is applied. Now, the center of the UI is at the center of the screen!

For the previous example, you would need one more step to position it at the bottom right:

ui.AnchorPoint = Vector2.new(1, 1)

No more ugly subtractions and AbsolutePositions!

Last but not least... TEST IT OFTEN IN-GAME

What better way to make sure your UI looks crisp and clean than to actually experience it first hand? Upload your game to Roblox and play it. That way you can catch problems with sizing and positioning before they become too stubborn to fix. Another option would be to resize the Studio window to be full-screen, but this is more tedious. Actually playing your game would also catch problems with Infinite yields and others earlier, so it's a good habit to get into!

These are just what I've personally discovered to be helpful, not necessarily the "official" guide to fluid UI design.

Those are most of the big lessons I learned the hard way. I generally prefer to create the UI in a script since that's what I'm used to. However, if you create it manually, the same ideas still apply.

I hope these pointers have been helpful and made making UIs slightly less gruesome! Happy coding~