There’s a reason that Twitter’s extremely popular Bootstrap framework has 157K stars on GitHub. For over 10 years, it’s been making it easier to create modern web applications quickly, alleviating the pain of having to design every UI component from scratch. It’s a design system. Material-UI (now MUI Core) has almost 80K stars. And so on, and so on.

Photo by Balázs Kétyi on Unsplash

Design Systems: Then

Back in 2012, Dan Cederholm published something he called Pears. It was an open source custom WordPress theme creator. It allowed developers & designers to begin to create reusable interface pattern libraries. Bootstrap v1.0.0 launched a year later in 2013, and it’s easy-to-use UI and responsive design framework was quickly adopted by many in the software-development vein.

Responsive web design (RWD) had come about around 2010 with Ethan Marcotte’s media query shot heard ’round the world. I was sitting in a conference in 2010 in Atlanta watching him go over how this would change everything in designing for the web. He wasn’t wrong. It was a paradigm shift to be sure. And built on the back of RWD, the UI frameworks like Bootstrap had some context for flexible screen adaptation.

Design Systems: Now

Design systems have matured since 2013 and people like Dan Mall have led the way in showing companies how to build and use them. Prior to solidifying the need for these systems, companies were noticing the amount of discrepancies and variations across their digital media platforms. There was a deep need for interface consistency.

IBM’s Carbon, MUI Core, and Salesforce’s Lightning are all examples of how front-and-center these libraries have become. Emmet Connolly (VP of Product Design, Intercom), comments:

“… most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”

Diana Mounter, Head of Design at GitHub, walks through the process of realizing when you need a design system:

Design Systems: Next

We are now in the phase of measuring and refining the design systems we have created over the past 5 – 10 years. As design systems mature, paying attention to underperforming components should influence how we iterate on our design systems. There will always be new and better components and patterns to create and iterate on.

And lastly, it’s interesting to note that companies are beginning to build teams around design systems and titles like Head of Design Systems is becoming much more common.