My UI is bad. Don't know how to fix

Help and Feedback Creations Feedback
#1

I need your feedback and suggestions on how to fix the UI for my game.

The style of the game is a Semi-Realistic Futurism.

UIFeedback
UIFeedback1400×802 69.1 KB

UI2

Main issues I know of, but don’t know how to fix:

  1. The game’s build style is dark, and uses mostly either greyish, or blueish colors. This means that UI ideally should have a different color scheme to stand out. But I can’t make the UI green, because in many places the green underlines the things that are active/in use. Like you can see in first picture upper right corner, that the male icon is in green, because currently the character is male.
    Other colors don’t really fit in with the style.

  2. I really don’t like the buttons on the left.
    The brush opens house customization, the shirt opens character customization.
    When giving advice about these buttons, keep in mind that they will not always be on the screen. Like the shirt button will be on the screen only when the character is at his house, or in the clothing store. The brush button will appear only when he is at his house, at other times it won’t be visible.

The bottom green thing is the HP, the blue thing is the Impulse (Stamina)

1 Like
#2

image
make the text smaller and change it’s font to some kind of futuristic font.
&
gradients everywhere and it’s done

2 Likes
#3

well, u can add UI corner in each of it it makes it so much better!

1 Like
#4

There is no futuristic font with good readability in Roblox.

UI Design is not that simple. How will a gradient help me if the color scheme itself is bad?

#5

No it doesnt. UI corner is more in line with cartoony/fantasy games, which my game is not.
And even if it does, UI corner won’t fix any of the problems I mentioned in the topic.

#6

Nice job on the game so far! For the colors, maybe mess around with the shades. Or you could try adding hints of purple. In my opinion, purple goes well with the futuristic theme you’re going for. This color wheel website may help you with picking a good palette https://color.adobe.com/create/color-wheel Although the game is dark, I believe that a few hints of neon will make your UI look so much better and stand out from the rest of the game.

Another thing I’d suggest is a more pixelated font if that’s possible. Make the icons have a gradient, perhaps? I am only a beginner, but I hope this helps a bit!

2 Likes
#7

I haven’t yet tried purple for some reason. Thanks for the idea.

There is a very good looking and perfectly readable retro-pixelated font in Studio. But shouldn’t the UI go along with the game? Wouldn’t it be bad if I used a retro font in a game that has nothing retro in it?

#8

General

I see TextScaled as terrible since it creates text size inconsistency in the GUI. Settle for a common size that fits certain elements or aspects of your menus (one size for all menus, one size for titles, one size for the health and stamina UIs, etc…). The fonts look too generic too. Try for Zekton or Jura.

Judging by the scaling of many elements, you’re primarily depending on Scale, not both Scale and Offset. Try to fill as much space as you can. Utilize and experiment with some UIConstraints and effects (UIGridLayout, UIPadding, UITableLayout, etc.)

Character Editor

I noticed that the corners of the menu are made up of Frames too. Try using a 9-slice image instead. For example:

image
Taken from Understanding Illustrator's 9-Slice Scaling | CreativePro Network

The gender icons are too small, and a user with moderate to fast mouse sensitivity may have some difficulties aligning their cursor to them. They should be close to each other while filling the same size as the other buttons. The gender icons also look too out of place because their designs are unrelated to Sci-Fi. A simpler, flat icon that can be colored in Studio is better.

Radial Health and (Stamina?) Indicators

They’re radial for a reason: They should move (counter-) clockwise, not horizontally or vertically. This may be harder to pull off though, so it’s up to you if you want to fix that.

Side Menu Buttons

As with the gender buttons in the character editor, they’re too small. The icons look fine, however they should probably match colors with other UI elements (notably cyan). A square form factor may be better.

Inventory

The buttons honestly look a little too big. If you plan to only release this for PC/Mac, and you want to use number keystrokes, then scaling the inventory a bit down may be better. If not, either you figure out how to automatically scale the inventory by device type, or you can keep the scale as it is now.

That’s all I have to say.

1 Like
#9

Thanks for the detailed response. Most of your arguments are valid and will be taken into account when improving the UI further.

However, my main issue, which is the biggest factor that can make or break my UI, yet remains unsolved.
The color scheme.
Do you have any advice for the colors, given the information about build style I provided?

1 Like
#10

Sci-Fi colors usually tend to be black and some other color (just like yours), although it may be too common to use cyan. You can look for other games with Sci-Fi UI, inspect their UI color schemes, and possible experiment.

I usually make modern and simplistic UIs, not so much for futuristic styles though, so I can’t really think of a good color scheme.

1 Like
#11

Gradients can significantly improve the UI. Here’s a gradient that I recommend:
goodGradient.rbxm (620 Bytes)

Your UI doesn’t seem too bad. The only issue I see is the hotbar’s Y position is not aligned with the health and stamina positions.

Are you asking me to recommend a color? Try these:

  • 255, 255, 0
  • 255, 128, 0
  • 128, 255, 0
  • 0, 255, 255
  • 255, 0, 255
  • 128, 0, 255
  • 128, 128, 255
  • 255, 128, 128
  • 0, 128, 0
  • 128, 0, 128

I recommend using the gradient I provided for the buttons on the left.

1 Like