Stop guessing colors! A system to help you build a UX Design color palette - UXPA 2016 Seattle

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.

Transcript

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