1. The Art of Colors A few tips for user interface designers

2. Let’s warm up !

3. Let’s start with some basics

4. There are two color systems

5. AdditiveSubtractive red + green + blue = whitemagenta + yellow + cyan = black

6. designers use the additive system

7. What is this jargon ? hue brilliance saturation

8. Hue name and properties of a color that enables it to be perceived

9. Brilliance how light or dark a color is

10. the level and mixture of white, black, grey or complimentary included in colors Saturation

11. What are these ? primary secondary colors

12. Learn the color wheel

13. Another way to visualize

15. Primary colors

16. Secondary colors

17. Analogous colors

18. Opposite colors are complementary

19. Combinations of opposite or analogous colors are harmonic

20. Now you know the jargon too!

21. Do colors have personality ?

23. © Edward Burtynsky What about this orange ?

24. © Philip-Lorca diCorcia How about this yellow ?

25. © Cindy Sherman And what about this green ?

26. It’s about relationships

27. Dynamic relationship

28. Dynamic-static relationship

29. Static relationship

30. It’s a matter of contrast

35. It’s about balance

38. Think with your eyes !

39. Color palette tips & tools

40. Strive for harmony

41. Be mindful of contrast effects

42. Understand color dominance

43. Rules of thumb for designers

44. Ensure text readability through contrast Avoid the use of textures and pattern for backgrounds behind texts Avoid contrasts that cause eye fatigue Avoid color combinations that cause illusions when positioned together

45. Enhance user experience Establish conventions and use color consistently Use color both to support users’ tasks and for branding Use color to enhance aesthetic appeal and user satisfaction

46. Use color for identification, grouping, and emphasis Relate visual elements Demarcate different areas Highlight important task-related information

47. Use color associations in expressing state information Be consistent with job-related color associations Learn about cultural color associations

48. Indicate availability using color or value For links For controls For icons For windows