Feedback on my Shop UI

This is for my project “Find The Bricks”. I’m looking for ways to improve this ui so all feedback is welcomed! I am going for a modern style.!

19 Likes

Aesthetics

I really like the general idea of the UI, I like the way you have added sections to the UI and the choice of colors, the only thing that I would suggest changing the the part that says ‘SHOP’ from top to bottom, maybe you could change the font.

2 Likes

This is really nice. Its totally unlike any other ui I’ve ever seen. I would prefer, though, if you made all of the text italic, at least the top text that says “Shop” and “Trail”. Other than that, this is outstanding, and I adore it. Keep up the great work!

1 Like

I’ve finished your suggestions!
As for ZehTopHat’s suggestion, I could only apply it to the shop text, as the “Trail” text is the item name. I hope this looks a bit better!

2 Likes

Looks amazing, but that slightly misaligned vertical “SHOP” text kinda bothers me.

1 Like

That is amazing! I love the little details along with the color choices. Keep up the fantastic work! :stuck_out_tongue:

The alignment has been fixed for those of you with ocd :smile:

1 Like

Looks promising. Here’s some points of my own:

  • The vertical shop label is redundant. If you’ve already put a shop label on it in the top left, why put a second one in?
  • Unless you have other plans, you’ll need a section to show the player how much in-game currency they currently have
  • You might consider adding in a “purchase” button at the bottom of the item description window so that it’s easy and obvious for the player

Remember, no matter what you’re making (UI or otherwise) if it looks good, people are more likely to use it.

2 Likes

As for the second one; the currency will be shown in a side tab like most games. I completely forgot about the purchase button so thank you for pointing that out. I’m not sure what to put in the empty space where the vertical shop text is. Any ideas?

1 Like

That’s great! I like your style.

In my opinion the vertical text is simply not needed. I’m also confused as to the purpose of the white BrickBux symbol in the same space, but honestly I’d suggest just removing them and closing the gap between the two windows a little.

For the currency amount, if you’re displaying it away from the window normally, you may want to consider relocating it closer for the time being while they’re in the shop, but it’s a minor shopper’s psychology thing so don’t worry too much about it.

Another thing I noticed is your symbol for the Hats tab is inconsistent for the with the other two icon’s color design. The white outline gives it a two-tone effect vs the single color of the currency icons. If I were you, I’d remove the white outline, and then if the black ends up being too contrasting, consider changing it to a shade of grey instead.

I really like how you made SHOP next to the trail and that the icons are very modern, I really like it! Havent seen anything like this!

Deleted the middle stuff, and added the purchase button. For the hat icon unfortunately, that’s what I got when I commissioned it. I will try to add outlines to the other icons though. Thank you for the feedback! :stuck_out_tongue:

1 Like

Yeah I think that looks better. You might also decrease the font size just a tad on the new Buy button but I like where this is going. Also yeah the hat icon is unfortunate, but as a resource for you, the Noun Project is a website with tons of royalty free icons you can use. Here’s a link to the hat icons if you’re interested: https://thenounproject.com/search/?q=Hat


That website you sent is a godsend. I found an old asset I made but if It’s still inconsistent I’ll go grab something from that site. I also made the text a little smaller on the purchase button.

Recommendations based on most recent post:

  1. Shrink space between blue outlined and green outlined frames.
  2. Make Text under tab buttons (left-hand side) either bolder, or more readable.
  3. This takes me to a related point; consider changing fonts all together. Perhaps SourceSansBold or GothamBlack would be better suited for this UI. Especially, the title fonts seem off.
  4. Blue RGB of BrickBux button conflicts with the Blue RGB of the Shop frame itself.
  5. Green RGB of Buy button should be an offset of Green RGB of the Buy frame outline… i.e. make it brighter or darker, but not more or less green.
  6. Consider deleting the trail UI piece at the bottom right or make it have more spacing away from the bottom outline green line.


I made your changes! Thank you for the feedback. The buy outline was already an offset of the colors.

1 Like

When I saw this UI I was like “Jheez who made this beautiful UI”. One thing I consider is the BrickBux and Robux text look like the same font but not Hats text which looks way off.

Don’t worry, they’re all the same font! Thanks for the feedback

The colours are good but I feel like the icons on display inside the shop section should have a bolder outline, maybe the same as the category tabs on the left side. Otherwise, a very good ui.