Show off your UI designs

Yeah… I’m not too good at UI designs, so I think I’m going to try to “refine” my style, whatever that even is. (All GUI windows and “groups” are created without any real “style guide” to ensure they use consistent colors, but maybe my plans to let the player customize the color scheme will encourage me to use less colors overall.)

Here is how my new experimental style looks at the moment:


This is an attempt to redo my experience’s “windows”, keeping their obvious Windows inspiration but using different colors and trying a different way of adding detail to UI elements which are meant to be used within these “windows”. (I think the title bar looks pretty good now!)

For comparison, here’s what windows have looked like for a while before today:

I know they haven’t posted in this topic, but back in late 2022, @EpicTradings gave feedback about the “title bar” used by the old windows here, which really did extend too far to the sides. I wonder if they like the new window style above, which fixes this.

3 Likes

it has win 11 elements (button, toggles, sliders, ect…)
yes it will have fluent tweening animations

1 Like

Little project I’m working on. It’s for phone users

I designed the base in Figma

Figma

Studio

I thought it would be better for me to remove pronouns and just let users put whatever (Filtered) text they want in the title.

6 Likes

actually imo the colors are really pretty and unique. a lot of roblox uis and uis in general are boring and too consistent so this ui is refreshing and i personally like it

1 Like

I’ve seen so many great UI designs and have been wondering how you guys scale them.

What do you do to scale the UI?
  • I drag it and use a plugin.
  • I scale it manually.
  • Other

0 voters

Also, new window design:
image
I call it the “modern” theme.
There’s also the clear theme:
image
(buttons are added in the script)

2 Likes

W.I.P Menu

Home - Show off your UI designs - #1880 by aaamaruq

GFX not mine credits to Greenknife | My showcase

9 Likes

well i created this
image

6 Likes

I made really smooth UI animation

30 Likes

What tween easing style did you use for transitioning the card to fullscreen and back? It looks great!

Thank you! Here’s a Tween info

Card to FullScreen:

-- TweenInfo
local slideUpCard = TweenInfo.new(.42,Enum.EasingStyle.Back,Enum.EasingDirection.In)
local slideUpintr = TweenInfo.new(.56,Enum.EasingStyle.Exponential,Enum.EasingDirection.Out)
local scaleUp = TweenInfo.new(.32,Enum.EasingStyle.Quart,Enum.EasingDirection.InOut)
local parallaxInteraArea = TweenInfo.new(.88,Enum.EasingStyle.Exponential,Enum.EasingDirection.Out)

FullScreen to Card:

--TweenInfo
local slideDownCard = TweenInfo.new(.52,Enum.EasingStyle.Exponential,Enum.EasingDirection.Out)
local slideDownintr = TweenInfo.new(.38,Enum.EasingStyle.Exponential,Enum.EasingDirection.In)
local scaleDown = TweenInfo.new(.36,Enum.EasingStyle.Quart,Enum.EasingDirection.InOut)
local parallaxInteraArea = TweenInfo.new(.3,Enum.EasingStyle.Exponential,Enum.EasingDirection.In)
12 Likes


Title screen and main menu for my voxel building game! If you’d like to follow the project, feel free to join our Discord server!

16 Likes

Thank you! Also, yeah, I know exactly what you’re referring to…

(Looks at the many experiences that use bootleg Pet Simulator X dialog boxes and the cartoony, vibrant UI design that’s everywhere on Roblox…)

I’ve started to try programming my new windows (so the close and pin buttons will work and stuff), and so far, I’ve gotten it to take a Frame and put it inside of the window’s “shell” (title bar and outer border), which seems to work well.

Since that’s working, here’s a more fair comparison of the new and old UI styles. Looking back at the old windows, it’s crazy how I was fine with that “pin” button that had poor contrast, and how the windows didn’t have close buttons. I can only believe that my new windows are what I really wanted to add to my experience a year ago.


(Ignore the poor contrast of the newer window’s contents; That was meant to be put in one of the older windows, which used a darker, translucent background color.

3 Likes

it looks really good, why’d you cancel it?

1 Like

Looks so much better! My only advice would be to make the arrow button smaller. Your project has come so far

1 Like

oh my god
this is the best score system (idk what it is) i’ve seen… did you make the sounds yourself?

HOLY COW, THAT GRADIENT AND GLOW IS FIRE DAMNNNN.
I really like minimalistic UI’s and am not gonna lie I prefer them, but other types of GUI’s are actually insane aswell (keep up the good work)

(Late response but wtv,) Keep working because I wanna play this.

Question

I have the ability to create amazing UI, I know I can. I have both the experience and knowledge of both Roblox and Figma however, I’m severely lacking in creativity. Is there any way I can work to improve my creativity? I honestly believe it’s holding back my ability to be a professional UI Designer

1 Like

look through other people’s cool uis for inspiration. they will give u lots of ideas which will inspire you to make your own cool ui. for me personally i’m currently inspired by like old flash games because i feel they all have colorful, unique ui. for example club penguin, or webkinz or animal jam or fantage etc. but you can really be inspired by whatever you think looks nice

2 Likes

Ooo figma? I found a new design app/website thanks haha

1 Like