Hello! My name is Landon. I have some experience in UI Design. So I would like to educate the community on how to make an appealing UI.
DISCLAIMER
This is a step by step tutorial on how to make a simple, appealing UI. Not a direct guide. The reason it’s appealing at least to me is because it’s simple and easy on the eyes.
Step one. Gather Resources.
In order to make a UI, we need Roblox Studio. I’m pretty sure you already have it…
Jokes aside, I recommend downloading this plugin. It will help you in making UI.
Great! Now you have an awesome plugin to help you out.
Step two. Make a base.
I will use Interface Tools for this one.
First insert a ScreenGUI inside of StarterGUI.
Then, inside that, add a frame. Copy these properties for the sake of the tutorial.
It Should look like this:
Now, I’m going to add an image with Interface Tools.
Re-size it to the size of the frame like so:
Then, change the image color to 29,29,209 and the image transparency to 0.7.
Should look like this:
Next, add a UI Corner to the frame and the image. Change the radius of both to 0,15.
Now we have clean rounded edges! Next add an outline by inserting UIStroke into the frame.
Change ApplyStrokeMode to Contextual, the color to white, and the thickness to 3.
It should look like this:
Now, we’ll add an “X” button to close the frame.
Add a TextLabel. Mark “TextScaled”. Make the Background Color red. Add text that just says “X” in whatever font you want. Make it small and put it at the top right corner. Inside of it, add two UIStrokes, and one UICorner. The reason we need two is one for the border, one to make the X bold. One of the UIStrokes should have ApplyStrokeMode at Contextual, the other Border. The one with Border should have the thickness at 3, Contextual at 1. Both the color white. The UICorner should have a cornerradius of 0,8. It should look a little like this:
Step three. Adding a Title.
We have the main body, and a close button. But we need a title at the top so we know what the UI is for. Add an ImageLabel with the background at 44,44,44, same as the frame. Place it in the top and middle, with some hanging over the top. This is what I mean:
Tick TextScaled. Add a UICorner and UIStroke. You can customize those how you like. And now, write something in the title. Mine looks like this:
Feel free to put whatever you want inside of it.
Explanation
I’m sorry if this was to bossy, I tried to make it as straightforward as possible.
The reason I feel this is appealing and clean is because it’s simple and minimalistic. This was more showing you how to do one in particular. But my reasoning behind all of this is to make it relaxing for the eyes. Such as UI corners so there are no icky corners.
Thanks for reading, I hope this was somewhat helpful. Make sure to share what you made below! You can check out what I made here: Frame - Roblox
Feedback is appreciated.
