Patterns Day 2019 - Una Kravets

How do you design a design system that can be used by any site on the web? That’s a big challenge and one that Una did a brilliant job explaining. I was quite surprised to see that Material Design (in the past exclusively looking like Google) is now heavily customisable. It was also very interesting to see the focus on making everything work together nicely, allowing flexibility with types of components and trends changing over time.

Here’s my notes:

• “Design systems are for user needs”
• Small incremental changes that are continuous over time are important to succeed
• Continuous and open dialogue is key
• Design system is a product
• Needs a solid architecture, depending on the ecosystem
• Think “what is the next time? What happens when no one is using React?”
• Systems must be frictionless
• Path of least resistance is so important
• When you scale, Lego is not a good metaphor
• Lego come is specific kits, themes etc
• Each Lego kit does one thing very well “you cannot mix t-Rex Lego with avengers level”
• “You can’t build a website with blocks that don’t shift. You need to build the mortar between those blocks”
• Design trends change!
• “Design follows what is possible on the web, we saw it with what is possible with flat design”
• Talking about how Material design at Google scales:
• “Definitely a work in progress”
• Some guidelines are about sounds or icons, others about specific spacing and highlights when wrong
• Using light layers instead of shadows
• Guidance for ML and camera based applications
• After creating design spec first task is tooling, making it so anyone can express their brand
• Theming is used to allow teams to make their application or website not look like google but maintain the usability etc
• Google’s theme for material is just one theme, it is not the theme for material
• “It’s important to allocate semantic meaning to your colour application” of primary or secondary colour is red, using red for errors wouldn’t be appropriate
• Example of using Houdini to make corner shapes change individually
• Overrides - I really agree with this point, it’s so important that developers can add their own overrides
• “CSS is not the enemy” (this got a clap!)