stop guessing colors! a system to help you build a ux design color palette
TRANSCRIPT
Color for UX design
Maria MatveevaHead of Design at DockYard @rgbcolor @dockyard
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!
Moscow Sacramento Montréal Baltimore Washington, D.C. Boston (to be continued)
UX Design
DockYard.com @dockyard
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.
Are we in control?
1. Art History
2. Culture & context
3. Color theory
4. Making it work for UX design
1: Art HistoryART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
Natural System of Colors, Moses Harris – 176
Pigments
Holy!
Also holy!
OK for commoners
14th - 15th century
The MilkmaidVermeer (c. 1658)
Industrial Revolution
1. Chemical pigments
William Perkin’s Mauve
Ooh! New pigment!
Real artists use tasteful muted colors
Average Artwork
Saturation
All art since the 1500s
2. Tube paints
Winsor & Newton, John Goffe Rand
One color at a time
Slow process
Prepared by artist
In studio
More colors at once
Fast, spontaneous
Available to buy
Portable
First WYSIWYG editor
The Hay Wain
John Constable (1821)
Haystacks, Midday
Claude Monet(1890)
The Night Café
Vincent Van Gogh (1888)
Self portraits by
Vincent Van Gogh (1880s)
1914—1918
Things get weird & scary
Vassily Kandinsky1936
Vassily Kandinsky1936
Vassily Kandinsky1936
Color as content
Mark Rothko1950s
IKB: the International Klein Blue - first pigment as art, 1958
trendlist.org
Any color you want!
Andy Warhol
1960s
Andy Warhol
1960s
Unchangeable pigment
Color for realism
Impression (from nature)
Expression (from the inside)
Color as content
What color would you like?
2: Culture & ContextART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
What’s wrong with this fence?
“Wine-color” sea?
Dark Light
Which one is the
blue?
粉红, fěn hóng, literally "powder red"
红“red”
JeongMee Yoon
1637 Anthony Van
“Money” or “The Prophet”?
Mary or URL or Krishna?
Communism or traditional bridal-wear?
A monk’s robe, or an alert message?
Politics +
Cultural context +
Language differences +
How important is color?
Check your assumptions
3: Color TheoryART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
COMPLEMENTARY Vibrant when used together
ANALOGOUS Colors strengthen each other
ETC… Colors in relation to each other
HUE most common understanding of “color”*
SHADE how much black?
TINT How much white?
CHROMA (Also “saturation”) - how close to gray?
GRAY EQUIVALENT How light or dark does the hue appear?
GRAY EQUIVALENT How light or dark does the hue appear?
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
Value contrast → Readability → Accessibility
Color Sphere
Albert Munsell – 1900
vs.
Munsell color systemPhotoshop color picker (HSB)
4: Make it work for UX Design!ART HISTORY | CULTURE & CONTEXT | COLOR THEORY | MAKING IT WORK FOR UX
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!
Is it pretty?
(Do I like it?)
Defend your decisionsColor has a job to do
Show related Symbol
!
Psychology
Represent data AestheticBranding
Google “UX design color guide”
guidance may vary
A system
1. Resolve the contrast in grayscale sketches
2. Select the colorfor audience and goal
3. Refine
1. Resolve contrast
2. Select the color
2. Select the color
× (Users) × (Goals) = }{
Brand colorActive, engagingNot reserved
I want this gold color to “POP”
Complimentary
Branding
Refine → awesome
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
1. Don’t forget proportion!
https://www.google.com/design/spec/style/color.html
design-seeds.com palettes via Pinterest
2. Sketch with color
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
4. Not-black and not-white
5. Adjust one thing at a time
vs.
Munsell color systemPhotoshop color picker (HSB)
6. Remove color
6. Remove color
6a… or don’t remove color!
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
Have a backup
Steps to color success:
Grey sketches
Key words: tone, subject
Colors relate to keywords
Combinations and color theory
Proportion, refinement
WHAT TO EXPECT
- Avoiding surprises earns you…
Photo credit: Flickr user mariachily
Thank you!
Maria Matveeva | @rgbcolor
#UXPA2016 | http://www.uxpa2016.org/sessionsurvey
Maria Matveeva
@rgbcolor @DockYard
Over to you…
Fun facts
