How do I improve my UI design

Help and Feedback Art Design Support
#1

I’ve been on this platform for quite a while but solely focused on scripting, I’ve read the docs but don’t really understand how to make UIs fit across different devices.

I have this UI for TD game:

RobloxScreenShot20240810_180120447
RobloxScreenShot20240810_1801204471681×628 405 KB

scripts.rbxm (19.6 KB)
And I struggle to make it responsive, it’s only good on my device.

The worst most undescriptive post I’ve made

2 Likes
#2

When you say make responsive do you mean like respond to the player interacting it(Simply changing screens on click) or like OVERLY reacting to the player(Like when the mouse hovers over it an animation or sound plays, etc.)?

1 Like
#3

There are a bunch of improvements you can make. A bunch of them.
As a UI designer myself, watching this is kind of hard. It’s difficult to look at, but there are a few things you can improve. By few I mean a lot.
1st, I hate the font. It’s playful, sure, but it feels mostly childish for a literal TD game. You can change it to Montserrat if you wish, or even Sans if you know how to apply it correctly.
2. , please add padding to buttons, labels, anything else.
3. make everything inside of a pallete of colors. It’s all different, make it softer (pastel-colored), use a limited amount of colors to begin with, and name those colors.
4. Please, PLEASE ADD PADDING TO THE SIDES. There is a very good reason as to why developers don’t put their UI right next to the borders; unreachable on mobile, may cut off on device monitors/screens.
5. Please change the icons for the upgrades (arrows). It looks low-quality, something you can improve, and you should also put everything together.
6. Add sounds and simple tweens to make the UI responsive. It’s not an animation that is going to solve your problems; what IS going to solve the responsiveness problem is giving the player indication as to how and when they are interacting with something. For example, Half-Life (1998) introduced something no game had ever introduced before; they made everything interactive. Even smacking the wall gave it a sound and a decal effect, because without it, it feels like you aren’t inside of that world.
Same applies here; if you don’t add a sound and maybe make it a little bigger (buttons), your game turns much more responsive.
7. Please allocate the buttons in better places. Why is “Towers” the only button on the left side? Make it a menu. Make everything smaller, and I mean much smaller. For devices like phones and tablets, here’s what you do:

  • You scale your UI as is, in a smaller format.
  • You add a few PIXELS (offset, not scale) to the sides.
  • Make sure to modify the button’s central point (anchor points) to where they should go.
  • There you go, good on PC, much bigger on mobile phones.
    This requires some practice, but you will understand afterwards. If you have any questions, ask me.
2 Likes
#4

Thank you for your feedback, I’m well aware that it’s poorly design and cramp

2 Likes
#5

It’s okay; practice makes perfect and I can see you did pretty well. Here are some pros;

  1. Your fonts are consistent throughout the entire screen. Varying too much can lead to much confusion and difficulty to read.
  2. You displayed the necessary information and don’t have any “BUY NOW” or “LIMITED TIME” gamepass bloat.
  3. A lot of the colors on the UI are legible and fun.

Keep practicing and you’ll come back with a better product!

1 Like
#6

Adding onto his response depending how your game is setup to be, you can utilize UIStrokes, im not a UI designer similarly I focus on the scripting portion of the app.

It also helps to randomly add any UI object and toggle(or play around) with UI customizers yourself until you get familiar with them. (You can see all the UI customizers by clicking the “+” next to a GUI object and scrolling until you get to the obvious category)

1 Like