Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mastering Dynamic UI Theming for Designers at Bites & Bytes

Roman Shamin
September 18, 2023

Mastering Dynamic UI Theming for Designers at Bites & Bytes

In this talk, I explain an essential new principle for generating dynamic UI themes on the fly. The key lies in the color transformations made possible by the new OKLCH color space, and I use my latest APCA Contrast Figma plugin, Polychrom, to demonstrate how it works.

Roman Shamin

September 18, 2023
Tweet

More Decks by Roman Shamin

Other Decks in Design

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
    #BitesAndBytesLisbon

    View full-size slide

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

    View full-size slide

  3. Colors can be

    challenging

    View full-size slide

  4. 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 full-size slide

  5. UI reflects user selection
    TASK
    75
    Initial

    colors
    UI
    Approach
    Aa

    View full-size slide

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

    colors
    UI
    No change
    No change

    View full-size slide

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

    View full-size slide

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

    white text

    on a white BG

    leads to an

    unusable UI

    View full-size slide

  9. Contrast

    matters!
    User interfaces

    must be accessible

    View full-size slide

  10. 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 full-size slide

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

    colors
    UI
    Darker
    Lighter

    View full-size slide

  12. Transform initial colors to
    ensure enough contrast
    Approach 2
    Aa 70

    View full-size slide

  13. Yeah...
    but how?

    View full-size slide

  14. Is there an easy way

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

    View full-size slide

  15. Perceptual

    uniformity P3 gamut
    OKLCH
    color model

    at a glance
    Chroma
    Dull—vivid
    Hue
    Red, yellow, etc
    Lightness
    Dark—bright

    View full-size slide

  16. Learn more
    OKLCH

    View full-size slide

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

    View full-size slide

  18. Darken a color
    Transformation
    30%
    60%

    View full-size slide

  19. Lighten a color
    Transformation
    85%
    68%

    View full-size slide

  20. Transform initial colors to
    ensure enough contrast
    Approach 2
    Aa 70

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

  25. Are you

    crazy?

    View full-size slide

  26. Tweet your questions to
    #bitesandbyteslisbon
    The best question wins
    some gifts...
    Award at the afterparty

    View full-size slide