(hopefully) The last UI tutorial you'll ever need

When users join a game, they interact with user interfaces. Unfortunately, not all user interfaces are made the same, and today, I want to teach you on how to make better user interfaces in the last UI tutorial you will probably ever need.

Just before I go through everything, thanks @csqrl for teaching me some of the techniques that I will discuss in this post.

Step 1: General Advice

Before going onto new techniques that you can use to make better UIs, I just want to provide some general advice that I didn’t follow before, but is quite helpful.

  1. Test your UI

    Testing is key to making great UI. Use a wide variety of devices to see how stuff like menus work, and see whether you could improve the user experience.
  2. Don't overuse gradients

    Gradients look wonderful, but I see that people overuse them at times. Ideally, you should only use them on backgrounds (e.g. a loading screen), or occasionally, on icons (only if you're trying to make a fluent look). Gradients can also be hard to see for people who have eye-related conditions. In most cases, using solid colour is better. If even after this, you still want to use them often, make the gradient subtle.

Step 2: User Experience and Accessibility

Making a UI easy to use and accessible is 10 times better than it not being easy to use and accessible. Here’s a few tips on how to improve user experience and make your UI more accessible to players.

  1. Adapt your UI to each device type

    As you may know, Roblox supports PC, Mobile and Console. Unfortunately, not all UIs work well on all 3. With a little bit of code for detecting which device a player might be on (take a read at [https://create.roblox.com/docs/scripting/input/index](https://create.roblox.com/docs/scripting/input/index) and use if statements to change your UI according to the device it is being used on), you can make stuff a lot easier, for example, it might be a good idea to make some buttons larger for mobile users (often isn't needed due to how Roblox handles display scaling), or it might be a good idea to add controls for console players.
  2. Adjust contrast to be more accessible

    At least a third of people do not have normal vision, this means that they may struggle to see the contents of a user interface depending on the colour palette used. I'd recommend taking a look at [https://whocanuse.com](https://whocanuse.com), and seeing how your UI appears for people with different eye conditions (note, this only works with solid colour and will not work with gradients).
  3. Consistency

    When designing your user interface, keep it consistent with the other pieces of UI in your game. You should also keep spacing between items and padding consistent as well!

Step 3: The pathway to better UI

Finally, I want to let you know about a few Studio properties and instances that will help you level up your UI designing skills.

  1. Use the AbsoluteSize property!

    When positioning things, think about using AbsoluteSize. Using this combined with using Offset instead of Scale and some math can really help you improve your UI. For example, if you want a menu to be at the bottom, instead of using Scale, you can use a ScreenGui to detect a screens size, then you can use some math (and the AnchorPoint property, in this case set to 0, 1) to place your menu at the bottom using Offset instead of Scale (make sure to check for updates to a players screen size as well!). To learn more about this, I'd highly suggest looking at the documentation page: [https://developer.roblox.com/en-us/api-reference/property/GuiBase2d/AbsoluteSize](https://developer.roblox.com/en-us/api-reference/property/GuiBase2d/AbsoluteSize).
  2. Use UIAspectRatioConstraints

    UIAspectRatioConstraints is a useful instance that you can place inside of a piece of UI to make it stick to a certain aspect ratio. For example, if you want something to be in a square aspect ratio, set the ratio to 1. I would also advice messing around with AnchorPoints if you decide to use this, since otherwise, things may not be positioned as exactly as you might of wanted.
  3. Make sure to have sufficient enough padding on UI elements

    When browsing around the DevForum, I see that people sometimes have little or no padding on user interface elements, this can be solved pretty easily through the UIPadding instance. Using this, you can provide how much padding you want on all 4 edges of a user interface.

Thanks for spending your time reading this tutorial. I really hoped that you managed to learn something new. If you have any other advice for developers, or suggest changes to this post, please make sure to put them in a reply!


But how do I start
Which software? Which function? Which button to click :cry:

1 Like

This focuses on advice to make your UI better, not exactly how to create a UI

U cant edit the absolute size property and @Megalodox_Official there are many different plugins

I never said anything about editing that property lol, I’m aware that it’s read only.

Oh okay, it’s like the advanced concept and creativity help, not a basic tutorial. Might be useful after, but do u have suggestions for any good and cheap softwares :D?

1 Like

I’d recommend taking a look at Figma.

@DavidNet22 has a thread on useful softwares for many different things.

1 Like

You should move this topic to Community resources because this isn’t a tutorial. these are some tips to make better UI

1 Like

I think it would work better as a tutorial, however I can see your point of people probably referring to it as a resource

This is gonna be the last UI tutorial I’d ever need. Seems interesting considering I’d ever done UI in my life.

1 Like