UI Layout feedback

I’m working on a layout for an inventory menu for an RPG project I have started. I have tried a lot of different variations of this final one and I am stuck. If you have any better ideas let me know :slight_smile:

1 Like

I would move the inventory search above cash and categories.

I would put the search bar at the top instead of the bottom because that where it normally is. Other than that it looks good.

So swap the position of the two?

No put the search above cash and categories and move cash and categories under search

Hmm, If I understand correctly you mean like this?

Definitely make use of UIPadding elements to push in the constraints of your text so it’s not so big, but also scales properly. Make sure your UI elements are scaled properly, this means make use of the device emulator in studio. (The little phone in the top right corner.)

I would also maybe make use of the UICorner element and set the radius offset to 1 or 2

I hope you plan to use a scrolling frame for the inventory as well?

Make sure to also have some diversity in your colors, don’t want it to look flat, or low quality :+1:

1 Like

Yea, that’s what I mean but i’m trying to think of something that would make my suggestion look better on the ui.

Yeah, these are all things planned for the actual UI. This is simply the layout for how it will look. However thanks, was not aware UIPadding could push constraints of text.

Maybe it will be easier to give feedback if I make a bit more of a proper version. So I will do that right now and make another post :slight_smile:

Yep you can set the offsets to something like 5 on the left, right, top and bottom, but this only works if you have the TextScaled property enabled. As long as the UIPadding element’s parent is the actual text label it will work. :+1:

1 Like

Oh wow, that is super useful! Thank you so much for that information this will elevate my UI’s even further :heart:

1 Like

UIPadding is a very very useful element as you can add padding to just about any element, including scrolling frames, text labels, text boxes, text buttons, frames that you have a UIList or UiGrid layout on. Very very useful, I would suggest you play around with the different UI elements in that sense. When you insert an object go to the search bar and type UI and a whole list of different elements will pop up. They are awesome tools I use all the time to make amazing UI.

Where it says your inventory items will be displayed here, I would scale that down as more of a title. Use a few text buttons to display items when they’re using it, status I would recommend doing from top down like so
S
T
A
T
U
S
I would also recommend for text likw level have a background thats a little lighter or darker it makes it flush better
I think that would clean it up.

You wouldn’t happen to have any trick to perfectly make borders? No matter what I try it still appears that one edge has more spacing than the other…

I think that this is a very good design, although I would like to recommend some changes. To me, your GUI looks somewhat basic. Try to change up the colors and the theme and I think it would look way better.