[OUTDATED CONTENT]
Introduction 
This Community Tutorial would help you to make a simple and modern panel Ui. We are having a discussion yet having a Pictured Tutorials as well.
This is my first time posting in this Category.
Objective 
I hope you learn from this tutorial and willing to answer any of replies.
Let’s Start! 
So, classify what UI are you working on or you will;
- Panel
- Full-Screen
- Popup Prompt
- Proximity
- Scrolling Frame
Of course there would be more to it that I haven’t mentioned but these are the basics. We’re working on Simple Panel and I’m sure you can adapt the tutorials to any of UI types.
Get The Plugins 
AutoScale Lite will help us scale the UIs Components to (Scale, default: Offset). Offset is based on screen size which is very hard when viewing in different Device Units. Whilst Scale will maintain the scale of UI Components in any different Screen Sizes.
Lucide Icons will help to supply Icons. This is Open Source so don’t worry about getting copyrighted. It have various and lots of Icons, this is expanded version of Feather Icons.
Get The Model 
Here’s the the model so you can customize it and fun around with it.
Procedure 
Add a ScreenGui to the StarterGui like this:
You can rename the ScreenGui whatever you like and keep it Enabled!
Add an ImageButton to the ScreenGui like this:
I renamed the ScreenGui and the ImageButton. ImageButton is the one that will be the panel. I prefer ImageButton since touches, interactions wouldn’t pass through the ImageButton.
(Example: Dragging your finger in the screen will move the angle of your camera, but when you start dragging your finger on the ImageButton it will not change the camera angle.)
Your ImageButton Properties should be like this:
Clear the default image that comes when you add the ImageButton
You can copy all of these properties, BUT if you want a custom size, continue reading…
Resize the ImageButton however you like. As long as you wanted that size.
After resizing the ImageButton. Open the AutoScale Lite and choose UNIT CONVERSION
The blue icon one and proceed to click Scale both Position and Size
Now, after clicking the Scale it should change the Position & Size’s property values. You can check the Device Emulator and check if the UI is scaling properly.
Add an UICorner to the Panel;
About the corner radius you may copy these properties:
We do not want to corner it too much. We used Scale since it maintains the Corner Radius on every screen sizes without loosing or adding any pixels of rounded corner.
Aspect Ratio (REQUIRED)
Select your Panel and open AutoScale Lite
Click the Add Constraint!
It automatically adds an AspectRatio to your panel.
It will look like that please don’t play around with the AspectRatio’s property.
It might resize wrongly.
It should be looking like this if you copied the properties in the images above.
Adding a Top Bar (Optional)
Add an ImageLabel to the Panel;
Properties should be like for the ImageLabel:
Clear the Default Image that comes when you add the ImageLabel.
After add these in the Topbar
- UICorner
- UIGradient
The UICorner Properties should be like this:
The UIGradient Properties should be like this:
Open the Transparency and click the 3 dots.
And copy this:
After that the Topbar should looked like it’s cropped.
Your UI should look like this now.
REMEMBER:
Adding the Topbar is optional. You can either add it or not. The topbar is for aesthetic purposes anyways no function or anything.
Add 1 textlabel first so you can duplicate it with the same properties
Here’s the Textlabel Properties:
You can use any fonts but Gotham+ is perfect for these. Try to find a fonts that have family on them like Sans Serif.
Here’s some Ideas about the Topbar:
Third one’s Icon is from:
Just select the ImageLabel and Open Lucide Icons and click the icon you like.
Adding the Close Button. Add an ImageButton inside the Panel:
Here is the properties for Close Button:
So this is the preview of the panel:
You can color the X button any color you like…
Make it pure white:
You can change the Icon:
Anyways it’s up to you!
Now to continue customizing your panel. Add frame;
Rename the frame as Container
and you can add your things inside the container!
Like this:
I was saying is Topbar is optional you can do something like this:
Here’s the light mode yet maintaining the modernity and simplicity.
Adding Shadow
So warning you can’t add shadow on light mode, only black or dark colors. Since we will put the shadow inside the panel. You can add the shadow in the ScreenGui if you had the white panel.
Add an ImageLabel for shadow in the Panel:
Here is the properties for Shadow:
You will see in the ScaleType I used Slice since this helps for resizing. Our shadow is only an Image so it can be stretched but that’s disgusting. So we use the Slice so whevener we resize it won’t stretch disgustingly…
Preview with shadows on:
Discussions 
Don’t use this modern style in Simulators, Tyccons since your UI needs to atttact younger audience. You can use this on FPS, UI-Focused game. Adventures and whatnot.
I made the tutorials have options since our appearance is different to each other. Here’s the model, so you can play around with the components and stuffs.
I made the shadow decal since I always use shadows in most of my UI designs.
Anyways, Hope you leart something from here.
I’m always up for the feedback!
Tips & Tricks 
-
Don’t use bright colors on most of the UI Components if you’re looking forward on this kind of theme.
-
You can add semi-transparent texts, icons, frames if they are low priority only.
-
Don’t add semi-transparent on Titles and Bigger Texts, Icons
-
Use only one style of Icons here’s some plugins with Icons on them:
-
Use Images like Shadows, Patterns…
-
Be wise with your Font
I preferred these (Gotham, Sans Serif, Roboto)
Outroduction 
Okay you reached to the end!
This is just a small tutorial how I make modern UIs. It’s up to you where you can use it and how. It also depends on what genre of game are you working on.
It’s okay if you don’t like the Modern Style. You probably liked other styles which is normal!
You can leave a feedback! 