Nearly a decade ago my journey on designing digital products had started. Back then, there were times that I struggled in the right application of basic UI design principles. Academically coming from a pure Physics background, Color psychology & matching was a hard catch for me at that time.
Fast forward to the present, the struggle still exists in young designers even today, right here with younger colleagues in the Design team I lead at UXArmy. Some of my workmates would ask me: “Marcus, how do you get the color combination right for each different product we are creating?” to which my response is common.
“I don’t. That’s why I spent a lot of effort trying to understand what we are trying to achieve from the overall colors.” To be honest, that’s not the answer that directly helps my colleagues.
That has been my trigger to write a short piece listing some principles. This list is by far not complete however, it serves as a good guideline for those struggling (like I was once!). I’ll also skip using jargons & complicated frameworks to help you understand the practicality of using it.
Principle #1 Overall Theme / Mood / Personality of a brand
Ask yourself!
What “mood” (coming from mood-board e.g. corporate, funky, etc) are you trying to achieve for the Design? Are you looking to instill a certain brand element/story into the design.
In my experience, some designs tend to exaggerate the branding presence of a company by using a lot of prominent brand colors in the Design. But that would need to tone down when we are moving towards user experience of a Digital product. Applying subtle colours from the existing branding helps, while a little too much of it might hinder clarity of certain user actions. We would have experienced/observed that thru product companies like Google suite, Facebook over their UI evolution.
Color Psychology helps to visualize the mood of the design better. It’s a reflection of the brand personality.
Select a few colors as a starting palette & rearrange your colors repeatedly till your own satisfaction. What is the overall personality you’re trying to bring into your product? Try putting up a simple mood board or research some samples which also convey similar personality to get a gist on the correct product direction.
Principle #2 Balance of Color Usage
Color Combination & color theories are pretty basic which you can easily learn via the Internet so I’ll skip this topic.
Like every painting, you need the correct amount of values in an artwork to achieve visual balance. Values are scales of dark & lighter variation of a color, & you’ll often need a good mix of it to get the right flavour, but be careful of having too much variations & you’ll have a hard time auditing or differentiating the usage.
For UI design, I would suggest a 3 variation of a single/similar color.
Pick a reference from the design below and you will observe the different shades of a color used. Focus on these values/color variation used on a UI set & try to tone up/down as needed.
Enhance your initial color palette with lighter/darker variations. Variations of color also come in handy with different button/text states.
In the interior design world, 6-3-1 is a magical combination. This general rule of thumb can also help you get started in UI design. It essentially means how 60% + 30% + 10% proportion is meant to give balance to the colors used in any space.
This concept is incredibly simple to use. 60% for the dominant color, 30% for secondary & 10% for accent.
Principle #3 Intention of Color Usage & Contrast
Be mindful of the colors you use & focus on helping users with better user experience when designing the UI. Some questions you may ask yourself:
Using color prompts user attention & attracts attention in different areas. It’s always good to be mindful of how you’re using those colors.
Think about interactive UI too. It’s not going to look all the same when the user interacts with the UI…right? Hover state, disabled/muted state, selected or deselected state. Informative colors, success & error alert/messages
Using a handy tool like a color contrast checker also helps to inform your decision better.
After all the above, you can try UI Refactoring similar to described in this article. Be sure to also test your palette by user testing the UI. There are also some tools that can come in handy e.g. ColorSafe http://colorsafe.co/ Google material has its composition rule for color scheme too, and there is a tool that helps generate the palette for you.
https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=6002ee&secondary.color=fb463d
WebAim also has a Colour contrast Checker https://webaim.org/resources/contrastchecker/
