Opinions on inventory UI

Critique and feedback is appreciated. Everything apart from the wood texture and the font is made by me.


Then:
After:
LATEST:
@Craftero
@0Skyz
@hoosmany

7 Likes

Solid 7/10

Some light confusion at first-glance since this roop is typically store-like
image
Which doesn’t forcely make it a obvious “inventory”, but it is fine regardless of that.

It’s on purpose, but there is actually no reason that the frames with contents doesn’t fill up the whole board,


also, you can see UP TO 9 ITEMS, which is a low rate if you compare most games that easily fill a grid of 40 on PC.

The Exterior design, like wood & nails are decent, the details & color are light, which turns out nice naturally, the item case have a light gradient aswell that makes the small rounded light square more noticeable, very good choice on that.

in my opinion, i don’t like the text at all, it suddently turns as “squishy”, and does not suit the theme at all as it’s all straight lines or repetitive shapes, which definite the whole pack as “organized”, and the typography make it messy due to it’s randomness of courbes, all cute.

2 Likes

Thank you for the detailed feedback. I’ve kept it nine squares as I there will be bird icons in there need to be visible and not tiny.

I see, well, i assumed this case would have been a zoom version of the selected product
image
if it’s not the case, what is it for ?

1 Like

This is an inventory for “your” birds. There will be pictures of the various birds that you have collect in the game. That is a display for the current bird you’ve selected. A large picture. There will be a scroll feature implemented.

1 Like

Would this be better?

1 Like

Hi There! First off, I wanted to say how amazing this looked! I love the attention to detail and the wood texture aspect. I do have suggestions though.

  • Put borders around the output boxes. They seem a bit lonely just sitting there.
  • Lower the ‘Inventory’ sign down just a little bit.
  • Change the hotbar boxes to different styles, rather than just 1 UI.
1 Like

I like the creative shop-facade theme of the UI. However, a few things you could do to improve this:

  • Padding - Fix all the padding and whitespace issues. Basically, use scale and Aspect Ratio constraints to make sure everything is proportionally sized and spaced out.

  • Text Consistency - It looks like you are using dark border lines on the stats bar text, but the text box above has a transparent search with no black border visible. I think maybe if you’re going to use custom text make it more consistent and create artificial shadows with underlying ImageLabel’s that have ImageColor3 = RGB(0, 0, 0).

  • Sizing - I mentioned above to use Scale and Aspect Ration constraints, but also think about this from a user’s perspective. I want to be able to easily see my inventory items, so maybe only put 3 boxes per row in the inventory instead of 4 and decrease the padding in the UIGridLayout.

  • Color - The tan is nice, but I feel like the orange and yellow colors make it all a little too homogenous. I think more contrast from a material design colors grid might help. Maybe ditch the inventory sign on top of the store, and put the text “Inventory” on the top-left of the grid and move the search box to the top right. Also, color the roof a red and white or blue and white color.

1 Like

Here’s my $0.02:

  • Make this white line on the awning an overlay and adjust the transparency so it isn’t a solid color on the awning:
  • Add an inner shadow to your inside frame so it looks like it has more depth and is 3D-Looking:
  • Make the text in the title frame stick out more. I would recommend using a white font color with a drop shadow to it.
    image
  • Add an inner shadow to your inner brown boxes with a 90 Degree Angle and a size of about 15
    image
  • Make these boxes align on the left sided-edge:
    image

Hope this helps man! Looks great so far! Keep going :sunglasses:

1 Like

Well, I think you must allow users have more items in their inventory, in order to fill the empty space. Also, make the Search GUI bigger.

There’s space for 16 items + a scroll feature.

Would this be better?

1 Like

It is perfect for a store but not so much for an Inventory, even so, I think it would be better and more consistent that the Health, Damage and Level texts have no outline but a drop shadow like the Inventory text.

2 Likes

It is better, I would just recommend to still change the angle of the shadow to 90 degrees, and maybe decrease the size of the shadow as well.

1 Like

Also to add onto what you said, I’d change the font of “health, damage, level” as it doesn’t compliment the canvas it’s on.

2 Likes

The light yellow shading at the top left corner doesn’t fit in with the rest of the UI, I think you should put the shading on the bottm right, as the shadows of the frames start on the top right
Capture

1 Like

I’ve used the same background for the store, I decided to keep it for consistency. Here’s the newest version. It looks bland without the top part.

1 Like

I didn’t expect you to change the font, it’s very thin. (And does not combine with the Inventory text) But it’s good that you removed the outline.

1 Like