Mastering Dynamic UI Theming for Designers at Layers Portugal

Slide 1

Slide 1 text

Dynamic UI  Theming Mastering for designers Not Readable Aa 38 0 106 Polychrom le 0 108 0 0 62% 0.22 259 om Not Readable Aa 18 0 100% 0 0 62% Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Aa 75 0 108 100% 0 0 59% 0.22 262.6

Slide 2

Slide 2 text

What are F i f t y S h ade s of Grey?

Slide 3

Slide 3 text

A typical UI

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Colors can be challenging

Slide 6

Slide 6 text

Body Text Rg 18px Bd 14px Aa 75 0 108 100% 0 0 59% 0.22 262.6 Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Not Readable Aa 18 0 106 100% 0 0 62% 0.22 259 Polychrom Invisible Aa 0 0 108 100% 0 0 62% 0.22 259 Polychrom Demo

Slide 7

Slide 7 text

UI reflects user selection TASK 75 Initial  colors UI Approach Aa

Slide 8

Slide 8 text

Show initial colors as is Approach 1 75 Aa Initial  colors UI No change No change

Slide 9

Slide 9 text

It works good... right? Approach 1 Test Aa 75 Aa 46 Aa 35 Aa 18

Slide 10

Slide 10 text

Actually it doesn’t! Approach 1 Test 75 Selecting  white text  on a white BG  leads to an  unusable UI

Slide 11

Slide 11 text

Contrast  matters! User interfaces  must be accessible

Slide 12

Slide 12 text

We need enough contrast between text and BG in UI THe problem 9 Aa It’s hard to read  the number in this UI ?

Slide 13

Slide 13 text

Transforminitial colors... Approach 2 70 Aa Initial  colors UI Darker Lighter

Slide 14

Slide 14 text

Transform initial colors to ensureenough contrast Approach 2 Aa 70

Slide 15

Slide 15 text

Yeah... but how?

Slide 16

Slide 16 text

Is there an easy way  to transform colors? Approach 2 HEX RGB # B 2 7 F C 5 178,127,197

Slide 17

Slide 17 text

Perceptual  uniformity P3 gamut OK LCH color model at a glance C hroma Dull—vivid H ue Red, yellow, etc L ightness Dark—bright

Slide 18

Slide 18 text

Learn more OKLCH

Slide 19

Slide 19 text

L for Lightness OKLCH 80% 60% 40% Lightness +20 = lighten -20 = darken

Slide 20

Slide 20 text

Darken a color Transformation 30% 60%

Slide 21

Slide 21 text

Lighten a color Transformation 85% 68%

Slide 22

Slide 22 text