User Interfaces | Chapter 1

[GameDevSky]

Hello. I’m Sky, a passionate user interface designer. In this tutorial, you’ll be learning about user interfaces. User interfaces are usually said as “UIs”. “UIs” is the abbreviation of “user interfaces”. There will be other abbreviations in this tutorial I will be covering. This is what I’ll be covering in this tutorial:

1. What are user interfaces?
2. UI, GUI, UX: What’s the difference between these 3?
3. How can I start making user interfaces?
4. How can I make GUIs in Roblox?

Finally, I’ll be covering some plugins you can get for free and use them to make your user interfaces even better when designing UIs on Roblox.

This is what I’ll be covering for chapter 1. So, without further ado, let’s begin!

What are user interfaces?

User interfaces (UIs) are things you see on a screen. For example, let’s just say you got into a Roblox game. You load into the game, and you see things on your screen, right? You see things like buttons. Here’s what I mean.:

I just hopped on into a game of Knightfall by @SingleSided and @FireExodus and this screenshot I have taken has some buttons and labels and things. These are the things I was talking about:

The things that I highlighted with red or blue are the things I am talking about. So these are user interfaces. Of course, there is way more user interfaces in a game than this. For example, if I click on the “Gamepass Shop” button, a frame opens up. That “frame” is a user interface basically.

So basically to give a quick summary, a user interface is basically objects on your screen.
Now moving on…

UI, GUI, UX: What is the difference between these 3?

UIs are user interfaces. Objects on your screen basically. GUI stands for graphical user interface. GUIs are basically a subset of UIs. UX stands for user experience. User experience is basically how the player(s) feel about the UIs or GUIs. If they think the UIs are too big, or too small, or other factors like this. This is user experience. Player’s emotions on the UIs/GUIs.

How can I make GUIs on Roblox?

First, open up Roblox Studio. Once you’ve opened up Roblox Studio, go open up a place. I just opened up a baseplate place I have. Then, once you are in your place in Roblox Studio, have your “Explorer” and “Properties” tabs open. You can open these tabs up by going to “View” and clicking on “Explorer” and “Properties”. You should see both tabs opened up then. It should be something like this:

Yours may be a little different if your tab’s sizes are different or if you have light mode on for studio. Though you should have both of these tabs opened up by then.

Now, the next step is to click on “StarterGui” and insert a “ScreenGui” in it. Your “ScreenGui” must be in “StarterGui”. Like this:

By the way, there are three different types of GUIs on Roblox. ScreenGuis, SurfaceGuis, and BillboardGuis. Usually user interfaces or graphical user interfaces are objects on your screen, but on Roblox, you can also apply these kind of “objects” onto surfaces or billboards. I’ll only be using a ScreenGui for this tutorial.

After inserting a “ScreenGui” into “StarterGui”, name your “ScreenGui” whatever you want. I’ll be naming mine “GUI”.

Now, in that “ScreenGui” you can insert GUI “objects”, such as “ImageButtons” or “ScrollingFrames”. There are 7 GUI objects you can put in 3 different kinds of GUIs. The 7 following GUI “objects” you can place in a GUI are:

So now, let’s place GUI “objects” into our GUIs! Just one thing before I do though. Always name your GUIs and GUI “objects”. This is crucial. If you are making a game, and have a lot of GUIs in your game, and you have nothing named, you are gonna have a hard time trying to find a GUI you are looking for, or when you are making your GUIs, everything is going to be unorganized for you. Anyways, let’s place some GUI “objects” into our GUIs now! Firstly, I put a frame into my GUI. The frame came to the corner of my screen. It looks like this:

It is not customized yet of course, but this is how it will look when you put a frame into your GUI at first before you customize your frame. Usually all your GUI “objects” you put in will be at the corner of your screen. You probably don’t want your GUI “objects” at the corner of your screen, so you can drag it to a certain spot at the screen, or use the position and AnchorPoint properties to put your GUI “object” somewhere else on your screen. For example, I want my frame in the middle of my screen. What I will do is click on my GUI “object” which is my frame, and go to the “Position” property. Since I want my frame in the middle of my screen, I would put the “position” property number to {0.5,0,0.5,0}.

Hm… it isn’t perfectly in the middle of my screen. This is where I use my “AnchorPoint” position. I put the anchor point number as 0.5,0.5.

Now the frame is perfectly in the middle.

There are 6 other GUI “objects”. TextLabels, TextButtons, TextBoxes, ScrollingFrames, ImageLabels, and ImageButtons.

Here’s a quick look at how a text label looks like:

A text label and text button look the same, but once you script the text button, the text button will basically become a working button.
Here’s how a scrolling frame looks like:

Looks a little ugly, but once you change the colors to it, it will look nicer. You do not have to script a scrolling frame. It works already, so no need to script it!
Here’s how an image label looks like:

There is no image in it yet, but all you have to do is go to the “Image” property and select a file of yours, and the image will pop up. Image labels and image buttons look the same, but once you script the image button, you’ll get a functioning image button! Why there is image buttons and image labels is because you cannot make the best of the best things on Roblox Studio. If you want more high quality user interfaces, you make it in an external software/program and export it as an image into Roblox. Then you script it to make it work. As this is a beginner tutorial, there will be no need to go to an external software/program to make user interfaces when you are a beginner. Once you get good at making GUIs on Roblox Studio, you can use an external software/program to make your user interfaces. Now you know about GUI “objects”, it is time to customize this “objects”!.

