Feedback on Playful UI

Help and Feedback Creations Feedback
#1

:wave: Hello!

I’m currently working on a more lighthearted project, and I decided to create some UI for it.

Here’s the video!

The name is (probably) temporary.

The font is made by me - I created it using a drawing tablet and Calligraphr (surprisingly helpful & free!)

Then, to accomplish line boiling (slightly moving lines), I traced the font over with slight differences. This makes it much easier to achieve the human look to a font without having to rewrite it every time it’s needed. I then just switch the image back and forth every 0.5 seconds.

The lines are just a repeating texture that tweens one direction then teleports back at the end of the tween. One small issue with this though - I had to use ClipsDescendants to make it look correct, but it doesn’t work with the Rotation property. If anyone could find a workaround to this that’d be great!

Any amount of feedback or tips would be super helpful and appreciated!! :grin:

19 Likes
#2

The Ui it self is dang awesome but the text could be capital and it could be highlighted highlighted a bit more in my opinion

#3

I intentionally made them all lowercase to maintain the playful feel - I will think about highlighting the text with a darker colour though.
Thanks for the feedback! :slightly_smiling_face:

4 Likes
#4

Hello! I think your UI is amazing. Those effects you added are astonishing. However, I notice a small exit button in the corner. Why not make that like the other 4 buttons? Another idea I have is to make the frame or image on the right side have some sort of effect like images of the game or tips. Besides that, really nice starter UI. It really appeals to me!

2 Likes
#5

it’s good and all, it’s really great, but the small ‘EXIT’ button, bottom left, kind of takes away some of the playfulness ur trying to express
exit

#6

Love this idea! I’ll definitely experiment with this.

This is just a debug button haha. I forgot I left it in the video
Thanks so much for the feedback! :grin:

1 Like
#7

This is just for debugging, I forgot I left it in the video

#8

I feel like the UI is amazing. one thing I hate is that the text is way to skinny. Like make the text black and maybe add a new font to it. besides that 10/10

#9

NP! Glad that I could help you!

#10

The white background of the UI is a bit dull. You could try adding some sort of border or texture

#11

Unfortunately I can’t due to the way ClipsDescendants works, but thanks for the feedback! :slightly_smiling_face:

#12

The UI is pretty awesome!

There’s only one thing though:

  • Try making the white frame a gray color like (50, 50, 50) in RGB. As that would match the gradient next to it.

Keep up the good work and creativity!

#13

Thanks for the feedback!

Unfortunately I can’t really change the background colour too much as it messes with the lines that move in the buttons:

image
image1271×709 86.1 KB

They use ClipsDescendants which doesn’t perfectly match the rounded box, UICorner doesn’t affect it either.

If I want to change the background colour, I need to change the colour of the lines as well - which looks fine in some cases, but not always (image above as an example)

#14

The font was hand-drawn to fit the style of the game - I think it’s pretty readable and conveys what I want to be conveyed.

The text is white to give a more playful and coherent feel, I’ve experimented with a lot of different colours but white seems to be just right for what I’m going for.

Thanks for your feedback though! :slightly_smiling_face:

#15

Oh, I see what you mean now.
It’s really annoying that roblox haven’t made ClipDescendants work with UICorner yet. :confused:

1 Like
#16

Yeah, I read they can’t for the same reason they can’t do rotation with it: it only works using 1 rectangle.
It would quickly grow to be too many rectangles to be fine for performance.

1 Like
#17

Would you mind sending me a file of the part of the UI that contains the buttons? I may try to find a workaround for this while keeping everything else work the same way, and I’ll let you know if I do.

#18

LoadScreenUI-atatakaiz.rbxm (11.2 KB)

Here’s the file! Apologies if it’s a bit messy.

#19

I absolutely love this 9.8/10!

It would be cool if the sun down text was animated and also if the exit button was a bit bigger, no one will really focus on it!

#20

Great news!

I was able to find a simple workaround for the issue!

image
image1258×727 144 KB

Here’s how I’ve done it:

  1. I inserted a Frame inside a button, then resized it to be the exact size of the button. And then I inserted a UICorner inside the Frame I inserted, and set its CornerRadius property to (1, 0).
    image
    image

  2. I made the Frame transparent. Then I inserted a UIStroke inside the Frame and set its properties to the following in the screenshot. So that the stroke effect covers the area around the button.
    image
    image
    image

  3. Then I copied the Frame and pasted it inside each of the buttons.

    image
    image218×627 26.3 KB

  • Note that you can do this with any color you want. Just by changing the BackgroundColor property of the main frame, and making the Color property of each UIStroke the same as the background.

And here’s the file with the workaround:
Workaround.rbxl (76.0 KB)

also I noticed that your way of organizing the UI is the exact same as mine lol

1 Like