Show off your UI designs

Today, I made my (still very much unfinished) experience’s disclaimer screen cuter! My friend and teammate @rafa902O15 designed the new logo (which is the third iteration), which inspired me to change everything else’s colors to fit it.


Also, the button that teleports the player to the test map has been redesigned to look more 3D, inspired by some of the buttons in Royale High. In the future, most buttons will have this look, because it looks nice and animates well!
The new button click animation.

Without the new color scheme, the logo looked out of place; If you want to see what it looked like, click below…

EDIT: Rafa also made the “PMM” heart graphic that is shown beside the text in the blue box.

7 Likes

For context here’s what some of the variables mean:

  • start: The angle where the slider begins (going clockwise)
  • finish: The angle where the slider ends (going clockwise)
  • angleSize: The angle size of the slider (it is 270 degrees in the gif)
  • clampSize: The angle size not being taken up by the slider divided by 2 (it is 45 degrees in the gif)

And this is what the core of it looks like.

calcSize(
	clampValue(
		convert180sTo360(
			math.deg(
				math.atan2(
					mousePosition.Y - hitboxOrigin.Y,
					mousePosition.X - hitboxOrigin.X
				)
			)
		) + 90,
		start,
		finish,
		clampSize
	),
	start
) / angleSize

The convert180sTo360 function takes the 0 to 180 (0 to 180) and -180 to 0 (180 to 360) degree angle and converts it into 0 to 360 degrees.

Then, the clampValue function makes sure the angle isn’t going out of the slider range and handles the logic behind what happens when the user is out of the slider range.

Finally, the calcSize function finds the angle difference between where the user’s cursor is and where the angle starts.


After everything, it returns a value ranging from 0 to 1 which is sent to a function to apply it to the entire GUI.

3 Likes

Looks alright. Saying “active users” and then having an icon for the like/dislike ratio doesn’t make sense though, I’d add an icon.

2 Likes

Really nice! The only suggestions I have are to snap “25/75 Badges Achieved” and “20.54 Total Hours” to the same Y level. Same with the content right above. Also, decrease the padding between the robux amount and symbol.

Cool! Just a few suggestions, though. I recommend more space between the description text and the edge of the frame. Also, pink on blue in general can be extremely difficult to read, so I recommend aiming for a dark color for text. Try purple since it should fit okay with the color scheme.

Also for user experience, I recommend making it a priority to find the issues in the scripts that make them not handle well after the player resets their character, since it can make the game feel much less polished.

1 Like

Looking at that screen again, you’re right, the info section didn’t have good contrast (which I actually try to have now). I’ve added some padding and rewrote the warning at the bottom.


If it was farther in development (and was publicly accessible, fixing bugs would be more important, but only a very small set of people can check the experience out currently, so it isn’t as bad as it could be.

1 Like

Okay. I recommend fixing as many bugs as possible before moving on since that will greatly improve workflow in the future even if there aren’t too many players visiting.

Really cool! Just remember to align your greeting message on mobile to the left.

currently working on a ui mockup of what a mobile app redesign could look like

inspired from the one shown at rdc 2023 btw

7 Likes

Looks pretty good so far, no complaints.

1 Like

Screenshot 2024-02-17 102922

My logo!
(i dont know if its considered UI but ill show it off anyways)

Style: RPG (I think i don’t quite k now what i was goin for)
Program: Roblox Studio
Videos:

Any feedback / recommendations are super appreciated :slight_smile:

6 Likes

Whoa now this is amazing. I might take inspiration from this :smiley:

1 Like

Pretty fun practice project. Took me ~ 1 hour

5 Likes

Is this the new update from ro2016

I wich this was Roblox it’s very cool much better than the Roblox website

New ui design for my egg hunt game any though and feedback game release next week


Tp pass map




Stats calopased



State expanded



Leaderboard


I haven’t a image of the player card rn



Shop





Passes enabled disabled menu match topbar





Btw this is the ui from previous year egg hunt

This ui is…
  • Good
  • Bad
  • Can be improved ( if so tell me I will so s sort system use in paralleized engineers too )

0 voters

You rate this ui
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

0 voters

this is AMAZING. you should definitely use sound variations, however. Just that, and it’s an 11/10.

1 Like

ok ngl i would say this is REALLY good except the icons which honestly dont really fit the dark vibe. Look at the achievements and above icons try to see if you can mute the color a bit more
but your both better at scripting and ui design, i can tell