ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX

@itcampro #itcamp19
THE SHADOW RULER OF UX
ITCamp Romania
June 7th
2019, Cluj-Napoca
Color

@ive77iColor - the shadow ruler of UX @itcampro #itcamp19 @ITCAMPRO #ITCAMP19Community Conference for IT Professionals
Many thanks to our sponsors & partners!
GOLD
SILVER
PARTNERS
PLATINUM
POWERED BY

@itcampro #itcamp19
Ivana Miličić
Digital Product Designer
👋Salut!

@ive77iColor - the shadow ruler of UX @itcampro #itcamp19
What color is
the sky?

blue[albastru]

Have you ever been so
angry you saw red?
Or felt green with envy?
Maybe had the blues sometimes?

Color
perception

Color, Environment, and Human Response, Frank H. Mahnke
BIOLOGICAL REACTIONS
CULTURAL INFLUENCES
COLLECTIVE UNCONSCIOUS
CONSCIOUS SYMBOLISM-ASSOCIATION
FASHIONS, STYLES, AND TRENDS
PERSONAL RELATIONSHIP

Where?

Every color experience
begins as a physiological
response to a stimulus of light

10.000.000
bit/sec
40
bit/sec

Sensation
LIGHT
cornea rods and cones
fovea
iris
pupil
optic nerve
fibers
lens

ultraviolet
400nm
violet indigo blue green yellow orange red
700nm
infrared

Wavelength (nm)
Sensitivity
400 450
S M L
500 550 600 650 700
Trichromacy
S M L
input output
99,6% 91,3%

330.000.000
(~5%)
COLOR BLINDNESS

Anomalous Trichromacy
Sensitivity
400 450
S ML
500 550 600 650 700 S M L
input output
0,35% 5%

DeuteranomalyNormal color vision

1.300.000.000
people live with some form
of vision impairment
VISUAL IMPAIRMENT

Meet Her Majesty
Unconsious!

Culture deeply influence
our color perception

Life experiences and
memories shape
all our responses

Women and men do
see things differently

Color preference
continually changes

Nothing is seen
in isolation

Subjective, emotional, intrinsic
and deeply personal
Color - the most volatile
design element?

Which color scheme matches
the theme: Dentists?

93%
5%
2%
"... the colour is white, white
resonates with purity, and
I mean everyone wants
a white teeth right ?"
"I would expect more blue/
minty colours for dentists."
"It can be any other field related
to science and research..."
"Blood and teeth"

Which color scheme matches the
theme: Crypto currencies?

71%
15%
15%
"... I don't think of brown
when I think of Crypto"
"For crypto I'm thinking deeper
greens/blues but out of all
three options I'd choose this"
"... I'm used to more isometric
illustration and gradients."
"Looks cool and bright"

Let's test!
tiny.cc/color1

@ive77iColor - the shadow ruler of UX

