UI Designing Tips

[lor5s]

Im looking for tips, help, walkthroughs, literally anything that can help me with GUIs. I don’t think my UI design skills are neccesarily awful, but they could use some work as the extent I do is basically textstrokes and semi-transparent black background. Help?

[ChiruDonut (Vilu)]

I’d really recommend you to look for tutorials on different platforms (mainly YouTube or even here), as many devs record dev logs or straight-up upload tutorials for beginners or advanced designers, where they go over the principles of useful GUI and even break down some of the GUI of Roblox’s best games (such as Adopt Me, Pet Simulator, etc).
You can easily learn a few tips and tricks to make UI’s on Roblox Studio or create even more complex designs and assets on vector graphics software such as Photopea and Photoshop, just by watching, analyzing, and putting into practice the knowledge you got from other people.

[Infected314 (obvRedwolf)]

Some general tips include:

• Using scale instead of offset for Scale and Position.

• Using 0.5, 0.5 as your anchor point. (this will make the position scale correctly on different aspect ratios)

• Making UI that feels responsive such as a button that plays a sound and gets bigger when your mouse overs over it.

• Using plugins to save time. (don’t rely on them for everything, as plugins are in the end, just predefined code)

• Using all the tools you have to your advantage, such as the Autoscale plugin suite, photo editing software (Photoshop), the Roblox Dev Forum, Youtube, and more.

• Using Tweens to your advantage for better looking UI.

[S_undown]

Even if your GUI doesn’t necessarily look good, as long as there’s a natural flow to your GUI, you can’t really go wrong. Put buttons where you expect to find them. Nest sub-menus in a logical manner. Make navigating the menus as easy as possible with all input methods (mouse, keyboard/gamepad, and touch.)

For Roblox specifically, get comfortable with what the Roblox engine provides in terms of GUI objects. Some things I’ve learned over the years:

Have a plan.

It doesn’t need to be a concrete plan–if anything, having flexibility in your plan lets you make changes as you need to without pigeonholing yourself.

• Pick two fonts for your GUI - a display font, and a body font.
  The display font is what you’ll use for buttons and headers that are in a big font. You’re not expected to read anything in this font for more than a moment. Fonts that fit the “display” role include Denk One and Press Start. Your body font is what you write anything of length in. This means descriptions, informational tooltips, etc. Common body fonts include Arial and Source Sans. I would not use Gotham as a body font due to how wide it is.
• Make quick sketches of how you want your GUI to look.
  This is where tools like Figma come into use. Try to design a look and feel for your GUI that you can reproduce within Roblox. However, don’t be afraid to…
• Look at how other games, especially AAA titles, do their GUIs.
  There’s a lot to be learned from the big game studios that hire people to do this as their job. Try to dissect their best features. Figure out what you do/don’t like about them.
  • Remember that a lot of AAA game developers design their games to be played on consoles. These kinds of interfaces are usually called “ten-foot” interfaces, meaning that they’re supposed to be legible from ten feet away. Ten-foot interfaces have two handy benefits… one, their huge interfaces just so happen to be touch-friendly when scaled down. Two, if you’re mimicking a AAA game’s interface, your interface will likely be compatible with controller navigation… and, by extension, keyboard navigation.

Make your GUIs by hand.

When you make your GUIs by hand, typing in values directly into Size and Position, you have full control over what your GUIs will look like in the end.

• Ignore the built-in UI draggers.
  You will make a mess of your GUIs. You will end up with nonsensical scale/offset hybrids that make no sense. This “tool” actively hampers your ability to make good GUIs.
• Don’t bother with scale conversion plugins.
  I have found that the scale conversion plugins tend to make GUIs into complete messes. Use Scale out of the gate, and ignore Offset. All of your Offset values should be 0. If you think you’re in a situation where you need to use Offset, you’re not. You need to use one of the other GUI layout elements.

Build your GUIs with scalability in mind.

There’s a wide range of displays out there, each with their own aspect ratio and resolution. You might think the more square aspect ratio is dead, but that’s only true in the desktop space–you can expect to see more square aspect ratios on tablets. This means that you have to build your GUIs to adapt to not only (ultra)widescreen ratios, but narrower ratios.

• Use the Device Emulator.
  If you want to try any resolution or device style out, the Device Emulator has you covered. Use it to test how your GUI looks on a bunch of different screens, and how it will look on things like tablets and phones.
• Start with the lowest common denominator.
  I usually target 1280x720 as my lowest resolution. While 1366x768 is the most common laptop resolution, aiming for 1280x720 almost guarantees perfect clarity as you scale the elements larger.
• Set the AnchorPoint of a GUI around where you want it to scale.
  Got a GUI that needs to be in the bottom left corner? Set its AnchorPoint to {0,1}. Now whenever it scales, it will scale around its bottom left corner.
• Use UIAspectRatioConstraint to ensure something keeps its shape.
  This constraint helps you make sure that whatever you do inside a GUI element stays the same, no matter what device it’s on. No more GUIs that stretch weirdly on ultrawides, or get too compressed on tablets!

Leverage Roblox’s GUI constraints and layout features.

Roblox may not be as fully featured as other game engines when it comes to having a sensible GUI system, but you can get pretty close.

• UIListLayout, UIGridLayout, etc. are your friends.
  They automate away most of the manual work you have to do when it comes to putting your GUI together.
• Utilize scalable padding where possible.
  This is possible through the use of UIPadding and adjusting the Padding value inside the aforementioned layout elements.

Finishing touches

• Use CanvasGroups as the topmost element in a stack of GUI elements.
  If it helps, think of a CanvasGroup as a window on your PC. When the program freezes up, it grays out. When you close the window, it has a nifty effect where the window shrinks and fades away.
• Tweens are what elevate a GUI to the next level.
  Quick, responsive animations are important… but this is one of the few places where you can really make your GUI have a personality. Play with tweens. Use them as a quick visual flourish, or to draw attention to an important element. You’ll figure out where they work best.

---

There’s probably more tips I can think of, but this post is already getting quite lengthy. I haven’t even gotten into programming UIs yet… but there are people far smarter than me who are very good at programming UIs and leveraging frameworks like Roact and Fusion, so I’ll leave that territory alone.