NOTE: Part of the QueModels series that is brand new starting from today!
Introduction:
Hello everyone, my name is loueque and today I will be showing you the many ways to create UI/GUI creations from the basics on what each element and property of the UI works and how to use them, to the basic of making UI realistic and simple, so let us dig in into the facts and tutorial!
What is UI/GUI? Pretty simple actually, GUI is an acronym among many programs that stand for Graphical User Interferance. There are two types of GUI on the Roblox platform, the first one being CoreGui which can’t be tampered or edited by normal developers and only by staff, and then we have the PlayerGui/StarterGui which can be created by everyone on the platform.
Off-topic:
But loueque, we could have just watched a youtube video or ask a friend for help, why here?
Well, it is great you asked because I wanted to share with the community and newer developers on what UI/GUI is so they can create every day or maybe apply for a job for a game like me.
For example, practicing GUI for a long period of time and then making nice detailed ones like one that I made below:
But another reason is that this has clear and valuable sources that aren’t shown or spoken of in videos so which is why I wanted to create this tutorial for everyone on the forums.
Alright, I have created 3 categories for you to choose from and an in-depth of how each element and property work inside the studio and inside a game and many more, but there won’t be a scripting GUI category for a while, so let us begin!
Tutorials:
1st Tutorial:
GUI elements and properties:
Most of us here have had once used UI for fun like making a frame to make either a Shop frame, random text, or even script! In this part of the tutorial, I will be explaining what each UI element does and then properties in a separate one!
REMINDER: The only way to see UI elements is if they are inside StarterGui, or CoreGui if possible.
UI/GUI Elements:
ScreenGui
ScreenGui:
ScreenGui is the main parent of the UI elements such as a Frame or ImageLabel, it holds everything in there and can be seen from players inside the game if it is inside StarterPlayer.
Here is a example of what it looks like in the Explorer tab:
Image:
Also, you can disable the ScreenGuI if you go the properties tab of that particular parent, and it should look like this:
Pro tip: If you click on IgnoreGuiInset, a text or frame can be under the top bar inside the game.
It disables everything inside of it and won’t be seen by players until it is not disabled.
Frame
Frame:
A frame is an element that is most commonly used to hold in every UI element into the ScreenGui, and when the frame moves from a script or by the user like you, everything inside of it will move as well.
Here is an example of what I mean and what a frame looks like:
GIF:
Also, you can use frames to make borders or circles in some cases, it has a lot of usages!
TextLabel
TextLabel:
TextLabel is pretty much used a lot on games, like if you see a text in-game saying You win!, that is a TextLabel that is being used in that case or scripted to pop up like that.
You can use TextLabels to show the user what the goal is, a price for an item, or especially a heartwarming message.
Example of a TextLabel:
GIF:
Pro tip: You can also use the TextLabel element like buttons or maybe for combat. 
TextButton
TextButton:
TextButton is used a lot for opening a shop, maybe to buy this amount of coins, or even a prompt message! It is similar to the TextLabel element but instead, you can press it with your mouse or touchpad and boom, you got something to open! Most known as a Clickable element.
Here is an example of what a TextButton would look like:
GIF:
TextBox
TextBox:
A TextBox is an element where the player can enter text for a specific reason. Not too many games use this, but it is mostly known for answering a math question or to put in a twitter code such as simple code.
Here is an example of what a TextBox does:
GIF:
ScrollingFrame
ScrollingFrame:
Have you ever wonder when you are scrolling on a GUI looking for an item or maybe a gamepass, well what you are scrolling on is a ScrollingFrame, most games use them such as Phantom Forces, Arsenal, and Jailbreak. 
A ScrollingFrame is a handy dandy UI element that supports you when you need to work on something that needs scrolling and different ways to customize it.
Example of what it does:
GIF:
It has extra properties than any other element like changing the bar size and bar color, and if it is scrolling on the X or Y axis.
ImageLabel
ImageLabel:
Most of you have seen an Image before, like a bee in Bee Swarm or maybe a scribbled flower on the screen, well that my friend is an ImageLabel.
An ImageLabel is a GUI object that is containing an Image that you have chosen for that particular element, like a bloxy cola or the Roblox logo. 
Here are some properties and a GIF of what ImageLabel does:
GIF and Image:
UI/GUI Properties:
Quick Note:
I won’t explain and show what these mean as some announcement threads are talking about these, and I don’t use these personally.
Another note:
Most of the reasons/sources that are used in this category are from this link right here and stuff, thanks for reading this.
UICorner
UICorner:
More information right here about UICorner if you want to read about it, or read mine.
UICorner is a UIComponent that will make the parent that is chosen for it to be round and smooth on the edges without using a plugin.
UIGradient
UIGradient:
UIGradient is a special component that is using a mixture of colors from one end to the other to create a realistic beam or pattern on a UI parent.
There is a thread about it or an example of what it looks like:
Image:
UIPadding
UIPadding:
UIPadding is a UI Component that applies padding to the borders of the GuiObject that is parented to.
Some information here.
UIScale
UIScale:
UIScale is a UI component that scales the parent doubled of the number value given for it.
Here is an example of what it does and how it works inside studio:
GIF:
UITableLayout
UITableLayout:
UITableLayout is a UI component that layout a certain row of UI from the X-Axis or the Y-Axis, and they are arranged in columns from the top to the bottom.
Here are some images from the Hub on how it works:
Images:
UIGridLayout
UIGridLayout:
UIGridLayout happens to be one of my favorite Properties. What it does is that it lays out siblings and children onto a specific order like 4 to the right and maybe 3 down, most commonly used when looking at your avatar which armor and weapons, or a shop.
Hub if you want to learn more about it.
UIAspectRatioConstraint
UIAspectRatioConstraint:
The UIAspectRatioConstraint is one of those ratio elements that ensure that the parent can get an equivalent aspect to a ratio even though the size of the parent/child is set as a percentage of it’s the original parent.
UIListLayout
UIListLayout:
UIListLayout is one of those properties that layout a sibling in a single row on a frame or scrolling frame either vertically or horizontally.
Also, Each sibling size and Position will be taken care of manually and control of the UIListLayout as usual, kind of neat right?
UIPageLayout
UIPageLayout:
Nothing too complex or hard to understand at all. UIPageLayout is the 3rd favorite property of mine and how it works is that creates a viewable window of pages of UI and such, but it also supports it like a home screen on mobile and parent it to the parent.
UITextSizeConstraint
UITextSizeConstraint:
UITextSizeConstraint pretty much assures that the text scale/size of itself is either smaller or larger depending on what you set the value.
For example, you set the lowest value to 3 and highest 10, which means it can be any number between those 2 values on a certain device.
UISizeConstraint
UISizeConstraint:
UISizeConstraint is another one of these properties that ensures that the parent/children do not become larger or smaller than the MaximumSize and MinimumSize of the UI element.
For example, if the MaxSize is like {0, 500}, {0, 250}, then the parent and children inside can’t be over 500 pixels/size on a screen and can’t be less than 250 pixels/size.
Hope you found this section helpful!
2nd Tutorial:
Creating the UI/GUI:
When creating UI/GUI inside a game, most developers approach on how they look like either an old style or more of a modern approach and a step ahead of the way! So I have only one tutorial here for today on how to make round/shadows under a UI.
So let’s begin!
Tutorial 1: Making Shadows under a button
So most of us have made a button before, like before reading this section of the page and so on, but have you ever wondered how to make a shadow under a button? If so, then you’re in the right place!
NOTE: I am using a TextLabel for this tutorial as a quick example, but this can work anywhere when making shadows under text/buttons.
Steps:
First Step: Insert a ScreenGui to StarterGui and then insert a Frame, then when you insert that frame, insert a TextLabel afterward:
Image:
Second Step: Add the UICorner property into TextLabel and the Frame:
Image:
Third Step: Put in random colors onto the Frame and TextLabel:
Image:
Fourth Step: Rename the properties such as Shadow or MainText
Then you are done! You got a nice and realistic shadow under a text.
Tutorial 2: Using UIGradient
UIGradients are substantial for many developers including me who care about what designs work, but making them is very easy!
So in this tutorial, I will be showing you about how they work and how to use them:
Steps:
First step: Get a Frame or TextLabel into a ScreenGui like this:
Image:
Second step: Insert a property called UIGradient:
Image:
Third step: Go to the UIGradient in properties and then click on the right of Color:
Fourth Step: Mess around with colors by clicking on the edges or creating new lines:
Image:
Fifth step: Boom, you got a Gradient!
Hope you enjoyed this tutorial!
3rd Tutorial:
Scripting the UI
Hello! In this part of the tutorial, I will be having 3 tutorials on scripting some parts of UI such as opening and closing frames with a single button, changing text or colors, and especially tweens!
So, let us begin for this tutorial!
Tutorial 1: Opening & Closing
Almost everyone has seen a UI button before in a game like Jailbreak or Adopt Me, but have you ever wanted to replicate that for a game that you’re making? Well, you came to the right section of this topic as we will discuss the process of code and setting up the frame structure in order to complete a successful opening and closing set!
Steps:
Step 1. You want to insert a ScreenGui and then add in a TextButton or ImageButton and put it in the bottom left corner or bottom right, and then add in a frame and size it however you want and inside the frame, insert a TextButton at put it in the top right of the frame, and it should look something like this:
Step 2: Insert a LocalScript inside the TextButton which is outside of the frame and especially insert a LocalScript inside the TextButton inside the frame, and here how you should start out the code for the button outside the frame:
script.Parent.MouseButton1Click:Connect(function()
Or:
local button = script.Parent
button.MouseButton1Click:Connect(function()
^ What this commands/does it if a Mouse clicks on the parent, which is the button in this case, and it will open whatever is put into the code.
Step 2 ~ 3: After you put that code, create a new line and then type it this new line that is below the previous code above:
local button = script.Parent
button.MouseButton1Click:Connect(function()
game.Players.LocalPlayer.PlayerGui.ScreenGui.MainFrame.Visible = true
end)
^ What this code does is that the ScreenGui and that it appears for the player which is you or anyone inside the game, and the child that will become visible is the MainFrame or the frame that we decided to become visible or not visible.
^ Oh before you test it out, make sure the frame is not visible on the screen so the code and work, otherwise the code wouldn’t work and it will do nothing.
Here is a GIF of what the code does:
Video:
Step 4: Now with the LocalScript inside the button which is inside the frame that we’ve opened, put it in the same code as listen above but with a twist: Change true to false so the frame will disappear.
local button = script.Parent
button.MouseButton1Click:Connect(function()
game.Players.LocalPlayer.PlayerGui.ScreenGui.MainFrame.Visible = false --We changed this from true to false
end)
Here is a GIF of what both of the code does:
Video:
And you just made an opening and closing UI, here is a medal! 
Tutorial 2: Tween/GUI Animations
You’ve seen many games that have some cool animations with the GUI/UI such as moving from one position to another that is smooth or the whole frame sizing smoothly from zero to the whole screen, that my friend is called Tweening.
If you don’t want to follow this tutorial and instead want to read the documentation, you can read it right here!
Steps:
Step 1: You should create a ScreenGui and probably a Frame / TextButton and add a LocalScript inside one of those UI elements, it should look like this:
Step 2: In the LocalScript, you should type/decode the script by saying:
local UIObject = script.Parent
UIObject.AnchorPoint = Vector2.new(0.5, 0.5)
^ This sets the AnchorPoint of the button or frame on whichever the LocalScript is inside of or known as the parent.
Step 3: When you do that, it should make the position anchor well so it won’t go off-set or wonky on your screen, now you should be able to add this into the LocalScript to see some action happening:
local UIObject= script.Parent
UIObject.AnchorPoint = Vector2.new(0.5, 0.5)
UIObject.Position = UDim2.new(0.1, 0, 0.5, 0)
wait(2)
UIObject:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))
^ This will make the “UIObject” position at (0.1, 0, 0.5, 0) and with TweenPosition(), it will smoothly move from where the position is to the position you’ve given the script/frame to do.
Step 4: You now know the actions of TweenPosition(), how about some TweenSize()! Tweening the size will smoothly
With the code below, let’s combine both TweenPosition() and TweenSize:
local UIObject= script.Parent
UIObject.AnchorPoint = Vector2.new(0.5, 0.5)
UIObject.Position = UDim2.new(0.5, 0, 0.5, 0)
wait(4)
UIObject:TweenSize(UDim2.new(0.4, 0, 0.4, 0))
UIObject:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))
Step 5: Now you know how Tweening works with the variables/functions you need to use them in GUI animations, there is another function with tweeting that you can do that is more efficient than having 2 ~ 3 lines of code, and that is TweenSizeAndPosition!
Here is the code that you can do with that specific function:
local UIObject = script.Parent
UIObject .AnchorPoint = Vector2.new(0.5, 0.5)
UIObject .Position = UDim2.new(0.5, 0, 0.5, 0)
wait(2)
object:TweenSizeAndPosition(UDim2.new(0.4, 0, 0.4, 0), UDim2.new(0.5, 0, 0.5, 0))
^ This will save you time and spaces of code inside your LocalScript whenever you’re making some GUI/UI animations!
If you’re asking about the Linear and Bounce, this section of the tutorial was mainly for TweenSize / TweenPosition and not much of those fast or slow movements, hope you enjoyed this part of the tutorial!
Sources and Credits:
Most of the stuff here was from sources such as the Developer Hub, Roblox own tutorials, and especially my brain which was a source as well, not really but you get the point. 
Sources:
Some handy plugins to use when working with UI:
Plugins:
Fin.
Well, that is all that I have for today, if you have any questions or would want to request this tutorial, make sure to PM me on the forums instead of in the replies as it would create a flood. We wouldn’t want that.
Check out this post!
Update Version:
1.8a
Estimated time to make this:3 Hours and 23 Minutes.
Anyway, keep developing, and make sure to wear your 3D glasses next time!
From now on, I will be listing updates onto this reply so I don’t have to flood the whole post: