Crafting Menu UI


I’m developing a crafting menu for my game. I’m not great with UI design, so I’d like some feedback on how I might be able to make this interface more player friendly.

Explanation of elements

4 Likes

Texts too big-- also without the Red texts , players are required to learn alone for a few seconds before understanding what the whole crafting menu is doing

i would recommend using titles for each tab like : ''Inventory" - ‘’ Craftable Items "
“Ingredients required”, etc , other than that looks fine, UI is not a problem, the major problem i see in-games are PLAYERS don’t know what to do without guides
many people are experts at any games, but let’s look at who is not quite familiar with genres like this

3 Likes

as a minecraft player- Im used to the output being on the right. I feel like it makes more sence that way because you also read left to right.

you could also move the missing ingredients. you could put it under the name of the item in the “things the player can craft” section

(this would make the text names smaller)

I second adding lables. unless you have a tutorial that teaches the player how. Or at least add a title telling peole that this is infacet a crafting menue and not a shop or somthing.

3 Likes

This is alright so far. What I would do differently is:

  • Change the order of the crafting menu, so ingredients go first, like other people have mentioned
  • Make clicking the items that are able to be crafted at the top leave transparent hints inside the crafting spaces, a bit like in Minecraft

2 Likes

@Hazelfluff @uvic1rn @Moleza thank you for everyone’s feedback! I’ve taken everyone’s advice on here and made these changes:


(The multi-colored log in the hint just represents any kind of log)

3 Likes

I can’t really design UI tbh, well I know how to design it because as a scripter I gotta know the basics of UI but I’m not too good at it. However, I think I can safe,ly say it looks great.

2 Likes

The changes you’ve made make it look a lot better - I think you should also add some more padding to the (I’m presuming you’re using a UIListLayout component?) list of options and potentially make the actual boxes of them slightly smaller - they’re currently quite thick.

I’ve attached an image of the size I’m talking about:

image

3 Likes

How’s this? I had a bit of difficulty with the “Materials Needed” text because I the ingredients can sometimes be a list of items, and having that text on the same text box might look weird if it ends up on multiple lines.
image

2 Likes

nice but I think the name and the materials needed would swap places. Again because players read left to right.

And instead of it saying “Materials Needed:” it could say “Made With:” or “Requires:” just to make that text shorter

:+1:

2 Likes

Something maybe like this?
image

1 Like

yeah yeah!

do you think you could make the text smaller?

like @kielikescats said?
but like in the same place yours is. That way there will be enough room for a list of materials
and the required items aren’t competing in size with the actual name of the item.

1 Like

Are you referring to the ingredients? If so, I’m using TexScaled on it. Should I be using a different method?

1 Like

I though you would be using a gid layout for like a list so you could add more matterials to the list if needed

1 Like

I never thought about that. I’ll try to adapt it to work for a grid layout

2 Likes

image
Got something decent working. Is this better?

2 Likes

yeah yeah!!
I think that’s great!

but what do you think?

(if you want the Name of the item to be more centered you could try something like this )

2 Likes

I like this setup. Thanks for your help!

2 Likes

2 Likes