July 11, 2017 Understanding Color for UI Design

For me, color can be amusing and daunting at the same time, especially when I have no basis at all for a class named color theory. At first, I tend to fall in love with bright-contrast-vivid-neon colors, like cyan, magenta, yellow, and red. Without any clue, I was recklessly using all the colors which I think will work for my design.

Then, there was the time when I wondered how renown legend members like iamtong, abedavera, oninxkronda pick their mesmerizing colors while I was using default colors provided in the swatch panel.

Well, I was wrong, wrong at all those frequently delivered dull-clashing color design submissions. Submissions with rainbow colors seeking the client’s attention rather than conveying the meaning of each color.

Looking back, I kept asking myself how do I pick the color that works for my design? After lots of trial and error, countless links, and a myriad of videos, here is the summary of my experience of working with color.

1. Use Client Provided Colors

If the client provides a branding guideline or color scheme, then just use it. This will be the safest color to use rather than develop a new palette that differs from client’s brand. Is it always working? Nope! Sometimes I found myself using the secondary or third colors courageously then I got my feedback: wrong color—from client and reviewer. Stick to the main/primary brand color then use the secondary and tertiary as accents or to complement your design.

2. Have Your Own Favorite Palette

It is common that client provides no branding or sets the color open to designers. If you have your own favorite color palette that always works, just use it.

3. Use Bulletproof Palette

In case your favorite palette is not working or the client asks for another color, you can try using this bulletproof palette that is a gold standard in UI design: Material Pallette, iOS Color, Metro UI Color, IBM Design Language.

4. Keep It Simple

How frequently have you gotten the feedback “too much color” from adroc? For me, countless times! Solution? Avoid using all the available colors in one design. If possible keep it simple, but not dull.

5. Maintain Swatch Panel

Instead of trying all the colors on the swatch panel, I usually remove all the default colors then add the client’s color one by one. This way, I can save time to guess which color I should use for this text or icon. Also, remember to rename all the colors as it will be helpful if you working with colors with the same shade.

5. Go Darker and Lighter Variations

Too white or too dark designs can make the overall design look dull. By keeping a balance between dark and light colors, your design will pop up and make your elements easily recognizable.

5. Avoid Opacity and Start Using HSB

I admitted that it is easier to use white or black color and then set the opacity from 1 – 99 percent to make lighter or darker color. Then I found out that this method will cause trouble when I use an eyedropper and pick the original color, instead of the shade I want. Using Hue-Saturation-Brieghtness (HSB) spectrum to find the shade then save, is the best solution I found.

6. Almost White and Almost Black

Pure white (#ffffff) and pure black (#000000) can cause eye strain. Have you ever read pure white text on a pure black background? Do you seeing any stars when you move out your eyes from the screen? Or have you ever felt so uncomfortable to write in pure black text on a pure white background? If you answer yes to both question, consider to use almost white (eg. #f1f1f1 – fafafa) and almost black (#090909).

7. White space

Give space for color to breathe by using white space and you’ll be amazed at how clean and clear your design will be.

8. Use the Checkpoint Round Wisely

Thanks to the checkpoint round we have at Topcoder, we can use it to try our initial color palette and let the client provide feedback about our design.

9. Post on Forum

If you have doubts about the color that you use, just post it on the forum. Copilot, client, and PM are there, ready to help you.

Why is color important?

Apart from the functions and experience of your design submissions, using the right color can bring you as a winner if you precisely convey the client’s brand in your design. A good understanding of color is the critical element to win over the client!

Useful Tools Out There

Here are some of the tools to benefit from the vivid world of color: – color.adobe.com – paletton.com – color-hex.com – coolors.com – materialpalette.com – flatuicolorpicker.com

Useful Resources Out There

Thank me later but I compel you to visit and voraciously explore this resource to grasp a deep understanding of color: – IBM Design Language – Material – iOS Human Interface Guideline