Mastering Dynamic UI Theming for Designers at Layers Portugal

Transcript

1. 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
   

   View Slide

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

   View Slide

3. A typical
   UI
   

   View Slide

4. View Slide

5. Colors can be
   
   challenging
   

   View Slide

6. 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
   

   View Slide

7. UI reflects user selection
   TASK
   75
   Initial

   colors
   UI
   Approach
   Aa
   

   View Slide

8. Show initial colors as is
   Approach 1
   75
   Aa
   Initial

   colors
   UI
   No change
   No change
   

   View Slide

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

   View Slide

10. Actually it doesn’t!
    Approach 1 Test
    75
    Selecting

    white text

    on a white BG

    leads to an

    unusable UI
    

    View Slide

11. Contrast

    matters!
    User interfaces

    must be accessible
    

    View Slide

12. We need enough contrast
    between text and BG in UI
    THe problem
    9
    Aa
    It’s hard to read

    the number in this UI
    ?
    

    View Slide

13. Transforminitial colors...
    Approach 2
    70
    Aa
    Initial

    colors
    UI
    Darker
    Lighter
    

    View Slide

14. Transform initial colors to
    ensureenough contrast
    Approach 2
    Aa
    70
    

    View Slide

15. Yeah...
    but how?
    

    View Slide

16. Is there an easy way

    to transform colors?
    Approach 2
    HEX
    RGB
    # B 2 7 F C 5
    178,127,197
    

    View Slide

17. Perceptual

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

    View Slide

18. Learn more
    OKLCH
    

    View Slide

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

    View Slide

20. Darken a color
    Transformation
    30%
    60%
    

    View Slide

21. Lighten a color
    Transformation
    85%
    68%
    

    View Slide

22. View Slide

23. Transform initial colors to
    ensureenough contrast
    Approach 2
    Aa
    70
    

    View Slide

24. Now it works... right?
    Approach 2 Test
    Aa
    102
    Aa
    72
    Aa
    90
    Aa
    65
    

    View Slide

25. Right! Approach 2 produces
    sufficient contrast
    Approach 2 Test
    100
    

    View Slide

26. 46 72
    Better contrast
    Approach 1 VS 2
    75 102
    18 65
    35 90
    

    View Slide

27. Convert to OKLCH
    Transform colors
    Ensure a11y in UI
    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
    

    View Slide

28. Are you

    crazy?
    

    View Slide

29. Why?
    

    View Slide

30. oklch.com
    

    View Slide

31. Harmony
    APCA × OKLCH UI Color Palette
    

    View Slide

32. Polychrom
    

    View Slide