Need help making UI look better

I have a frame that pops up when players want to start a game/

image

I’m not happy with how it looks but I don’t know what to add/change.

Can I have some suggestions, please?

1 Like

The Yes and No button text should have the same font with the message font. I think the ui shapes should be rectangular to go with the text font.

Edit:
Also the shadow of the frames are not noticeable, either make the ui flat or make the shadow bigger.

8 Likes

Ok but do you think the font is good?

1 Like

The font would depend on your game genre. Currently I assume the font is appropriate because it has an arcade feeling to it.

2 Likes

Yeah the game is an arcade game.

what colour would be better for the text.

The color of the text in the message box seems fine, but I would go for a richer color to really give that arcade rgb screen feeling. The color of the button text is fine.

1 Like
  1. Keep the font constant.
  2. Keep the colour scheme decent - your current colour scheme has too many colours.
  3. The “Cost: 5 tickets” should be smaller in size in my opinion, with some spacing between that and the rest of the text.
4 Likes

It is important to note that you also need consistency when designing a UI. What I meant by this is that all elements should be tied together, it should follow the same theme.

For example, your font between the question and the button looks different. Naturally, it would look better if you choose a same or similar font. You might as well adjust the weight of the font on the buttons, it seems like too thin for me. To make it bold, you can select the bold version of the font or use TextStroke to make it look heavier. Try to experiment with other Properties of a TextLabel, too.

Below is a picture of an intro UI I made not long ago, for a restaurant game.

rrrrr

1 Like

I would give the buttons their own individual shadows as well as enhance the shadow of the frame itself. As stated by wevetments, the fonts of the buttons should ideally be the same as the rest of the frame. I would also desaturate the buttons ever so slightly so that they aren’t overly pervasive, like so.

I’m not sure if this is the case in arcade games, but “Cost:5 tickets” is grammatically incorrect as a space should always succeed a punctuation mark.

1 Like

If your going for an arcade feel I might suggest looking around some old arcade game screenshots and making sure everything matches.

Right now the rigid text doesn’t match the smooth background and buttons. You might be able to make it feel a bit more classic by imitating larger games and having a 2D looking highlight or arrow instead of the buttons themselves, for examples: (note all are from google searches)

Pac-Man

image

Asteroids

image

TMNT arcade game

image

Generic arcade game design

image

As examples all, except the last picture, are from classic arcade games. None of them have fancy 3D animations, but they match their text and theme.

I would also almost suggest removing the “cost:”, but that’s more of a personal thing. I hope we get to see updated pictures! I’m a sucker for arcade style games.

2 Likes

I’m recommend to switch a window color to milder and good choose the background color to the text color. In addition, I recommend using a same fort here.

You can separate the cost too and make a space after “Cost:”.

2 Likes

I recommend changing the color of the letters to one that looks better.

There are only two parts of this UI that I would change. Firstly, the text asking the question about confirming whether or not you will be buying the item should be of a different size and boldness then of the one below describing the price. The second part of this UI that I would change is to make the Y/N text consistent with the above text, as the two styles do not blend and is not easy on the eyes.

1 Like

The text kind of look bland, maybe spice it up with different fonts?

1 Like
  • Make all text matching
  • Yes and No text box around it have shadows including the background(orange).(Outlines under it with a darker colour of it) Example:
    image
  • Change the 8-bit text colour to some darker orange to match the background
2 Likes

Maybe change the colours to something more neon? ( I don’t mean glowing, I just mean bright )

1 Like