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.
“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!)