6 Free and Simple UI Designs for any use

Resources Community Resources
#1

As a UI designer, I know that sometimes, it’s hard to come up with ideas that will fit the game you are trying to make the interface for. So I have come here today to share 6 simple yet clean looking (in my opinion) UI templates that you can use for free for your own games.

If you are new to UI design, you can use these templates to get the feel of what colours fit with what and just get the general idea of what decent UI looks like and eventually, you will be able to make your own amazing designs with the knowledge of what makes a good UI.

Screen shot

Screen Shot 2022-08-21 at 14.34.26
Screen Shot 2022-08-21 at 14.34.261910×770 424 KB

Place File
UI-Templates.rbxl (47.5 KB)

Un-copylocked game
UI Templates

Note

No Credits Needed

I might add more to this game as time passes on. If you have any style suggestions please feel free to reply to this post with those ideas so I can implement them in-game.

The gradient of the bottom left corner UI also has a script that makes it spin

41 Likes
#2

Really cool
You should make more like that.

3 Likes
#3

Thanks for this. I’m interested in how you gave the white one only 3 and not 4 rounded corners

#4

It was pretty simple actually. All you need to have is a non transparent background and just use 2 frames of the same colour.

For the example, I just used UI Corner on the background and then added a text label (without setting the transparency of the object) in a corner.

1 Like
#5

Third and sixth are my favorite, I would not recommend using such a large amount of transparency difference or gradient color difference.

1 Like
#6

If you’re talking about the 4th UI, I personally found it useful to have something like this for main menus.

Example:

Screen Shot 2022-08-21 at 21.20.02
Screen Shot 2022-08-21 at 21.20.021920×1354 135 KB

#7

The GUI text should stay in the black part and should not extend to the fading part.

#8

Do you mind if i use the templates for my plugin?

#9

Not at all! I created these templates so anyone can use it for free for anything they want

1 Like
#10

Hey, could you please show me how to make the text rainbow like the 4th template?

#11

If you go into the place file and click on the 4th UI and expand the objects, you will see a ui gradient under the TextLabel. After that you just set the colours. I set mine to increments of 0.2.

Example:

Screen Shot 2022-08-28 at 12.59.52
Screen Shot 2022-08-28 at 12.59.521250×294 98.8 KB

1 Like
#12

Whenever i add a Gradient to a TextLabel and modify the color sequence. It doesn’t change the textcolor

Does your TextLabel have special properties that applies the gradient to the Text

#13

Nope it doesn’t. All I did was add a UIGradient to the TextLabel

#14

In the video above you can see that i inserted a gradient to a textlabel and the text didn’t change.

Please correct me if i did anything wrong.

Sorry for the wait, i didn’t have a screen recorder

#15

I realised why it didn’t change. The textcolor was black and gradients don’t work on black, so i switched to white and it worked!

Sorry for bothering you :sad:

#16

I was going to say to change the font colour to white but I guess you beat me to it

2 Likes