Network 2:30 AM 98%
GET STARTED
Welcome
<app name> wants to
make it fun and simple to
be happy.
LeanTaas | ZSPAPP sign-up workflow wireframes v1A 1/25 2016
Mascot illustration,
warm, positive,
bright colors
Welcome note,
describing the
app purpose
Indicator of
few slides
describing core
app features
User taps
button to
proceed
Network 2:30 AM 98%
OR
Facebook Twitter
(555) 555-1234
email
password
SIGN UP
Already signed up? Sign in
I’d like to get to know you!
Friendly line of
text to initiate
sign-up process App collects
user cell phone
number from
system
(user can change it
if there is a need)
User taps on
sign-up button to
create the account
Once user
signs-up stays
logged in but if
app is installed on
another iPhone
he/she can
sign-in with
existing account
User fills email and
password fields
Alternative for filling
username and
password is
signing-up with
Facebook or Twitter
Network 2:30 AM 98%
Tell me more about yourself
What health system do
you belong to?
Which doctor do you
see there?
Conversational
dialogue
Mascot icon, as it
is talking to user
Short sentence
to encourage
user to fill in all
requested data
Page indicators
signal user to
swipe forth (and
back if needed)
Network 2:30 AM 98%
Fill the mood meter!
Record your ﬁrst mood
and begin seeing how
it changes over time.
Friendly text as
said by mascot
why to allow
access to social
media etc
Mascot illustration
as it is talking to
user
Page indicators
signal user to
swipe forth (and
back if needed)
Home
Network 2:30 AM 98%
Some intro text - maybe
motivational thought or
something like that
FRIENDS &
FAMILY
TOOLS
MOOD
METER
LeanTaas | ZSPAPP overall workflow wireframes v1 1/26 2016
Mascot illustration
with motivational
random text to
start using app
Menu button
opens sidebar
navigation
User slides
through
options and
then taps on
button to go
to selected
section
Network 2:30 AM 98%
FRIENDS &
FAMILY
TOOLS
MOOD
METER
FRIENDS & FAMILY
Friends & Family Feed
Contact
TOOLS
Meditation
Booster
Journaling
Good Day Cards
MOOD METER
Mood Check
Weekly Mood
PROFILE SETTINGS
3
10
1
Complete menu
navigation
Tap on menu
icon closes the
navigational menu
Notifications for
new stream posts
and tasks
Volo idusape llautem
ipsam quibus maxim
quaturiorem nonsequis
nobis sit pedi resciatiis
pore comnimaion pro
est, sinumquis eati conse
Network 2:30 AM 98%
All
Peri sapictiamus
coreped ut
aborepedis nos
enet poria
FROM
Friend’s Name
FROM
Friend’s Name
ipsam quibus maxim
quibus maxim
LOL
FROM
Friend’s Name
FROM
Friend’s Name
COOL USER TAG
CONTACT
FRIEND
FROM
Friend’s Name
USER TAG 2
Photos Videos Texts
Opens navigation
User can see
complete feed or
categories.
Current category
has an indicator
below.
New post
indicator
Tap on
each post
enlarges it
Current
screen title
Opens search
Who sent
the post
Floating button for
sending request
to a friend
ipsam quibus maxim
nobis sit pedi resciatiis
pore comnimaion pro
est, sinumquis eati conse
Network 2:30 AM 98%
All
Peri sapictiamus
coreped ut
aborepedis nos
enet poria
FROM
Friend’s Name
FROM
Friend’s Name
ipsam quibus maxim
quibus maxim
LOL
FROM
Friend’s Name
FROM
Friend’s Name
COOL USER TAG
FROM
Friend’s Name
USER TAG 2
Photos Videos Texts
Your friend/family member
could use a funny video, a
cool picture, or even just a
short text. You can simply
reply to this message with
a quick note of support and
we’ll be sure they get it!
Cancel Send
Friends name
(555) 555-4321
Friend name (and
picture) is shown
after user choose
him
Sends request
to friend via SMS
Cancel request

10s
Where would you click to order food?

3s
Where would you click to order food?

10s
85% participants said the action was clearer
3s

Let's test!
tiny.cc/color2

11s
Where would you click to confirm the task?

Working with
COLOR

10.000.000 16.777.216
UNIQUE COLORS

R- how red it is
G- how green it is
B- how blue it is
0-255
0-255
0-255
3 x 8 = 24 bit

rgba(220,125,162,0.5)
#dc7da2
rgb(220,125,162)
RGB
HEX

rgb(147,206,236)
#93CEEC
rgb(12,166,243)
#0CA6F3
rgb(0,119,178)
#0077B2

violet indigo blue green yellow orange red

0º
30º
150º210º
240º
330º
90º270º
180º
60º300º
120º
0-360HUE

Saturation
0% 50%25% 75% 100%
0-100%

Lightness 0-100%
0% 50%25% 75% 100%

H 200
S 70
L 75
H 200
S 90
L 50
H 200
S 100
L 35

HSLlightness
saturation saturation
brightness
HSB

Designing color system
Primary color(s)
Neutrals
Accent color(s)

Start from the
ground up

CHOOSE THE BASE

DEFINE DARKEST/LIGHTEST

FILL IN THE GAPS

saturation
lightness 100%0
100%

luminosity
360º0
100%

220, 100, 50
220, 100, 80 190, 100, 80 200, 100, 75
220, 100, 50 220, 100, 50

Primary
Neutrals
Accents

Tools! Tools!
tiny.cc/UX-color

Q&A TIME
🙏Mersi!
SPECIAL THANKS GOES TO
Helena Bukovac for helping
with the research
twitter.com/ive77i
linkedin.com/in/ivanamilicic/
instagram.com/just_ivana_things/

ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX

Recommended

Recommended

More Related Content

Similar to ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX

Similar to ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX (20)

More from ITCamp

More from ITCamp (20)

Recently uploaded

Recently uploaded (20)

ITCamp 2019 - Ivana Milicic - Color - The Shadow Ruler of UX