Organizing Colors for UI Design
Let’s say hypothetically, we are already working with a established brand. Let’s say we are doing this work for a client or we are doing this for ourselves we have already established brand palette for colors. To consider with the branding we have to keep the previous color pretty much locked. We cannot get away from those colors because it will make us quiet deviated from the brand that’s already been established. So, to stay true with these colors is to just leave them alone. There is not much we can do beside using them appropriately in our design. So, we can make primary color as the layout colors. Layout colors make up the most of the designs. We can take primary colors and check so it can work better in both light and dark backgrounds and if it does we can consider that color versatile enough so that we can use it as a layout color.
The next color is the low contrast neutral color so on the light side it gonna be a very light grey, just enough contrast so we can see it. This is very important for sidebar, form fields and so on. They don’t need to stand out very much but do need to be there very own containers. On the dark side, it gonna be a dark color which contrast with respective to it’s own dark colored background. And from there we can create our higher contrast background colors. In this case higher contrast color in dark background is the background color in light side and higher contrast color in light background is the background color in dark side. Which are basically white and black. White doesn’t have to be absolute white(#ffffff). Then the color used ought to be the reduced versions of those both. We can have the colors that appear low contrast on one background and high contrast on another. Such colors helps to keep the layout super clean and can be used in texts without adding up the extra bunch of shades of gray.
Now, lets talk about denotive colors. Denotive colors are colors that mean something. For example we use some sort of shade of red to denote error or something that gone wrong. If your brand color is red, please avoid using same red color that is used to represent error red color so your brand doesn’t become synonymous with failure. So, red means bad and green generally means good. So, we use some shades of green for success messages or something for similar nature. If your brand color is green it is not bad to use green for success messages because it is good for your brand to be synonymous with success. It is right to use same color as denotive color apart from disable state because it should be grayed out in a sense that it has low opacity. Low opacity on light background is even lighter and low opacity on dark background is even darker. So, we need two distinctive shades of gray in lighter background (darker shade of gray) and darker background (lighter shade of gray). The important thing about disable state is that even though it have different contrast in lighter and darker background, it should have enough contrast so that it can be easily readable. Just be sure the content is readable even though the visibility is reduced in.
There is another sort of color family called interactive colors. In case of interactive colors try to use one color as your primary interactive color. Colorful thing people can touch and click.
COGNITIVE OVERHEAD
How many logical connections or jumps your brain has to make in order to understand or contextualize the thing you are looking at.
Select one color for interactive colors and keep one lighter shade of that primary color which is to be used as hover state or tap state or some alternative state so that it signifies user is making some contact with that button. And make even lighter and darker shade so that if you have a rollover state to show that it have been pushed in and have all the bases covered.
