enter image description hereSo I have a website that consists of 15 major modules or lack of a better term sections. Each of these consist of very different objectives. One presents news the other shows you a job listing and ext. I was thinking color coding each of these sections and giving them unique icons to help the user navigate easier by association. I'm just wondering is this a bad idea because of there being so many sections. This would require me to insert 15 different colors. Right now I'm using just 6 colors and proliferating them to all 15 major sections so this means replicating the same color for different sections. The problem I have with that is that its not tying each section to a different color which might confuse the user. What should I do? Inside this picture I have a rough mock up at the top and my swatch configuration at the bottom.

  • I'm more concerned about your implementation of this, which is outside of the scope of this site, changing a colour, if done right, should simply change a CSS parameter. Are all 15 different? Like totally different or do they share some characteristics. Furthermore, I think it's important to think about what you are trying to achieve for the user. 15 different colours may become irrelevant as a user browses your sites/sub-sites. – DarrylGodden Jul 14 '17 at 16:39
  • So far as css I have implemented color coded global classes to help me achieve this. I'm also a programmer so handling wont be that hard I'm just worried about the perception of this. – Thomas Martinez Jul 14 '17 at 16:49

The best rule of thumb is to never encode necessary information with color alone. So if these 15 swatches are the only way to find each segment in the layout or to tell which segment an article belongs to, you're going to have some usability issues.

Beyond that the biggest risk is if you have color coding associated with other considerations, like the brand identity or success/failure, etc. Colors too close to these could be confusing. This also holds for if any of your 15 swatches are difficult to distinguish. That number feels large to begin with.

Have you considered logical groupings? It seems like marketplace, classifieds, homes for sales, apartments for rent etc. all have a lot more in common than say, jobs and videos, yet the latter pair is closer in color. Thematic linking can give you wiggle room for colors which are closer together, or even reused. On the other hand, accidental linking between disparate segments could create confusion.

Finally, maintainability is something to consider. 15 swatches is a lot for implementation to keep track of reliably. If you want to change them, it could be a chore to hunt down, even with modern precompilers. Your programmers are also users of your design, in an abstract way. But these considerations are minor compared to the others.

  • The swatches at the bottom actually arent part of the website I'm just giving the example of what I'm trying to do so far as sections with colors. I also agree that the number is really high. Okay so your suggesting possibly color coding by commonality? I never heard of thematic linking I'll look that up real quick. – Thomas Martinez Jul 14 '17 at 17:01
  • 1
    I can't yet comment on your other posts, but the solution you arrived at sounds like roughly what I intended. The inclusion of icons is also a smart move, as it takes some pressure off of the color-coding. Glad this was useful! – Nathan Christie Jul 14 '17 at 20:42

I used multiple discussion and answers to figure out what should happen. So going along with Nathans suggestion "read comment above". I'm going to group related sections with a dominate color like red, green, blue, ext. Then each one of those sections inside that dominate color will have variations of that color chosen. Ex: News, Blogs will be two different types of blue. Not only I'm going to color by grouping but also use icons to give each section a unique attribute to further distinguish them from each other.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.