How to make a clean, appealing UI

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.

:warning: DISCLAIMER :warning:

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.

image

Then, inside that, add a frame. Copy these properties for the sake of the tutorial.

image
image

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:

image

Then, change the image color to 29,29,209 and the image transparency to 0.7.
Should look like this:

image
image

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:

image

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:

image


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:

image

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:

image

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.

98 Likes

This is great, I needed this. Thanks for making it!

5 Likes

Great tutorial! Thanks for the information.

3 Likes

this is the best tutorial for us to make cartoon-ish gui change my mind
these plugins you provided have very nice patters for us to use! great tutorial, really helpful

2 Likes

Thank you so much. This means a lot because it’s my second tutorial. I would support the creators of those plugins.

3 Likes

-Inconsistent rounding
-Red is a bit too bright for the rest of the UI
-Text isn’t vertically centered

design matters.

Seriously though, you should probably discuss why the design you’ve made is appealing in general terms. All you’ve done is explain the steps in creating a UI so people can copy that exact UI. You’re giving the reader a fish, not teaching them how to fish.

25 Likes

It’s helpful for everyone else. The rounding is fine, it is appealing because it’s easy on the eyes.

2 Likes

Nice tutorial!

I’m a bit confused on why my plugin was recommended though? There’s nothing useful for UI at the moment. Either way, thank you.

2 Likes

Oh yea, it just helps me. Thanks!

3 Likes

Nice tutorial! Don’t really like the white outline but the stripes are really nice

2 Likes

Thanks! You can customize it to your liking.

3 Likes

Wow this is actually pretty great. It looks much better than the basic square, it’s painful to look at them even knowing that we’ll find a UI guy once we finished the scripts.

1 Like

Would anyone like another tutorial on something else related to UI? If it gets enough vote I will.

New UI Tutorial
  • New Tutorial Related to UI
  • No thanks I don’t really care

0 voters

4 Likes

I’m not so sure about whether the content matches with the topic or not. I see your topic is implying that you’ll be teaching the readers on making clean and appealing user interfaces. While the content seemed like you are teaching someone to create a specific UI with a specific design.

In this topic, we expect content that asks the question around the definition of appeal and cleanliness. Is appeal opinionated? Is there a limit of cleanliness before potentially ruining one’s experience when interacting with the product itself? What things to keep in mind when designing a product that users will absolutely love? Should there be a meaning for one’s UI’s appeal?

In your content, we see the content is suggesting how to make X. It’s like a recipe guide that doesn’t tell too much about things, only telling the user about making a specific object. Users only learn how to make that particular UI, but not how to make actually appealing and clean UI.

There’s a lot of factors determining whether a UI is appealing and… clean. And this article just don’t explain any of the factors to the readers. It’s like telling one how to make a game and then you just say “download this game!”

8 Likes

Thanks. Well, the idea was to show how to make a certain simple UI. And then the readers should have learned things from that and can apply it to other things. Though I agree with all your points. I appreciate your feedback!

5 Likes

Well… the topic told us that we are expected to know how to make appealing and clean UI. Meaning that it’s not “we should learn how to make appealing and clean UI once after reading this article”, but “we will learn how to make appealing and clean UI after reading this article”. Your statement just creates a contradiction with the topic itself.

3 Likes

Where?

1 Like

Right in the title?
изображение

5 Likes

no, it’s teaching you how

1 Like

What they mean is that you’re implying that you’re gonna teach design principles. Usually in a tutorial about appealing design, you’d expect discussion of how and why the design is appealing, not a basic step by step on a single menu.

A better title for this post would’ve been “Clean Menu UI Step by Step” or something.

3 Likes