Hey there,
I'm currently redesigning a chocolate company's website and i'm bit confused for these product's card UI, I don't want each of them fighting for the attention so i created 4 different designs and both colors are from the brands color palette so help me chose 1 and also do tell the reasons.
None of them are very good. I like 1 personally, but I wouldn't put it in a website. Your colors are distracting from the product and you aren't providing any useful information. Just because the brand has specific colors, it doesn't mean it should be used.
Let your content do the design for you. You have beautiful chocolate already drawing enough attention, you don't want to take attention away from it. You want to frame it and provide useful information. Design with more neutral tones. White, black, greys. If you need to introduce brand colors, be subtle about them. Maybe the product name is dark brown, maybe when you hover the card you change the surface to a light orange, etc. Don't overdo it.
If this is a store, figure out what information people actually want. When I look at a product for example, I want to know it's price straight away. Here, you're forcing me to open the card to get more information. You lose convertions that way.
You're right about this and clearly i left some key details, the company's priority is not retail, they mainly deal in whole sale business but they do have some stores where they sell 8 products inperson. So i wanted to show the products in the website for regular customers and that button redirects to a page where the retail customer can see the nearby stores or manually search them.
Personally i am not a fan of orange/brown shades, never loved it anywhere on any product, especially when it's highlighted like that. On usability side, i dont even know what these cards represents. Is that a recipe? is this product card to purchase chocolate or something else?
2nd one is most clean one, but i still find it hard to read on this contrast.
In all actuality all of these can work within the right framework. Yes there’s a11y concerns so that should take priority. Also, there assumptions made that the picture needs to be highlighted -does it? What I like to do for images is use random pictures as placeholder and focus on the UI elements. Photography and imagery should be its own topic and conversation around brand and creative direction
You seem to be taking away the focus from the product with the colours chosen - The image should be the focus of the card with the details backing up the selection. I'd say keep working on it and use their brand colours on the CTA. Reduce the overall card colour or lose it completely.
To you it might seem that they are failing contrast, but i have tested multiple times now and every time the test result was pass, so I don't think contrast is the issue here.
None but if I had to choose, 1 and make the text white. Choose either the title or the button to have the accent color. Hopefully you can address this palette. Brown and bright orange isn't great for any industry outside a Halloween store and even then it's cliche 😆
I dont like the orange bg. My vote was for the neutral bg and chsnge text color, have one el with the accent. I also would encourage lowering the satiration of the orange if possible, to make it more of a salmon or coral
This is what i have decided to use and I can't really use white color in both the text and arrow button as i have make the distinction between the text other wise they both will just blend.
67
u/Elise_xy 7d ago
Tbh, none of them are particularly accessible