#UI Feedback

1 messages · Page 1 of 1 (latest)

icy seal
#

Hi. I'm doing a daily UI challenge to improve my UI Skills. Can you please share how you would improve this simple shopping card design? Thank you.
Something I noticed I should have done better is the spacing between the title and the image.

UI_CH1.jpg
tall blaze
#

Yea I believe spacing is a theme here. Think about how things relate to each other. I believe there should be more space between the price and the descriptions, almost centered between the price and button. Also concerned about the contrast in the price color. There's figma plugins to run a accessibility contrast test, make that a part of your process. Finally, there's something off about the margins of the bottom half of the card. I want to feel like the space around all of the bottom-half content should be the same (and airy).

golden orbit
#

I took a shot at it and here's what i would do 🙂

#

*I would focus more on the price than the name of it, so I made the price a bolder font than the title

#

Also, the image on yours is too big and i feel like the icon is too close to the "Add to cart" text and the text is just not spaced vertically well

#

Idk if i can add things since its a UI challenge but i added a "save to wishlist" secondary button

manic nacelle
#

spacing is the issue, youre right

golden orbit
manic nacelle
golden orbit
#

Its probably bc i added the save to wishlist one lol

#

But it aligns perfectly with the favorite icon and header maybe just the text is too much margin

manic nacelle
#

u can resize the wishlist button so both fit within the margins

#

this is a better visualization of the alignment inconsistencies. everything should be within this box for starters.

image.png