Leggo My Pattern Library Analogy

When you think of a pattern library (or design system), what analogy comes to mind? Lego? If I had a Lego piece for every time somebody used Lego as a pattern library analogy, I’d be able to build the Death Star.

Lego is pretty awesome but also difficult to replicate a design without detailed piece-by-piece instructions.

Someone hands you a box of Lego and tells you to build an interface and that it has to look like the rest of the site. What are the chances that you’ve built something that is technically consistent with what others have done? Did you use two 4x2 bricks, or one 4x2 and two 2x2 bricks? Did you use green bricks or yellow bricks?

Lego gives you plenty of options but very little consistency.

In reality, pattern libraries usually hit an upper limit of around 100 components. Salesforce’s Lightning has 85 components. Shopify’s Polaris has 90. Anything more than that and interfaces become unwieldy. Each component is something that the designer has to design, the developer has to build and maintain, the user has to learn to use.

The combinations with which these components fit together are also limited. A Toast message is generally only going to appear in one or two places within the interface.

Tetris, on the other hand? A limited set of pieces that fit together in a particular set of ways. Sometimes you screw it up and it looks a bit wonky. Other times, when it all comes together, magic happens!

Now that’s the best analogy ever.

Published July 07, 2019
Categorized as HTML and CSS
Short URL: https://snook.ca/s/1152