Show off your UI designs

There is quite a lot of negative/white space


I’m not really sure how you can combat this, maybe lowering the height of the black box a little and makign the units go into 2 lines rather than 3.

6 Likes

Style: Cartoon/Simplistic
Made in Studio

60 Likes

Can I use your style? I’ll credit you

5 Likes

UI kit in the future
Style: Material, minimalist
Made in Adobe XD CC


144 Likes

New to making UI, here’s what I can do so far.

Screenshots and Compiles.

Screenshot_7

21 Likes

Style: Tried to make it as modern as possible.
Programme used to create your UI: ROBLOX Studio.
Pictures:

Just started making rounded UIs.

(took inspiration from another person’s UI.)

18 Likes

Went for a cartoony style but tried something different by using a lot of pentagons and sharp edges instead of round edges like many games do. Everything was made with paint.net but icon renders were done by someone else in Cinema4D.

85 Likes

image
Not aligned, don’t use italic font on notification’s description.

image
So empty. Yikes.

15 Likes

Ah yeah, true. Thanks for some feedback though, I’ll work on that! :slight_smile:

1 Like

All done in paint.net :scream: Wow that’s really cool!

1 Like

I have made a subtitle ui for my game.

and they’re stackable:

for better quality click here! And here!

Here it is with rounded corners

better quality click here!

63 Likes

@VenomR10
That looks epic dude, especiallty the transitions, the only thing I can suggest is a hover effect for the main colour of the box change it to be a little lighter than it was, without the small colour change it doesn’t “feel” responsive, well in my opinion.
Other than that small thing this is very good.

@M_xpDev
Quick suggestions and notes,
Screenshot 1:
The admin button is a bit too far to the bottom left, I’d suggest moving it up a little bit and alligning it with the center box (The inner-box that is darker than the shell.)

Screenshot 2:
The only thing I have to say about this one is with the underline below “GAMEPASS NAME” it could be centered between the text and the title, it’d look better.

Screenshot 3: The “Username” and “Reason” text is too far to the left, it’s also at the bottom of the box, the colour scheme is also pretty bad for the GUI, it stands out too much.

Overall: It looks like you’re starting to make progress in UI Design, keep up the good work, don’t let my feedback discorouge you, it’s only supposed to help you learn.

@frederikhome
That looks pretty cool, the transition could get annoying in a real-game though, the idea and the execution is good ,that’s all I have to say, does the box automatically scale to the text that’s put in it, if it does it can be used for RPG style games.

6 Likes

Style: Simple - Modern theme
Programme used to create your UI: Animate CC / Studio

195 Likes

Not Roblox, but a little app I’m making for my bf for Sims 4. Would probably use this sort of style in Roblox for certain things:

Style: Simplistic, Flat, Modern
Programmes used: VS Code, Bootstrap Studio, CreativeTim, React (Roblox alternative is Roact), Electron

Pictures (sneak peek)

12 Likes

How’d you use Animate CC to make that?

2 Likes

Animate CC is originally for creating 2D Animation; traditional or motion design.
The behavior & tools to create assets is very similar to Illustrator CC, assist solely on Vector creations, so it’s pretty much the same way you’d make a logo with anything else i suppose.

The plus over illustrator is that you can easily make a sequence out of your vector work via the Timeline, with x Frames, you can convert all the frames to x FPS into a spritesheet you can eventually import as a image and play it on Roblox

RESULTS

the animation was made to be compatible for ~20 FPS, obviously, increasing it is accelerating the GIF, and not making it smoother as TweenPosition do

SPRITESHEET

As long your vector doesn’t contains much sources that have alot of pixels & colors variety (such as Photography), it will run without issue and the app will be able to optimize the whole pack easily (the Trophy one = 119kb)

i’ve been considering doing a tutorial about making your own gif in roblox but i’m not sure of it.

104 Likes

That honestly clears a lot of stuff up as I didn’t realise that you can use Animate CC to produce spritesheets that you can use. I think you should make a more elaborate tutorial on this, thanks for clearing it up though!

11 Likes

I myself know how to do it however a tutorial would be good so I could pass it on to other users when they request help, good luck if you do make it!

1 Like

The box automatically scales with the input.

1 Like

Remade the Minecraft Main menu

Style: RPG Menu?
Program used: Adobe XD, Photoshop, Roblox Studio
Pictures:
minecraftuigif

Game Link: the craft gui - Roblox

60 Likes