So I decided to make a little UI settings panel thing that I could use for my future projects; I wanted to make something that’s kind of minimalistic while also looking sleek. I sort of imagined what it could look like, and so I went ahead and did it. It was a little worse than what I imagined, but I think it still looks quite sleek!
In the “Section” menu, it’s actually a ribbon that lets you change the setting tabs, for example in the roblox menu: “Profile” or “Privacy”. I also imagined it to have icons, but I was kinda lazy and decided not to add them (i’ll add them tomorrow)
Original version before feedback:
I really like it as a start, but it is harder to say when there isn’t much on it yet
If you do more of it I would be happy to give more feedback but i’m not a pro at UI haha
Yeah, I was really burnt out by designing everything and making workarounds for things. I hope I can get the basic panel UI done tomorrow, and then i’ll show it here.
As a Modern Sleek UI Designer, this is not a bad start for someone who is a starter UI designer (sorry if you take that offensive,) and I suggest trying to watch sped up videos maybe, or practicing a whole lot to get better at it. Using external apps like photoshop to make UI is what I also do, and alot of other advanced UI designers. Keep doing what you are doing, and you will improve. But as of now, great UI. If you would like to see one of my UIs, ask. I don’t think I’m much of a “advanced” ui designer but I think it is impressive.
I’m already very comfortable using \paint.net\ (it’s basically like a really good free image editor). I have made some pretty good (graphics, not UI). designs there (can’t use my computer cuz it’s 10:30 pm) so imma try doing some stuff there.
Also, can I look at some of your UI designs?
I spent 6-7 hours making this, it was kinda difficult to get something what I wanted—I had to do some workarounds, and spent some time coding all the buttons. I’m probably two-thirds of the way through, but the time I spent was definitely worth it.
This is what i’m gonna use as a settings menu for my future projects, and i’m gonna build up a whole collection of UI elements I can use in the future, to save the effort of designing each one for each project I make.
This is quite decent. It’s not terrible, there is definitely proper usage of things there but overall you could improve it a bit.
If we have a menu with a sidebar, we’d want that sidebar and the actual menu content container to differ from each other. Usually by having a darker color on the container so the sidebar has this little “elevated” feeling.
The shadow is there, though it is quite too large. However I’d still prefer if the sidebar was slightly more bright. Not two entirely different colors, just a tiny bit of lightning.
Back to the sidebar, I would definitely add some padding between the elements. The highlight should also be slightly padded, so it doesn’t stick to the sides. Since you have a title on the top, I would match that padding, so it is consistent.
As @W_MNQ, using external software to design UI first is great, because Roblox’s UI editor… sucks. You should really try Figma. It has a pretty nice editor, it is much more convenient, and there’s a plugin to help you import what you’ve done into Roblox, too.
I’ve still got some things to fix - such as the fact that I accidentally messed up the color, I should’ve made it a little darker.
I tried adding a purple to dark purple gradient, but I realized that roblox added this dumb feature where you could only add 1 gradient at a time. What I tried next is to set the shadow’s transparency to a half and make the effect twice as large, and it worked, but the gradient I added is just too slim. I’ll try to make the effect of the gradient much bigger when I get to my PC.
Ok, well that’s a solution to my dilemma
I added some padding to the sections, it’s just really small:
You could maybe add some sort of distinction between the buttons when they aren’t selected? Like a thin lighter purple line between each button? I’m not sure just I think having buttons very obvious is important in people understanding what to do, I’ve seen that people just leave games in a second if they can’t immediately understand the UI
I literally had the idea to do that, but then it just flew over my head I’ll do it tomorrow, I was stuck trying to fix an error on one of my scripts, and I had to go while I was fixing the error
Most of my projects are gonna be 9+ or 13+, since I just don’t wanna make an All Ages project—I only want to make stuff I like.
I haven’t read any of the other replies besides the one where you scaled down the sidebar buttons, but I do have one recommendation. It’s honestly pretty small but if you’re trying to create a drop shadow effect I would recommend not putting a UI corner on the black fade because it makes the sidebar look like it swings out on the bottom. IDK what you’re really going for but that’s something I would change about it.
The reason why I added a UI corner us because if I didn’t, the botton-right corner would just look really awkward and straight.
I’m looking for a way I can remove the UI corner while still having a completely rounded window.
add a ui gradient go to transparency and change one side to completely transparent then change the rotation so the transparent side is on the part you’re trying to hide
(i think this might help i dont understand the problem completely but from what im inferring it might)
I’ll do it tomorrow, I was stuck trying to fix an error on one of my scripts, and I had to go while I was fixing the error
