Does anyone have any tips for designing UI?

I am working on a game but have hit a roadblock because I need to make a good UI before I can script that part of the shop menu.

1 Like

This might be a little simple and vague, but:

  • Make it easy on the eyes; use a color scheme that matches your game’s feel and doesn’t clash
  • Be consistent; Use a few font sizes and stick with them. Same goes for choosing a few fonts that work well together.
  • Make sure it uses scaling, so it fits on multiple screen sizes.
  • I’ll add some more stuff if I think of it.
1 Like

Make sure whatever you add to the ui shop is that its necessary for the player to see, creating unnecessary pictures/items can clog up and look messy to the player.

Give it some padding to let the player easily differentiate the UI elements.

Be consistent with that you use like text color, fonts, and outlines. Using too much outlines can give it a messy feel at some times but on other times can allow the player to read it more easier.

You should also design your UI to fit the design and theme of your game, making a cartoony game? Give it a flat and fun/cartoony style. You should also make it clear of what they’re seeing. If they see a sword, give it a description of some sort for the player to understand or a viewportframe of it.

Just take a look around the internet and see what other people created, I use google a lot and just look at UI

If you have a software like Photoshop or Adobe Illustrator, or even PaintNet you can create layouts and see what works before you start making it in studio, I do this a lot

example

I created several layouts before I picked this one, and now I’m creating it in studio

What I had when I tried to do it 100% in studio

It’s also nice to have a couple of people you can show your UI to and see if they have any suggestions on what you could change

Examples

image


image

3 Likes

I can’t stress enough the importance of getting second or third perspectives on your UIs. There’s many things that another opinion can bring to the table, and it never hurts to ask a friend what they think.

1 Like

And the DevForum’s is a great place for that!

If your UI gets at all complex (multiple pages, sections, etc.), be really mindful of how much space you’re taking up on the screen and how that impacts play. Does it create blindspots in a PvP game? Also, does the way your UI is laid out make sense to new users? Have someone playtest your game and UI to see if there are any hiccups along the way.

1 Like

Round is more inviting.

I know it is super easy to make a lot of boxes and focus on the back end coding. Something I would suggest to keep in mind are the shapes. Rounded boxes are more inviting, while sharp edged boxes are less inviting and less safe.

The shapes of your UI should reflect the desired response of the user. If you are trying to sell a weapon, it is better to have a rounded background. You want then to feel comfortable buying the item. The action requires comfort, even if the weapon is a nuclear zombie splattering sword from the seventh dimension of Hell.

The other aspect to be aware of is color.

The colors you use for your buttons affect how your user perceives the button. Pokemon-Go uses a lot of advanced color theory in it’s implementation. Fortnight also uses a lot of the same color theory it their UI. Lean towards pastels and away from primary colors. Avoid hard colors.

Play Testing

The last and most important thing is to get as much user feedback as possible. The best way to test is to hand your game to an eight year old who has never seen it before. Here are the rules for user testing.

  1. Tell them you made a game and you would like them to play it. You can say the title, but give no details.
  2. Shut up and watch what they do. Do not help them!!! Your job is to be a silent observer and watch how they interact with your creation. Your logic and that of a new user are not the same. You can ask for them to give you a commentary on what they are doing and why.
  3. Ask them what they like and what they want. Take this with a grain of salt, but learn to listen. Ask, “What would make this game even cooler?” Stay positive.
  4. Do this with several kids in various ages. See how the behaviors differ.

Hope this helps.

2 Likes

I have a few tips that may benefit you:

  • Make it colorful; make sure the UIs have color in them, but also take into account the colors you’re using. Make sure it matches the theme of your game while also not being hard on the eyes
  • Avoid Scaled property of text if you can. I think text looks a lot better when it isn’t trying to touch the edges of the UI.
  • Try using Tween, it makes the UIs cooler when using them.
  • In situations where you can avoid copying and pasting an object, avoid it (this can save some time and will be easier when adding/deleting).

I think that’s all I have. Best of luck!