User Interfaces | Chapter 2 (Currently In Progress. Chapter 1.4 Out!)

Hello everyone. I’m finally back with another tutorial for UI design. It’s been over 2 months since I’ve done tutorial on UI design and I’m back with more content for chapter 2 of UI design. If you have not already seen the previous tutorial (User Interfaces | Chapter 1), you can view it here. For those of you who don’t know who I am, I’m Sky, an avid UI & UX designer.

So, this time I’m going to be doing these tutorials in bits. Basically at the time I’m doing this (8/13/2020), this bit is chapter 1.2. After all the things I would like to cover in this tutorial are done, then it will mean that chapter 2 is completed. I won’t be making multiple DevForum community tutorial posts and instead will have all the content right here on this post. Anyways, here’s the things you’ll be learning about in this tutorial for UI design.

1. Contrast
2. Gradients
3. Consistency
4. Typography
5. Visual Hierarchy

I’ll also finally be giving some tips on how to get better on UI design plus link some things that will be useful to you for UI designing and you’ll get better with those things (resources and tutorials). Lastly, I’ll link some external programs you can use for UI design.

Tutorials


Chapter 1.2 | Contrast

Contrast


Contrasts are when there is a difference between two things, places or people. Though in this case, I’ll be talking about contrasts for UI design.

In UI design, you want to have good contrast. Not bad contrast. Now what do I mean? Well, let’s look at a quick example.

For instance, let’s just say you designed a user interface. Here’s a UI design:

image

Alright, it’s a frame with some text that says “Credits”. Not really much to it. Though the contrast… well yellow and white don’t go together well at all. This is bad contrast.

Now how does good contrast look like?

Here’s an example:

image

Red and white together looks nice. These mix of colors are user-friendly meaning these mix of colors aren’t color blinding to people. This is good contrast

Also, whatever color you use with black, it is good contrast
Whenever you are UI designing, always make sure the color choices you pick are user-friendly to the user who sees the UI design you’ve designed.


Chapter 1.4 | Gradients

Gradients


Gradients in UI design is basically when more than one color is used on the UI. Multiple colors can be combined which forms a gradient.

Here’s an example of a gradient:


There are 5 major types of gradients. Linear gradients, radial gradients, angular gradients, reflected gradients, and diamond gradients. If you make UIs on Roblox, you may not have heard about any of these kind of gradients. Not all external programs have all 5 types of gradients on them. For Adobe XD, you can only use two kinds of gradients. Linear and radial gradients. While on Figma, you can use almost all 5 types of the gradients I mentioned (you can use 4/5 of the gradient types I mentioned. The one you cannot use is the reflected type of gradient). On Adobe Photoshop you can get access to all 5 of these gradients.


Linear Gradients


Linear gradients basically have a line where you put dots on the line from the starting of the hue to the end. This is what I mean:

As you can see, there is a line. The linear starts from the left and ends at the right. Though there are only two dots on the line and three colors in the gradient. Why does the middle color of the gradient on the rounded square not show a dot and instead a box showing what color it is? Well, as you can see, each color on the gradient has that box that shows what color is on the gradient. It depends on what program you are used really. The line may look a bit different to you if for instance you are used to making gradients on Adobe XD. I made this gradient on Figma.

Radial Gradients


Radial gradients go in a circular pattern. This is how a radial gradient looks like:

This gradient was also made in Figma.

These type of gradients (linear and radial gradients) are often used on app icons. For instance, the instagram icon.

image

The instagram app icon used a linear gradient.

Angular Gradients


Angular gradients goes counterclockwise around the starting point. The line between the starting point and ending point of the gradient shows the angle.

Here’s how an angular gradient looks like:

This gradient has also been made on Figma.

Reflected Gradients


A reflected gradient is basically like a mirror. This type of gradient has a color that is mirrored to both sides of the starting point on your UI.

Here’s an example of a reflected gradient:

image

This example is not made by me.

Diamond Gradients


Diamond gradients create a diamond shape from the starting point of the gradient. The end point is one corner of the diamond shape created by the gradient on the UI.

Here’s an example of a diamond gradient:

This example was made by me on Figma.

How can I make gradients on Roblox?


First, go to StarterGui and insert in a ScreenGui. Then name your ScreenGui whatever you would like to name it. Next, put in a GUI element into your ScreenGui. Then, add a UIGradient constraint to your GUI element. Click on the “Color” property in your properties section. Then you’ll see a box with 3 horizontal dots on it. Click on that box. You should see this pop up:

There are two triangles below that white bar. Click on the one that is on the left. Make it whatever color you want. Once you do that, do the same with the right triangle. Then, you’ll see a gradient. To add more colors onto your gradient, just click wherever on the bar and then you’ll see a triangle where you clicked. Do the same thing like you did before.

My bar is now like this:

Yours may be different depending on what colors you chose and how many colors you applied on the gradient. This is how my frame looks like with a UIGradient constraint added:

For more info on the UIGradient constraint, click on this link: UIGradient [LIVE]


Next tutorial being added by September 8, 2020. This could change and be faster or could take a bit more time.
A video recording on gradients is coming out in a few days after chapter 1.6 releases.


So that’s it for now. Hope this tutorial helped you out. Thanks for reading and have a great rest of your day! :slight_smile:

14 Likes

Nice tutorial on color theory. To go more in-depth black goes well with anything but you want to reserve it for specific cases. An example that isn’t colored is rounded borders. It makes your game look modern. Another thing I would mention is how to get a GUI’s Aspect Ratio relative to your computer. You simply get the absolute size then divide them depending on what your want your dominant axis to be, for example, if I wanted my dominant axis to be Height with a given absolute value of {69, 0, 420, 0} I would do 420/69 giving me my aspect ratio of that UI of 6.08695652174. This is how we can get perfect UI scaling.

2 Likes

Hi. Thanks.

There is already a plugin for this, so no need to do it the manual way. The plugin is called AutoScale GUI created by @ZacBytes. I used to do it the manual way (a similar way to yours, but I don’t think it is like your way you’ve said as their was no need to do the math for scaling your UIs to fit all devices).

3 Likes

Chapter 1.4 is now finished! Go check it out on the tutorial! It’s about gradients. This tutorial was definitely bigger than chapter 1.2. More detail and more information is in this tutorial as there is more of a need to explain further on gradients and as well was there not one thing to cover on gradients and since there are 5 major gradient types, this tutorial took a bit more time to complete. I will be getting the video tutorial on chapter 1.2 out within a few days.

Thank you and have a great rest of your day everyone! :slight_smile:

Hello everyone! I’ve created a video tutorial on chapter 1.2! Check it by clicking this link:



Have a great rest of your day everyone. :slight_smile:

1 Like