An Introduction to User Interface on ROBLOX

Hey Developers,

Quickly before I begin this tutorial, my name is Road and I have been designing on the platform for a good while now, specifically in User Interface design and programming! Throughout my experience, I have learned a lot about good and bad habits, and also just genuinely how the process works of being a UI Designer, and I am looking to share my resources with all of you, effectively giving back what this community has given me.

Section 1; Learning and Good Softwares for Design

Learning User Interface, along with numerous other aspects of development, really comes down to one core concept that can be utilized in numerous work fields and environments: practice makes perfect. If you practice, regardless of your experience or talent coming into this field, you will immediately see growth depending on the effort you put in. Remember folks, input effort turns into result output.

The best software, clearly, would be Adobe Photoshop if your looking for the best possible designs. You can use other softwares for details such as Illustrator, After Effects, etc., but there is some free alternatives that I personally started with such as the following: Photopea, great for a photoshop alternative; Pixlr, not very good overall but easy to use; Pixel Art programs in general, comes in handy for icons that relate to a pixel theme which is what I originated with.

Section 2; Commissions and Portfolio

A key aspect to being a UI Designer is your portfolio. You need to present your work properly, bad presentation leads to a bad look on you and your effort. The UI could be amazing, but if your showcase is not quality as well, you will not get hired. I would have recommended a portfolio on the DevForum, which is what I personally use, but the Collaboration tab was closed. If I were a new designer, I would look towards Behance, ArtStation, a discord server, or even a website like the one Nabeel Plays uses.

Getting commissions also requires you to find a place to market yourself, such as servers dedicated for hiring and selling services regarding roblox development. I use HiddenDevs, and I would recommend this since it’s the best one for their market.

Section 3; Progressing and Application

Progressing through learning for me consisted of trying something new, learning all I needed, and using what I learned for future commissions. A lot of designers subconsciously use this trick, and you can see this via the consistency of a lot of UI Designs and patterns that are repeated. A designer will have straight, blocky lines, learn tapered lines and from then on all of their lines are tapered.

Applying your skills is easier than scripting, as it is very visual. LEARN HOW TO IMPORT USER INTERFACE, THIS IS A HUGE + WHEN A CONTRACTOR LOOKS AT YOUR PORTFOLIO. I will not be teaching this in this tutorial, as it’s very in-depth if you want to do it properly and with 100% quality.

Conclusion

I hope this helped you somewhat if your considering becoming a UI Designer, or this is good advice from someone who has experience in the field of interface design, and I hope you have a fantastic day.

Blessings on your summer,
Road.

7 Likes

You should probably actually include what ui elements do what…

1 Like

It’s an introduction. Plus there are many other tutorials on that.

3 Likes

An introduction shouldnt just include things about commissioning and more. It should also introduce some ui elements and features to actually introduce a developer to GUI. Thats all im saying.

1 Like