First UI Design

Hey all. It’s been a long time since I’ve posted here.

From first glance, it does look rather basic but remember I am constricted with what I can and can’t do inside ROBLOX Studio. This was mainly to learn the ropes of UI.

I’m looking for feedback on my first UI that I have completed all in ROBLOX Studio without any external software assisting me such as Figma, Adobe XD etc.

I used a combination of frames, text labels and and text buttons; I used a balthazar font.

Really looking to hear from you guys be sure to let me know what software I should use to assist me on my UI Designing journey!
RobloxScreenShot20230211_003734897

3 Likes

I really like what you did! I thinly toasted improve it you could add some UICorners and UIStrokes, but that could just be me, and also for the software I think that if you have a tablet than you could use Procreate, which is really easy and useful, but if you have only a PC then I don’t know

2 Likes

Oh wow, didn’t realise you could have curved UI frames, I’ll be sure to experiment with UICorners and UIStrokes.

I don’t have a tablet I’m afraid does Procreate work on an IPhone X as well?

1 Like

No sadly no, it’s only for tablet from what I know, for iPhone I don’t know what you could use sorry :person_shrugging:

1 Like

Really like it and congrats on the amazing UI. When I started UI design I wish I had these things in mind:


Color: Use a set of 2-3 colors to make it not overly werd on the eyes and try to use color (-white and black/grey) when you need to drag attention to something (a buy button). My prefrence is to design in dark mode then add color later to things that look bland.
Corners: As said before try to use the UiCorner element and adjust to your liking. (I personaly use 0,15) or (0,10). Not everything should have the same radius as the smaller the element (even if using the same rounding) the bigger the curve.

Things I Really Like


Buy Button: I really like the way you made the buy button overlap the text. It looks really clean there and I love how you did the same thing with the 'Boosts' text, with a rounded corner it would look perfect.

Visibility:
I love how everything is spaced perfectly and looks really nice overall. The only thing I would suggest to improve that would make the X button be fully within the frame and using a playfull (rounded) font. I like that everything is good contrast (white text fits the backgrounds (i.e. no dark text on dark bg)


Overall Rating: 2 Lettuce / 3 Tomatoes or 8/10
To be a 10/10 you would need to add following: Rounded corners. X layout improved. Tweening (More advanced, focus on design rn)
1 Like

2 Likes

I really like it! It looks really better now! The only thing I think si wrong is how the borders are big, they’d even a little too big to me

Yeah, I think it’s personal preference tbh.

When it comes to low poly cartoony type games I think a slightly larger border is more professional.

Pretty good for a start! Here are some things I’d reccomend:

  • Add UICorners
  • Bold the text
  • Play around with the fonts
  • Make the “X” button bigger
  • Make everything centered, Maybe use a UIGridLayout
  • And of course, keep experimenting and have fun!

I really like the colors you used and overall I think it’s great! Hopefully you can use my feedback to create even better UIs in the future! Good luck!

Cheers, I’ve implemented UICorners already but I’ll definitely experiment and check out UIGridLayout.

It’s something I’ve used for a UI on one of my games. It basically makes everything uniform and uh, in a grid, symmetrical!

experiment with different colors or use existing color pallets and use uipadding, try out different fonts other than that not bad for a first ui

This is great for your first ui!

Colors : The colors are okay. Try to make not to make it too hard on the eyes. Depending on your style, you may use a dark colour range or light range. I use a dark range as I like the effect that dark colors give.

UICorner : UICorner is one of the best ways to make your UI look better. You see the sharp edges, they can turn into softer edges. Here is an example. Try to ignore the rest.

coolstuff

Try to ignore the rest and look at the small rectangles that say flight, speed and jump. They have rounded corners and enhance the look of the UI. For learners, you should experiment with UICorner.

Tips :

  • Try to center the text and everything
  • Play with fonts and see which one fits. I know it is tedious.
  • Keep practising and you will eventually become better.
1 Like

There’s a spinoff of Procreate on iPhones called Procreate Pocket! Sadly, it is $5.99

is ur game low poly or cartoony? then don’t use that fantasy lookin’ font

That’s definitely true. minimum 30 ch

I made a small frame to show you how it should look like if you are going to go for a cartoon-styled game.

image

Use paint.net it gets the job done. Or use photopea it’s a free replica of photoshop

You should use Figma instead as it works on pc and mobile. It’s also used by most professionals.

Some people dislike the feel of figma (me) I prefer adobe xd or lunacy as I just dislike how it works I dont know why it just feels weird.