I wanted to see if you guys had any suggestions for a Shop UI I have been making. It didn’t take me long to make it. The blank gray boxes will be where I place the dev products and gamepass icons. Any suggestions?
Looks quite nice! Try moving the titles down a little bit and also make the text that says “All Purchases are Final” a little bit smaller (try putting a TextLabel inside the TextLabel that is 0.95x0.95 size). Also, try to make the horizontal gap between each square the same as the vertical gap between them.
1 Like
Looks great!
I would advise making the titles of coins and gamepasses stand out, as well as making the titles the same size.
Also black and dark grey don’t stand out much, so perhaps where it says “All Purchases are Final” you make the text white so it’s much clearer.
2 Likes
Right now, it appears very bland and basic, which is anomalous to the general level of UIs today.
I recommend adding an exit button so that people can leave the UI itself. If the UI itself has rounded corners, accentuate the theme by giving the squares rounded corners, and add prices and names (e.g., “Sword … $100”) to show some basic information at least.
I would work on a colour scheme that comports itself with more congruity too. The currently adopted bright, almost bleached yellow contrasts very much so with that stark and disinteresting grey.
Plus, if this is one UI, it seems superfluous to have two different “All Purchases are Final” texts. I would include that on a separate Frame which holds the information of the item in particular in quite small print. The emphasis on the lack of refunds is foreboding, uncharismatic, and detracts from the expected theme of the UI: to advertise, not to remind.
6 Likes
The yellow and gray don’t go together well. The black text on gray isn’t as legible as it could be. The margins between the interior box columns looks awkward because it is too big.
You don’t need text that says all purchases are final, this is implicit!
I would consider trying to change the color scheme. Additionally, try to make the display more inviting! It currenty looks rather boring. I’d go for a wider rectangle display which attempts to look more inviting by more inviting shop icons aside from the purchase buttons, perhaps yellow with white rather than gray, and higher saturation with lower value on the yellow to make it more “golden”.
5 Likes
I agree with Somnar, I believe the colour scheme could use some work. If you’re stuck with the scheme, then you can research for it (its not hard to find). In addition, it looks like the font for the titles and the fine print are the same. I think you should individualise “All Purchases are Final” with at least another colour which suits the colour scheme you’re going for, or just change the font to italics.
The grey boxes could be evenly spread on the Y axis since its a grid style layout it seems. 
You can tell from this picture that neither of the spaces are even. To fix this, you can use UIGridLayout- this will evenly spread your UI elements evenly in a UI frame. 
*this is an example grabbed from Wiki which you can get to it here.
However, the UI is a good start, I think you can put some design details to make it look more presentable.
2 Likes
Thank you!
Thank you! White text would look a better on gray. I was using the TextScaled feature instead of TextSize.
1 Like
Looks like there is too much yellow space in between the boxes. You could also have a tab for coins and gamepasses because it doesn’t really go together
1 Like
One thing I’m going to mention, that hasn’t been mentioned here yet, is be aware when text starts creeping up on the sides and edges of a text box or any part of your UI. It’s good practice to keep it a tiny bit away from the sides (looking at the ‘All Purchases Are Final’ buttons at the bottom).
I believe I saw this a couple of times on this thread, but the colors are a bit too… contrasting? They just don’t seem to match very well and the black text is a bit uninspiring. Try to find colors that blend better. Use a website like Color Blender to help if you’re not too sure. You’ll get the hang of it eventually, it just comes with practice!
Final thing that was, again, mentioned that I’d like to drive home is keep grid gaps even! It’s just a bit off-putting seeing a large gap vertically and a small gap horizontally. Try and keep all gaps as even as possible.
I hope this helps. If you need examples, I’d be happy to send you some!
1 Like
Ok!
I’ll try Color Blender out!
1 Like
I think it looks quite nice, however I think you can take it to the next level if you add stuff like this:
- Textures for the tiles, this depends on what your game is based on but adding textures like grim or TV bars can make it that much better.
- You can also add slight colour gradients which give the GUI a more unique realistic kind of look.
Hope this helps!
Lolaphobia
2 Likes
It’s not a bad as a starting point, however it may require a little more work to give it that professional edge. Here are some of my suggestions:
-
The font size of “Coins” and “Gamepasses” appears to be slightly different. I would suggest matching the text size of each text box. The continuity will make the text more appealing to the eye.
-
The boxes are are too far apart and leave an unnecessarily large yellow bar in between them. You could try bringing them closer together to form a grid pattern, similar to the grid @uJordy has attached in his suggestion.
-
The “All Purchases are Final” text box is not required. Seen as all purchases on Roblox are final, that is self-explanatory and there’s simply no need for this text box to be there.
-
Last but not least, the colours used do not compliment one another and give the UI a sickly look. Sticking with yellow as the UI’s primary colour, you could replace the grey with purple. As purple is the complimentary colour of yellow, this would create more contrast and make the UI more appealing. You can experiment with different colour palettes using the colour wheel below.
Hopefully my suggestions are helpful to you! If you need any further help or advice, feel free to shoot me a DM. I’m always here to help. 
1 Like