So, let’s make a simple GUI. Firstly, make a ScreenGui. Then insert a frame into it. Make the position of the frame {0.5,0,0.5,0} and the anchor point to 0.5,0.5. Once you’ve done that, you probably want to change your color of the frame. Go to “BackgroundColor” and click on the color thing to choose a color in the color palette. If you do not know how to use RGB color codes well, this is just right for you. Make it whatever color you want. Then, you see a border around your frame. If you want to make the border thicker, or make it go away, go to the property “BorderSizePixel”. Put it to 0 if you want no border on your frame. If you want to make it a better color, go to “BorderSizeColor” and click on that small square with a color in it. Make it whatever color you want. Then, increase the size by either going to the “Size” property, or clicking on the frame object in your explorer tab, and then dragging it to resize it.

Then, add a “TextLabel” into the frame. Make the “BackgroundTransparency” property numberto 1. Then, place your “TextLabel” wherever you want on your GUI, but I recommend putting it on the middle top because this text label is going to be your title of the GUI. Then, go to the “Text” property, and type in a title for it. I’m going to put the text as “Shop”. Now if you want to change the color of your text, go to the “TextColor” property. Click on the square with a color in it, and go in the color palette to choose a color, or use RGB color code(s). By the way, RGB stands for how much red, green, blue there is going to be to form that color. Now, want to change the size of your text? Go to the property “TextSize”, and type in whatever number you want it to be, and it will change to that size. Just make sure you don’t put in the number 0, because it won’t work. Remember, in Roblox Studio, the max text size is 100, and the least is 1. So whatever number within 1-100 will work. After you’ve changed your text size, you probably want to change the font of your text. Unfortunately, Roblox only allows you to choose a few fonts, but they are some decent fonts in my opinion. Go to the “Font” property and change it to whatever font you want. Now, let’s add a close button for the GUI. Insert a “TextButton” into your frame, and customize to however you want.

This is my simple GUI:

This is very simple to make. You can do even more by using other properties. Just go through other properties and see what properties you can use to optimize your GUI. You can also use constraints for your GUIs. Constraints may be explained in another tutorial, but perhaps not. You can explore through Roblox Studio, and try to optimize your GUIs to make them look awesome!

Plugins you can use when making GUIs on Roblox

I have two plugins for you to use to optimize your GUIs.

1. Roundify
2. AutoScale Lite

Roundify tutorial: Roundify plugin - #12 by [redacted]
AutoScale Lite tutorial: [Plugin] AutoScale Lite for GUIs - Scale your UI

You can also see a video tutorial on this as well: User Interfaces | Chapter 1 - YouTube

This was a lot to take in, but I hope this helped. Thanks for reading and have a great day!

[MarkiPr0 (Marki)]

I love this post and I appreciate you taking time to write it all down. I am very new to UI Designing and therefore this is gonna be very useful, not just to me, but to a lot of developers that have just started with the UI Designing, overall great job, and thank you!

[Xx_ProgrammerJoshy]

This post teaches me a lot about UI designing, thank you for stating it all down I am also pretty new to UI.

[GameDevSky]

Hey everyone! Hope you are all having a great day! I have made a video on this not too long ago, and you can view it here.

[GameDevSky]

Chapter 2 is now in progress! I’ve finally started working on this tutorial, but I’ve decided I’m going to break it up into smaller chapters. More information regarding this has been said already by me, so here’s the link to the tutorial in progress (the information is in this post by the way). You can view that post here.

I’ll also be working on the video tutorials, so I’ll be giving all the information on the posted I’ve linked. Have a great rest of your day everyone!

[Rallient]

This is honestly amazing! I’ve really struggled with UI design over the course of however long I’ve been developing, leading me to reach out to other developers and have to spend money on commissions. Hopefully this helps me!

[SillySorcery (James)]

Hiya,

I’m a big fan of your work on this UI Page, tis full of depth and goes over very core fundamentals of ROBLOX UI Design.

For people who are interested in doing this kind of thing, or getting to learn it you have definitely provided a fine resources on what to do.

I have a few thoughts on improvement if your looking for them;

Suggestions

1. Maybe you’d like to consider showing people how those two plugins work in future chapters, because personally I found their end-user-documentation confusing and it would be good to get it from the perspective of a user rather than a Seller or Developer of said Plugins.

2. In later chapters, maybe you’d like to go over other elements of UI Design e.g. Photoshop and how it’s exported and imported into Studio because I can do it, but I’ve never found a proficient way to do so. Maybe you have as a UI Designer by trade but of course, that’s entirely up to you.

3. Lastly, this is sort of my opinion and how I like to read things but maybe of some help in future when you write more. Consider using the “Hide Details” feature to separate your chapters out into sub-chapters so we don’t have to scroll for ages to find a certain thing.

But other than that, you are providing a very nice community resource and I applaud you for keeping it accessible to all.

Stay Safe & Well Done
Tom

[GameDevSky]

Hey there!

Thank you! I’ll update the topic with the hide details feature (I did for User Interfaces | Chapter 2 but I have not yet for User Interfaces | Chapter 1) and in future chapters, I may use these few suggestions you have said.

Thank you and have a great rest of your day!

-GameDevSky