UI Design Starter Guide

Resources Community Tutorials
, , ,
#29

Amazing tutorial, love it! 10/10! Packed lots of important information in my head. Though, on top of that I would recommend, you insist them to use https://www.roblox.com/library/2233768483/Roundify

2 Likes
#30

Good guide, lot of stuff to get going. Personally, I like to use scale, not offset, with UIAspectRatio constraints. This is what I feel gives the most consistent experience because something made with offset would be gigantic on smaller screens

6 Likes
#32

This deserves way more recognition than it already has. Just the fact that you took your own time to help any aspiring developers. Thank you! <3

4 Likes
#33

Really nice guide, goes in-depth about a lot of stuff that goes un-noticed.

Good job, I’ll recommend this to anyone who is interested in designing UI.

:slightly_smiling_face:

6 Likes
#34

Good job on this, also extra info: I would recommend 100% getting a UI design plugin to enhance your UI.

1 Like
#35

thx u sooo much for the help :smiley:

1 Like
#36

I’m a bit late here but thanks!

This really helped me out and I understand a bit more about UI Designing :+1:

3 Likes
#37

Dang, this is so accurate, I’ll be reading this over and over thx for tutorial.

2 Likes
#38

Wow thank you so much this is a really great tutorial, I’ll be sure to have this bookmarked!

2 Likes
#39

What would be the best size for doing button icons? I ran into an issue earlier tonight and I want a work around so I don’t make the same mistake twice.

1 Like
#40

Hopefully I’ve interpreted your question right…

I tend to design all images at 1024x1024 – the highest resolution Roblox will upload images at (you can upload images at higher resolutions than this, but they will be downscaled). However, usually I upload them at smaller sizes such as 512x512 or 100x100 just because I don’t expect them to be displaying much larger on a reasonable screen.

If the ImageLabel will be use Offset for its size, you can upload the image at that size for best appearance. Otherwise, if it uses Scale, you may want to account for what it’ll look like at larger and smaller screen sizes like 1280x720, 1920x1080, and 3840x2160.

I also recommend making icons in a vector format whenever you can so that you don’t need to care about size. Vector images can be scaled infinitely and still look smooth, Roblox doesn’t support these but it’s still useful on your end so you can export to any size you like without issue. (In programs like Photoshop, Illustrator, and Affinity Designer/Photo these are often referred to as “shapes” and can be created and edited using the “pen” and “node” tools.)

Some other considerations are asset load times, spritesheets, and memory usage (although the latter should only be considered if you need to do some hardcore optimization, which you probably never will). Images of larger sizes will of course take longer to load than smaller images. You might also want to use spritesheets, in which case you’ll need to make icons smaller than the max size so that you can fit multiple within a single 1024x1024 image.

7 Likes
#41

Thank you so much! Very useful. What programs should I use?

1 Like
#42

I personally recommend Affinity Designer and/or Affinity Photo for reasonably priced quality design and image editing software (they’re a one time payment). Adobe Photoshop and Illustrator are fine as well if you can afford them. If you can’t pay anything, I recommend Inkscape and Gimp which are both free.

3 Likes
#43

Straight forward, informative & packed with useful information. Thank you for this. :+1:

1 Like
#44

Thank you so much! I’ll make sure to try them out.

1 Like
#45

wonderful tutorial, very useful for beginners! :+1:

1 Like
#46

I’m honestly impressed with some of these that I didn’t know. Some of the things I thought were bad to use could actually be used better in a different way. Great tutorial.

1 Like
#47

Woah, Thanks for this I recently started UI designing and this helps a lot!

1 Like
#48

Thank you for this tutorial I’ve been learning to do UI Designing and the only UI properties I know how to use is Zindex, AnchorPoint, UICorner, UIGradient, UiList, and UIScale. I might read this tommorow to learn more about it.

#49

I am a developer peasant who has been wanting to get into UI design for a few years now. Thank you for actually getting this kind of information through my thick skull in a concise and meaningful fashion.