I’ve been working on a new Purchase Confirmation UI for my game, and I’m hoping to get some feedback on how I can improve the color scheme and overall design. As you can see in the attached image, I have two different color variations:
Blue Theme – Dark background with a blue “Purchase” button.
Yellow Theme – Dark background with a yellow “Purchase” button.
Both UIs display:
The item’s name (placeholder text for now).
The cost (in USD as a placeholder).
A circular icon for the item’s image/preview.
A confirm button with a distinct background color (blue or yellow).
Below that, I also have a user profile element showing the player’s name, level, and XP bar.
Are there any UI/UX best practices you’d suggest, such as spacing, alignment, or additional information that might be helpful for the player?
THEY BOTH LOOK AMAZING!!!
For a more modernized look, go for the yellow one, for a more playful look, go for the blue. I think these could be improved by having a description of the item, and the status bar have your display name included.
These both looks really good, nice job. Here are some suggestions I have:
Personally I like the acrylic background of the left one but I like the yellow accents in the right one since it makes it more prominent and has better contrast. So maybe try mashing those two together.
Also maybe try adding a subtle dark gradient to the button to give it some depth.
You should also have a Cancel button, just an X in the top right. For that you can probably fit it below the purchase button
For the profile UI try making the Level 4 bold and the 56 XP (also add a space there) not bold or vice versa. Having all the text bold makes it look weird.
You could also make the username text have a heavier weighted font to make it look different from everything else.
Maybe make it more obvious what that up arrow button in the profile does. Just looking at it you’d have no idea what it does.
