Show off your UI designs

TwxstedReki · April 7, 2022, 11:13pm

Style: Minimalist?
Program used to create UI: Roblox Studio

So recently I finished planning my game and started designing the UIs. Honestly I’m very satisfied of what I’ve done so far. What do you think?

Menu Buttons:
Captura de tela 2022-04-07 195907

Lobby Buttons:
Captura de tela 2022-04-07 195932

Public Servers:

Private Server:

This is not finished as I still have to make the Create Server UI + the Server UI.

kavi_conner · April 8, 2022, 6:38pm

I’ve been working on a Roblox Gui!
Gui

TwxstedReki · April 8, 2022, 8:04pm

Decided to improve the Public Servers UI. Does it look better?

PulakpihuAlt · April 9, 2022, 1:55pm

The gradient is a personal resource I use, and the checkered background is not mine, its from a plugin called Interface Tools.

Deadwoodx · April 9, 2022, 4:07pm

Change the font, the font makes it look better, the title should be in Bold font, and down slightly transparent and smaller font

anvan2006 · April 11, 2022, 5:58am

my fault o.g
just concept (for now)

Y_VRN · April 14, 2022, 11:10am

Updated some stuff on my UI, and added a message window, and an automatic scaling system thing. Finally recorded without equalizer so it wouldn’t sound weird to others who also have an eqaulizer on.

(i’m not sure if it’s fine to add another update about my previous post here, so apologies in advance if it is not fine)

Xenonic_778 · April 18, 2022, 3:08pm

Ah…sorry dude but I’m gonna have to prove you wrong…

JoyfulFlowerMary · April 23, 2022, 10:36pm

I’m just starting to make my own game, so here’s my first GUI dialogs. Do they look good for first versions?
Style: cartoony, cute
Program used to create your UI: Roblox Studio
Pictures:

Cup-filling dialog (It’s not wide enough and wastes space…)

Trash GUI (This is the one I’m more proud of. It works like Royale High’s trash cans.)

Scriptify_YT · April 27, 2022, 2:59pm

Hey can i have some of these? They look pretty cool

LandnBlu · April 27, 2022, 3:08pm

GamersInternational · April 30, 2022, 3:36pm

Looks alright, the what would you like to drink away text needs to be made smaller and repositioned

IT1024 · May 1, 2022, 12:51pm

lol ive actully been thinking of doing ui in blender becouse i suck at ui lol i mostly do models

bitsplicer · May 1, 2022, 1:26pm

there is a video

Scriptify_YT · May 5, 2022, 5:02pm

Woah that looks sick can you tell me the tweenInfo you used?

mekboy21 · May 6, 2022, 8:12am

Style - UIBlox
Made in: Roblox Studio with the use of my new plugin, (Introducing UIBlox Tools [Plugin])

Although I just noticed this:

Oof.

mekboy21 · May 6, 2022, 8:15am

Dang that’s good, gives me vibes of the RH Ui hidden away in old places.

1NoFree · May 6, 2022, 8:44am

Style: Shop with UI Stroke
Program used to create your UI: Roblox Studio
Pictures:

cxmeels · May 6, 2022, 1:50pm

do you mean the currency button’s bouncing animation?

I’m actually using Flipper to animate, rather than tweens, which is a physics based motion library. the source code for the UI is all here:

github.com

csqrl/rotopia-ui/blob/default/src/Pages/Index/CoinDisplay.lua

local Root = script.Parent.Parent.Parent
local Components = Root.Components

local Roact: Roact = require(Root.Packages.Roact)
local Llama = require(Root.Packages.Llama)
local Flipper = require(Root.Packages.Flipper)

local Number = require(Root.Util.Number)
local Transition = require(Components.Transition)
local Device = require(Root.Device)
local Theme = require(Root.Theme)

local bind = require(Root.Util.Bind)
local merge = Llama.Dictionary.merge
local e = Roact.createElement

local Component = Roact.Component:extend("CoinDisplay")

Component.defaultProps = {
    show = true,

This file has been truncated. show original

JoyfulFlowerMary · May 7, 2022, 8:44am

Thanks. Is it because of the “Cartoon”/Comic Neue font? Royale High’s UI tends to use it (and it’s a cute-looking font).

Speaking of Royale High, I’ve created a new UI, all today (well, yesterday since it’s past 12AM)…

Style: cute(?)
Program used to create your UI: Roblox Studio
Picture:

It’s a color picker! Visually, it’s nothing special (but I think it’s better than my earlier UI designs); I’m more proud of how I programmed it.

Like RH, click and drag to change hue, saturation, and brightness. The main palette fades as the brightness is decreased (unlike RH).
If the cursor exits the palette, the diamond continues to follow the cursor around the edges, just like Roblox Studio’s color selection window (and unlike RH).
When a RGB text input is focused, the tab key advances to the next in line, just as expected.

I think the flavor/trash GUI’s now need an update to match this.