Feedback on Shop UI

I made a post earlier about my shop UI. I have made a ton of improvements to help it look better. The blank white boxes will be where the dev products and gamepass images will go. Any suggestions?

5 Likes

I like the design but I think there are a few things you can improve on:

  • Adding textures to the buttons or background GUI can give it a cool theme look, like grime or a TV glitch
  • Adding gradients also can add depth to the UI which will make it looks good.
  • Also adding shadows can make it look nice too.
  • Lastly, adding movement to the UI when the mouse hovers above the button.
    Hope this helps and keep up the good work!
    Lolaphobia
4 Likes

This may sound nitpicky, but I feel like the text on each category should be moved down slightly to have an equal distance between the blue box and the white boxes.

I also think the boxes should be closer to have a uniform distance between the edge and other boxes.

3 Likes

Thank you for your suggestions. :slight_smile:

1 Like

Thank you! I would have never noticed they were too high up.

1 Like

The boxes look uneven.

2 Likes

First things first, the formatting is great. But several problems should be addressed:

  1. There’s no close button. There should always be one for a shop GUI even if you provide an alternative method such as moving out of the area.

  2. You’re missing the frame title. Although it may be obvious, you have no indication that the GUI is a shop. I would add it just in case.

  3. Your GUI lacks a lot of features of design, for example shading, textures, and etc. It would look fine if you’re approaching a simplistic style, but either way I would add more effects.

And a little tip, usually it’s better for title text to be white, and then other information as black. There’s a good contrast then that catches the user’s eyes.

That’s all for now! I would offer more but I feel like that’s a bit too much. Cheers on designing! Would love to see more work from you in the future. :wink:

-EGOTISMS

5 Likes

It just seems off for me, in a sense…I’m not really digging the color choices. Though what Lolaphobia, Epicwalnut5, and EGOTISMS have contributed they sure are right about it. And I don’t think generally “All purchases are final!” necessary. Since it’s going to be a public game, there’s really no option for developers to refunds whatsoever. And I’m pretty sure the player base knows most purchase are pretty much final as well. Maybe a thank you to them for purchasing seems more encouraging, because there could be some young audience that might withdraw from buying reading that text. Since it can make them feel as though they might accidentally waste on the wrong thing.

3 Likes

I think it’s too simple. Personally, I enjoy UI that is simple but also looks well. I understand that this can’t always be achieved in Roblox but personally appeals to my eye better. What I am doing with my UI is make some gradients along with colors that match very well.

I used icons to help users find their way around without text, I created gradients that look appealing and flow well, and I organized my piece well. Here are some examples of my UI and I know, this may not help you case but again, this is appealing to my eye.

image
image
image

The goal of my UI wasn’t to create an in game quick access because my game is obviously a different style but this might help with designing appealing looks to your design.

(Note: The borders around the images are won’t be there in my final game, they are just screenshots taken from Adobe Illustrator; a program I use to plan out my UI)

4 Likes

Here are my thoughts on the UI and how you can improve it :slight_smile: .

  • There should be a close button directly on the UI. Yeah, you could have a button to the side toggle it, but having the close button would be more intuitive.

  • Change the text color to white with text stoke. In my opinion, I don’t think to have black text on those colors are appealing to the eye.

  • Lower the Coins and Gamepasses text to align more with their “Containers” (could’ve been a more fancy phrase)

  • Add a drop shadow to the shop frame.

Other than that, it’s looking good so far.

2 Likes

I would use softer colors and gradients personally. Drop-Shadows are nice too, but don’t overdo it because it can potentially look messy. Also, I can’t really tell from the picture, but the black looks a bit too pronounced. I usually recommend using off-black which is anything from like 30, 30, 30 to 71, 71, 71 (basically just really dark grey). White’s also another thing to stay away from unless you’re gonna drop shadow or gradient-itize it. Colors are definitely looking better, but I’d go more pastel - especially on the blue. Other than that, definitely looking better! Just gotta add a-bit-a texture to it!

2 Likes

Good improvements but, as I’ve mentioned in your last Shop UI post, there’s three separate spaces which are uneven.
image

1 Like

I like it! Maybe if you rounded the shapes it’d look cleaner?

2 Likes

Look pretty good, but maybe make it so that the distance between the item boxes and the sides of the category boxes are equal. Would make it look better in my opinion.

I only just noticed this is a new thread under the same topic as the one you created just a few hours prior. In future, it would be advisable to track your progress in the original thread instead of creating multiple new posts but regardless, it’s nice to see the improvements you’ve made.

The colour scheme in this UI is a dramatic improvement, nice work!

Without nitpicking, I would say the only constructive criticism I have is the spacing between each frame needs to be the same. The difference between the different sized gaps is quite noticeable and makes the UI look a little bit rushed.

36

Hopefully that’s helpful advice to you! As I mentioned in my previous post, if you need any further help or assistance, just give me a shout. :+1:

2 Likes

Personally I think some minimal texturing would look nice. Even if its just a color fade on the blue section, or something else along those lines.

1 Like

The blue is a bit bright maybe just a shade less on the blue.

1 Like

OK a few good tips:

Choose colours that don’t contrast too much ( this may be subjective, don’t @ me ).

And instead of white squares, use a ImageLabel with 9Slicing that is of a square with a rounded square chopped out of it, so it is a square with a rounded square hole inside it. This will allow you to round off the corners of all them white boxes and make them less garish.

You should also choose a better colour for the text, maybe white/blue or something that goes better with the current colour scheme.

1 Like

Try using colours that match together. The boxes should be the same size(ex:100x100) This website has colours that fit well:

Looks very good! You should add a close button if there is one that is just not in the screenshot.

1 Like