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

ColorBrewer.org

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

trello.com

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