Color and design consistency.

[Shabeer5EB8]

Hi there,

Hope you all doing well.

I have a question about the color consistency. I have seen some e-commerce platform using for different categories different interface and CTA color.

So the thing is I have a UI design project for same e-commerce application and diveded to 4 categories ( market,food, grocery, lifestyle) so what's your opinion about choose different design interface and CTA color. 

For example for food orange theme

Grocery green theme

Market black theme

Is it good decision?

Please share your thoughts

Many thanks 🙏

[AkinGn]

Hi @Shabeer5EB8, hmm honestly using different interface and different CTA color in the same app doesn't sound consistent. It is suggested to use same treatment/style for the interaction elements to be consistent and increase the usability. I liked the idea of color coding categories but thinking how I'd do that, maybe some different hues of the same light/pastel etc (or dark, depending on your design) background color would be the best choice for that, creating a slight difference in the background color. For example a very light orange bg color for the food theme, very light green bg for grocery theme etc. If you like to share your design here or at XD discord (if you're not already there: https://discord.com/invite/adobexd under #share-your-work channel ( https://discord.com/channels/557579652294639616/1000501693252898897 ), tagging me using my handle @AkinGn I'd like to give more feedback and maybe some othe mentors there as well) Hope this helps!

[Shabeer5EB8]

Thank you Mr @AkinGn 

I appreacite your suggestion. I will share the design theme here for your better underatnding further comments.

as you can here I used pink theme for food. and the idea is it will change accourding to the category colour.

and behind this idea I have seen 2 leading E copmmerce platform using this method in thire mobile version platform

• noon.com
• flipkart.com

[AkinGn · Accepted solution]

Hi @Shabeer5EB8, hmm I couldn't be sure until I see the design and since I don't recall any real world examples, now that you provided both, and as I see it you themed the colors in a harmonious way so I wouldn't say they'll create inconsistency, I might only consider making blue a little more saturated since it looked a little pale in comparison to other colors' hue values. (This is one of my fav color videos actually, in this video he creates a great palette editing hues (along with lightness and saturation, but it'll give you some ideas for some other projects) : https://youtu.be/u5AnzLg1HxY?t=180 , if you haven't watched already 🙂) So looks like this can work in a consistent way. Hope this helps!

[Abdullah31561620os5y]

Hello! It's great to hear that you're working on a UI design project for an e-commerce application. Using different colors for each category in your e-commerce UI can be a good idea if it aligns with the brand, improves user experience, and maintains accessibility. Ensure that the colors make sense for each category, are visually appealing, and help users navigate. Test with users for feedback. Keep it visually cohesive and logical. Good luck! 😊