Creating better UI design past basics

I use Adobe XD and Studio for UI design and wanted to know how I can make my UI design much better than what is normally the basics, any tutorial on this forum for UI design always covers the simplicity of UI design rather than going beyond.

So, how would I learn to integrate more creative and unique designs? Should I consider photo editing software like GIMP to make more unique work?

I have some knowledge of typography and intuitive graphic designing if this may help.

1 Like

Use 🎨 Material Design Colors, Color Palette | Material UI for color schemes and palettes as well as https://www.flaticon.com/ for free-to-use icons (note: most require attribution to the original creator).

Think about whether you want your UI cartoony, rounded square, modern, sci-fi, etc. and wireframe or draw sketches of what you want it to look like.

Next, pick your color scheme and gather relevant icons, background images, etc. then begin creating the actual UI in studio. If you want fonts not offered by Roblox, you will have to find a custom font library or just install a desired font and type up a few words in a Microsoft software like Microsoft PowerPoint or Microsoft Word and right click → Save as Picture. This will save that as a .png and by reading the file metadata you should see the pixel size so that you can use it as a decal for an ImageLabel Gui instance. Set the size of the ImageLabel instance to be the same X/Y pixel ratio as the original uploaded decal. This should help if you want a title in a font not offered by Roblox.

Also, sometimes using software like https://www.figma.com/ or https://www.canva.com/ can help aid in the design process.

Good luck! It really comes down to standardization mixed with imaginative thinking. I suggest you make a template for buttons, scrolling bars, menu backgrounds etc. And re-use these throughout for a consistent UX, but also a clean and consistent UI.

2 Likes

These sound like tips I know of but I am guessing there is not much to complex and creative UI other than practice.

Really the more complex a Gui is in terms of functionality, the less appealing or usable it is by the average Robloxian (who is usually a younger child). I recommend going for simple, but clean design if you’re trying to make a fun game.

However, if you’re really trying to make some sort of complex RPG open-world type game, you’ll need a lot more custom graphics and you’ll want to connect client-side animations to Mouse events and keyboard hotkeys.

Better UI design combines clean graphic design, correct layout via wireframing, a strong sense of design (colors and shapes), and the ability to program dynamic animations. Simple UI or less good UI simply lacks one of the aforementioned aspects.