Color from Chaos

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
April 05, 2019

Color from Chaos

Design systems are built on top of many other systems, and each part has to be designed in context with the rest. Many people don't start creating a design system with a clean slate. We're often starting with something already designed, code already deployed, and customers already using interfaces. Over time, design decisions lose their purpose as the number of people who've worked on a single page grows, and the code behind the UI has been iterated on many times. This means working on design systems in not just designing the system itself, but also creating order from chaos.

In this talk I share my experience creating design systems. I zoom into a single part of the system—color—and show you how this one element scales and influences in ways you may not even think to design for.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

April 05, 2019
Tweet

Transcript

  1. 3.
  2. 8.

    – The Secret Lives of Color, 99% Invisible Over the

    course of human history, the search for the brightest splash of color has been a defining feature of our species
  3. 10.
  4. 13.

    Color From Chaos — @broccolini April 2019 Age, mood, personal

    background, and current trends, can affect how someone responds to color.
  5. 14.
  6. 17.
  7. 18.
  8. 20.
  9. 22.
  10. 24.
  11. 29.
  12. 30.
  13. 32.

    Color From Chaos — @broccolini April 2019 #eee #ddd #fefefe

    #eee #e49649 #d8d8d8 #ddd #eee #fefefe #ddd #e49649 #eee #fefefe #eee #ddd #fefefe #d8d8d8 #eee #fefefe #eee #e49649 #d8d8d8 #ddd #eee #fefefe #eee #ddd
  14. 36.

    Color From Chaos — @broccolini April 2019 Are you happy

    with the output of 
 the current system?
  15. 37.

    April 2019 Color Frome Chaos - @broccolini Are you introducing

    a system to make it easier for others to follow? Or do you want to improve the results of the system? Are you happy with the output of the current system?
  16. 38.

    April 2019 Color Frome Chaos - @broccolini More modern colors

    Improved color contrast A system that was easy to follow Maintainability of color usage Goals
  17. 43.
  18. 47.

    Name Descriptor Purpose red green yellow blue cyan indigo violet

    gray black warm cool bright light dark deep dull muted faded foreground background border fill primary secondary highlight accent alt (alternative)
  19. 52.

    Green Light green Lime… Yellow Amber Orange 
 Deep Orange…

    Indigo Blue Light blue Cyan Teal… Material design
  20. 56.

    – Josef Albers, Interaction of Color If one says ‘Red’

    (the name of the color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very different.
  21. 58.

    Knowing what the color is by name only Internalizing color

    names in code Vocabulary for conversations about color
  22. 61.

    Color From Chaos — @broccolini April 2019 Look at the

    interconnections, 
 not just the elements
  23. 63.
  24. 69.
  25. 70.
  26. 75.
  27. 76.
  28. 86.

    1 2 3 4 1 2 4 8 Increasing the

    quantity of color in each step does not result in equal gradation.
  29. 88.

    ProgrammingDesignSystems.com var boxh = height / 10; for(var i =

    0; i < 10; i++) { var h = lerp(64, 22, i / 9); var s = lerp(86, 90, i / 9); var l = lerp(96, 56, i / 9); fillHsluv(h, s, l); rect(0, i * boxh, width, boxh); } Procedurally generating color
  30. 93.

    Color system 
 feedback loops • more utilities that represent

    color system variables • variables commonly used with a color function to be altered • additional colors frequently added that don't follow the system
  31. 95.
  32. 98.

    – Kassia St. Claire Color is not a precise thing,

    it’s changing, 
 it’s living, it’s constantly being redefined 
 and argued over