Show off your UI designs

UI Kit
-Currency UI
-Main Buttons

7 Likes

Windows-Like Notification Ui.
Includes Animations, And is fully functional and Simple.
image

image

I Think of adding blur to the background but I’m not quiet sure
just yet. - Old

I decided it does look better with blur and i also made
an error and a warning version bc why not :smiley:

20 Likes

First prototype for a Ui I’m making for a hangout game.


F

11 Likes

New Deathscreen for the New UI Update on my game “Knife Mania”

12 Likes

Different background Saturation for different types of notifications idea is so cool!

1 Like

I forgot about this topic, since I’ve been posting updates about anything new that I create in the “waywoc” topic, but I’m back with my latest WIP GUI design.

Style: Unsure, might be cute
Software: Roblox Studio only

This is a basic menu meant for restaurants and other places where you could order food. There are two types of menus, “grid” and “list” layouts, meant for category and specific food selection purposes, respectively.



Nothing is scripted yet, but I’m trying to somewhat refine my UI design style. If you’re wondering why I’m not using external programs or images for this window, it’s because I’m thinking that I’d like to let the player edit the UI’s color scheme and use themes, just like Microsoft let users do before Windows 8.

4 Likes

Is this for a game like minus descendance? It looks great!

I like the style, although I do think the colors clash a little; making a constant color theme could help.

1 Like

Some “modern UI” I’ve been working on. It’s my first time doing this sort of style so it’s bound to not be great but I think it’s okay for a first try :melting_face:. I mostly need to work on my tween usage and how it scales

7 Likes

Updated edition from : Show off your UI designs - #1555 by pon_dgon
Blurred background idea source: Show off your UI designs - #1884 by ImSnox
Style: Glassmorphic menu UI
Programme used to create your UI: Roblox studio and Gravit designer
note: some string is not fully translated yet. and some animations are not working temporary :skull:
https://www.youtube.com/watch?v=VsVo3uqy20E&ab_channel=PON

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

10 Likes

well i created this
image

6 Likes

I made really smooth UI animation

33 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)
13 Likes