Just Beginning UI - Design

Hello, my name is DorianOG and I have finally been excepted to the Developer Forum. I have been looking from one side of the earth to the other to find the best way to make my UI Designs better quality.

I was wondering if anyone could possibly give me any tips, or any programs to make my Designs of greater quality.

I would also love to know which colors would work the best for my designs! :slight_smile:

Thank you! ~ DorianOG

I have had quite a bit of experience in this field but I don’t main it so don’t take all of this as professional information. I am a modeler but enjoy doing this stuff on the side.

The first thing I would recommend is getting into a photo editing program like Adobe Photoshop, Paint.NET, GIMP, or my favorite, Adobe Illustrator.

The first three listen products (Photoshop, PaintNET, and GIMP) are all pixel based so you will be working with pixels. The last product (Illustrator) is a vector based program.

Illustrator works differently than pixel programs. This is what I found when trying to find an explanation for what they use:

Vector art is created using vector illustration software programs, such as Adobe Illustrator or Corel Draw. These programs use mathematic equations and geometric primitives (points, lines, and shapes) to create art that is clean, camera ready, and can be scaled infinitely, without any loss of quality or fidelity.

The reason I enjoy illustrator is because it provides so many features for smooth objects and you can theoretically scale the object infinitely and not see any shape deformation.

If you aren’t interested in any of these programs it is definitely harder to get a grip on raw UI editing. When I mean raw, I am meaning that you will only be using Roblox UI and nothing else.

With using an editing programs, you can create custom shapes and fit exactly what is desired for what you need and it can save a lot of time too.

Now, I suggest fitting a design that fits your game best. Make sure the style fits with your genre but don’t be afraid to take risks to see if it looks well with your game. I am currently working on an FPS/Battle Royale and am creating a dashboard look for my UI which hasn’t been widely used but I am taking that risk.

A lot of users enjoy a simpler design so they can navigate easier and faster so don’t go for too complex that a user doesn’t understand what to do and where to navigate.

As for colors, just use trial and error. Look at websites, programs, games, and advertisements to see what colors worked and how you could apply them to your UI.

Here are the programs with tutorial links and how each program looks:

GIMP


Adobe Photoshop

image


PaintNET


Adobe Illustrator


All of these programs have benefits that come with each so it can be very hard to choose. For free programs, I provided GIMP and Paint.NET. For purchasable programs, I provided Adobe Illustrator and Adobe Photoshop. It all depends on your budget and if you are even willing to spend money. I would suggest starting with a free program just to make sure you enjoy doing UI and then move into a paid program when you get into more advanced work.

7 Likes

I would recommend using InkScape, it’s a free Vector Program.

2 Likes

There are also competitors to Adobe software i which pack many of the same features and are either free or significantly cheaper.

@Little_RichKid has already mentioned InkScape (which I highly recommend).
It has a bit of a learning curve when it comes to it’s UI but it’s really a great place to start for vector drawing.

Paint. Net is also really good and free, although there is no graphics tablet support if you’re in too that, but it is still a fantastic tool for learning.

I’m currently using Affinity’s software; Photo (commodore to photoshop) and Designer(competitor to Illustrator) which are fantastic programs.

They pack many of the same tools Adobe’s software has (Photo even has RAW editing features) and they’re very preformant.
They both also support graphics tablet input, and they’re only a one of payment which is significantly cheaper that Adobe.

But, first youneed to identify what you want to do, what you need to do it, and what software is it there.
Stay of with the free stuff like InkScape and Paint. Net, and you’ll pick this stuff up in no time.

2 Likes