Patterns Day 2019 - Una Kravets

The Problem With Legos & System at Scale

In Una’s talk they discussed how Design Systems can fail and what we can do to stop that.

• Design Systems Support User Needs
• But not all design systems are successful
• Reasons why Design Systems fail
• These five elements are really key:
  • Investment - small, incremental, continuous change is necessary for a design system to succeed as a a product grows and adapts.
  • Communication - creating continuous and open dialog between designers developers, project mangaers and end-users.
  • Buy-In - A system needs support to succeed.
  • Solid Architecture - What happens when nobody is using today’s frameworks anymore? What’s the next thing?
  • Frictionless - If a system is more difficult to use than the current workflow, nobody will want to adopt it.
• Building a design system is like building with lego blocks.
• When you really start to scale the system - the lego analogy breaks down.
• Lego has custom pieces doing one thing and that one thing really well.
• With Lego sets you cannot build a T-Rex lego set with a car lego set.
• A Lego set will never change.
• You could use a part from a different set, but it would look odd.

Design is ever-changing.

• Designs change.
• You need to write the CSS for the new trends.
• We moved from skeuomorphism to flat design using the technology available to create the designs.
• Typography changes, the system needs to keep up

• Form Follows Function
• Design Follows Technology

Just as design changes, design systems technology changes. Which is great, but can also be a challenge to how your Design System scales.

• A Unified Design Spec
  • guidelines, guidelines, guidelines
  • in Material each component has specific guidelines as well as generic guidelines.
  • It’s nice to have robust documentation, but you need the tooling to work with the spec.
• Tooling
  • a colour picker on Material allows you to define a theme across your product
  • a shape tool allows you to define the borders on all relevant components.
  • Google Fonts - an excellent resource of free typefaces
  • With the tooling in place you can move to components
• Components
  • Material provides components you can use within your material project or individually.
• Theming
  • Material provides the flexibility for brands to maintain their style on top of the components from Material, so everything doesn’t ‘just look like Google’.

In the end the design team found three sub-systems for theming that help build systematic expression of your product

• Typography
• Colour
• Shapes

Colour:

• colour effects text and background of your application
• primary and secondary colours
• Allocate semantic meaning to your core application.
• With the Sass variables or CSS custom properties you can easily see the difference in the components.

Typography:

• think about the shape of the type you’re using
• can be easily imported via Sass.

Shape:

• strong difference in shape can be used to direct attention.
• asymmetric shapes can help emphasise certain aspect of the UI
• shape can be used to communicate a component state.
• CSS Houdini allows you to tell the browser how it should read your CSS via JavaScript.
• Houdini allows you to create shapes that are not in the CSS spec (yet).

Overrides

• nobody needs a custom component
• … everybody needs a custom component.
• When we provide theming, some times what is available is not enough.
• In Material you can use Sass mixins to override the CSS

CSS is Not the Enemy.

Material Theme Builder.

When building your own themes using Material keep in mind accessibility, colour contrast is on you to get right.

If we stifle the needs of users, the design system will not be used.

Material, like any component library is a work in progress.

Design Systems are way to complex to keep comparing them to Lego.