A Tale of Two Lego Cities

In tech-speak, design systems are about creating libraries of reusable components that you then use to build websites.

However, if you aren’t well-versed in the concepts, this sentence will probably leave you scratching your head....

What are design systems, and why are they so useful?

Let’s say you’re tasked with building a Lego castle.

Everyone knows about Legos. Let's call them what they are: a common set of reusable components——components which you can use to build something larger, like a castle, for example.

We'd like to introduce you to your own special set of magic Legos. They don't look like much at first——they look like basic, gray Legos. But here's the magic: they're customizable into brilliant colors, and you can clone them with a wave of your proverbial wand.

But just like everyday Legos, you’ll use them as building blocks for constructing complex, beautiful castles.

Unlike your childhood Legos, these Legos don’t get all mixed together in a chaotic pile after you use them once: your library is the you-specific box that keeps them well-organized. And, because your well-organized Legos are perfectly designed in both form and function, you know they’ll all fit together, every time you want to build a castle. They’re Legos. Their guaranteed functionality is built into the simplicity and consistency of their design.

It turns out that your Legos are pretty useful, because it so happens that you’re tasked with building not just one castle, but lots of them–and though all your castles are different, they must maintain a consistent aesthetic, and everyone who visits them must immediately recognize that they’re all uniquely, wonderfully yours. Because you want your visitors to like them, and to come back, again and again.

Oh, and one more thing: the longer you take to build them, the more it costs you.

Fortunately, Legos are re-usable. You don’t have to go out and re-invent them every time you want to build a castle–likewise, with Component Driven Development, after your components are created, you use these basics to create consistent, functional, and beautiful user-facing content; as many iterations as you want. Instead of building every castle from the ground up, every time, you can implement the components you’ve already constructed: moats, guard towers, drawbridges. And–to keep up with the analogy–if one castle needs a moat, and another needs five guard towers–or you decide, after you’ve built ten castles, that you want to add inaugural banners to all of them...no problem. Your well-organized box of customizable Legos (your library of components) contains everything you need. And since they’re all Legos, you know that whatever changes you need to make to your castles in the future will be well-supported by the designs of the basic components that comprise the whole.

The value of applying a common set of reusable components to a larger whole becomes clear: you build more nimbly and quickly, all while saving money. You find yourself more willing to tinker and adjust, because the expectation that things will change is built into how you create. And, most important, your castles–every iteration of your brand, across all channels–are consistently beautiful, functional, and unmistakably yours.