Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Stop guessing colors! A system to help you build a UX Design color palette.

912 views

Published on

Picking colors is often frustrating: so many options! Art history, cultural differences, color theory, brand guidelines, and usability inform our decisions.

This presentation offers a systematic approach to color for UX design. Based on value contrast first, we will approach color selection as a system, rather than a series of unrelated choices.

Published in: Technology
  • Be the first to comment

Stop guessing colors! A system to help you build a UX Design color palette.

  1. 1. Color for UX design Maria Matveeva Head of Design at DockYard @rgbcolor @dockyard
  2. 2. Photo by Elliott Engelmann Where do I start? How do I explain decisions to a client? How do I deal with differing opinions? How do I know the colors will work well? There’s too many options!
  3. 3. Moscow Sacramento Montréal Baltimore Washington, D.C. Boston (to be continued)
  4. 4. UX Design
  5. 5. DockYard.com @dockyard
  6. 6. Photo by Elliott Engelmann Where do I start? Contrast. How do I explain decisions to a client? Focus on goals. How do I deal with differing opinions? It’s OK. How do I know the colors will work well? Test. There’s too many options! Pick a process. Follow it.
  7. 7. Are we in control?
  8. 8. 1. Art History 2. Culture & context 3. Color theory 4. Making it work for UX design
  9. 9. 1: Art History ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
  10. 10. Natural System of Colors, Moses Harris – 176
  11. 11. Pigments
  12. 12. Holy! Also holy! OK for commoners
  13. 13. 14th - 15th century
  14. 14. The Milkmaid
 Vermeer (c. 1658)
  15. 15. Industrial Revolution
  16. 16. 1. Chemical pigments
  17. 17. William Perkin’s Mauve
  18. 18. Ooh! New pigment! Real artists use 
 tasteful muted colors Average Artwork Saturation All art since the 1500s
  19. 19. 2. Tube paints
  20. 20. Winsor & Newton, John Goffe Rand
  21. 21. One color at a time Slow process Prepared by artist In studio More colors at once Fast, spontaneous Available to buy Portable
  22. 22. First WYSIWYG editor
  23. 23. The Hay Wain John Constable 
 (1821)
  24. 24. Haystacks, Midday Claude Monet
 (1890)
  25. 25. The Night Café Vincent Van Gogh
 (1888)
  26. 26. Self portraits by Vincent Van Gogh
 (1880s)
  27. 27. 1914—1918
  28. 28. Things get weird & scary
  29. 29. Vassily Kandinsky
 1936
  30. 30. Vassily Kandinsky
 1936
  31. 31. Vassily Kandinsky
 1936
  32. 32. Color as content
  33. 33. Mark Rothko
 1950s
  34. 34. IKB: the International Klein Blue - first pigment as art, 1958
  35. 35. trendlist.org
  36. 36. Any color you want!
  37. 37. Andy Warhol 1960s
  38. 38. Andy Warhol 1960s
  39. 39. Unchangeable pigment Color for realism Impression (from nature) Expression (from the inside) Color as content What color would you like?
  40. 40. 2: Culture & Context ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
  41. 41. What’s wrong 
 with this fence?
  42. 42. “Wine-color” sea?
  43. 43. Dark Light
  44. 44. Which 
 one is the 
 blue?
  45. 45. 粉红, fěn hóng, 
 literally "powder red" 红 “red”
  46. 46. JeongMee Yoon
  47. 47. 1637 Anthony Van
  48. 48. “Money” or “The Prophet”?
  49. 49. Mary or URL or Krishna?
  50. 50. Communism or traditional bridal-wear?
  51. 51. A monk’s robe, or an alert message?
  52. 52. Politics + Cultural context + Language differences + How important is color? Check your assumptions
  53. 53. 3: Color Theory ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
  54. 54. COMPLEMENTARY Vibrant when used together
  55. 55. ANALOGOUS Colors strengthen each other
  56. 56. ETC… Colors in relation to each other
  57. 57. HUE most common understanding of “color”*
  58. 58. SHADE how much black?
  59. 59. TINT How much white?
  60. 60. CHROMA (Also “saturation”) - how close to gray?
  61. 61. GRAY EQUIVALENT How light or dark does the hue appear?
  62. 62. GRAY EQUIVALENT How light or dark does the hue appear?
  63. 63. Difficult to read - only hue contrast Difficult to read - only hue contrast Easier to read - value contrast Easier to read - value contrast Value contrast → Readability
  64. 64. Value contrast → Readability → Accessibility
  65. 65. Color Sphere Albert Munsell – 1900
  66. 66. vs. Munsell color systemPhotoshop color picker (HSB)
  67. 67. 4: Make it work for UX Design! ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
  68. 68. Photo by Elliott Engelmann Where do I start? How do I explain decisions to a client? How do I deal with differing opinions? How do I know the colors will work well? There’s too many options!
  69. 69. Is it pretty?
  70. 70. (Do I like it?)
  71. 71. Defend your decisions Color has a job to do
  72. 72. Show related Symbol ! Psychology Represent data AestheticBranding
  73. 73. Google “UX design color guide” guidance may vary
  74. 74. A system
  75. 75. 1. Resolve the contrast 
 in grayscale sketches 2. Select the color
 for audience and goal 3. Refine
  76. 76. 1. Resolve contrast
  77. 77. 2. Select the color
  78. 78. 2. Select the color × (Users) × (Goals) = }{
  79. 79. Brand color Active, engaging Not reserved
  80. 80. I want this 
 gold color 
 to “POP” Complimentary
  81. 81. Branding
  82. 82. Refine → awesome
  83. 83. 1. Don’t forget proportion 2. Sketch in color 3. Use hue contrast sparingly 4. Not-black and not-white 5. Adjust one thing 6. Remove colors
  84. 84. 1. Don’t forget proportion!
  85. 85. https://www.google.com/design/spec/style/color.html
  86. 86. design-seeds.com palettes via Pinterest
  87. 87. 2. Sketch with color
  88. 88. 3. Use hue contrast sparingly Difficult to read - only hue contrast Difficult to read - only hue contrast Easier to read - value contrast Easier to read - value contrast
  89. 89. ColorBrewer.org
  90. 90. 4. Not-black and not-white
  91. 91. 5. Adjust one thing at a time
  92. 92. vs. Munsell color systemPhotoshop color picker (HSB)
  93. 93. 6. Remove color
  94. 94. 6. Remove color
  95. 95. 6a… or don’t remove color!
  96. 96. 1. Don’t forget proportion 2. Sketch in color 3. Use hue contrast sparingly 4. Not-black and not-white 5. Adjust one thing 6. Remove colors
  97. 97. Have a backup
  98. 98. trello.com
  99. 99. Steps to color success: Grey sketches Key words: tone, subject Colors relate to keywords Combinations and color theory Proportion, refinement
  100. 100. WHAT TO EXPECT - Avoiding surprises earns you…
  101. 101. Photo credit: Flickr user mariachily
  102. 102. Thank you! Maria Matveeva | @rgbcolor #UXPA2016 | http://www.uxpa2016.org/sessionsurvey
  103. 103. Maria Matveeva @rgbcolor @DockYard Over to you…
  104. 104. Fun facts

×