Specific design systems, I mean. Design systems, as a concept, are something just about any site can benefit from.
A lot of hype goes into design systems these days. Just the other day, an organization’s published their design system publicly and I got a slew of DMs, emails, and Slack messages encouraging me to check it out. “Looks good to me,” I said. But I’m merely knocking on the hood of a new car, so to speak. I haven’t sat in it. I haven’t driven it around the block, let alone driven it cross-country or tried to dig Cheerios out from between the seats. I’m sure I’d have more opinions after building a site or 10 with it (excuse the mixed metaphors).
So that leads me to a few questions. Can I build a site with this design system? Should I build a site with it? Is it for me? Or wait… who is this for?
They all have accordions.
Well not all of them, but bear with me, because there is a point to be made.
Bootstrap has an accordion too! Developers totally understand Bootstrap.
Whatever you think of it, I don’t see much confusion around Bootstrap. You link up the CSS, you use the HTML they give you and — 💥 — you have components that are ready to rock.
It’s possible that Bootstrap is a more of a “pattern library” than a “design system.” I dunno. There is probably something to that distinction, but the naming semantics (if there are any) seem to be used interchangeably, so distinguishing Bootstrap as one or the other doesn’t alleviate any confusion.
Developers reach for Bootstrap because…
- It helps them build faster.
- They get good quality “out of the box” if they aren’t particularly great at HTML and CSS themselves.
- They want to be accessible and Bootstrap has been through the accessibility ringer.
- [Insert your reason.]
Appealing, yet these seem to be somewhat table stakes for any design system and not exclusive to Bootstrap alone.
Hmmmm… Maybe I’ll have a gander around and choose a non-Bootstrap solution for my next project.
A lot of people are in this boat.
Maybe the next project is React so we want a design system that makes React a first-class citizen. Maybe we had trouble customizing Bootstrap to our liking. Maybe we just saw the default look of another design system and thought that would be a better fit. Maybe we are just bored of Bootstrap. Lots of reasons to look outside of Bootstrap, just as there are lots of reasons to look to it.
Since other design systems have accordions, too, can’t I just… pick one?
One immediate consideration is the license. Salesforce’s Lightning Design System is often pointed to as a leader in the world of design systems and has influenced a lot of the current thinking around them.
Yet, it is not open source licensed. Actually, it is open source licensed. It uses BSD Clause-3 (MIT-like) for everything but the fonts and icons, which are Creative Commons Attribution-NoDerivatives 4.0. I’m told: “anyone could reuse the code in their project that don’t have anything to do with Salesforce. They just can’t reuse it in a way that’s mimicking the system too closely.”
That’s not a problem — it’s probably a good thing for Lightning. It’s not a general purpose grab-it-and-go for all web developers on Earth as the target audience. It’s for Salesforce and the slew of teams on different development stacks building things for Salesforce. If you’re not building a Salesforce thing, it’s not for you.
Then why is it public and not some internal document for the Salesforce team? I can’t answer for them, but as I understand it, Salesforce is so enormous that they have both internal and external teams using it. So, perhaps making Lightning a public document is the most useful way to make it available to everyone who needs it.
This is something we’re actively discussing on the SLDS team. What exactly does “open source” mean to design systems when the usage is so specific? Is it more “source available?
— Alexis Córdova (@acordova) April 9, 2019
There’s also the nice side effect that they get good press for it, and that can’t hurt hiring efforts. I’ve also heard having a public design system can spark interesting and useful conversations.
Carbon is the official implementation of the IBM Design Language for product and web designers, and represents an ever-growing ecosystem of design assets and guidance. With a comprehensive set of human interface guidelines, design kits, and documentation, Carbon helps designers work faster and smarter.
That doesn’t quite tell me what I want to know. It looks like IBM stuff out of the box, so it’s definitely for IBM.
It’s open source so I can use it if I want to. But is it really for me and my random projects? Do they want me to use it for that? Am I, random developer, who they are thinking about with this project? Or is it IBM-first, random developer second?
Company first, the world second.
If a design system is by a company, then it’s for the company. It might also be open source, but any ol’ random developer who wants to use it isn’t the target audience.
It might not even technically be a company who makes it. It could be a government!
One really great design system is the U.S. Web Design System, which just went 2.0. It’s gorgeous! It looks very complete and has some great features. It’s got a classy custom font, it was designed with incremental adoption in mind, it has both useful components as well as utilities, and was built atomically from design tokens. Perhaps the best feature is that it’s extremely accessible because it has to be by law.
The U.S. Web Design System is mostly public domain, so you totally can use it. But it’s not designed with you in mind; it’s designed to help people who make website for the government.
(By the way, The U.S. Web Design System is open to contribution, which is pretty cool because it’s a way you could make a significant impact on websites that are very important to people’s lives.)
My mindset is that open source design systems are not meant be reused and spin up for yourself, but to learn from and apply to your own
— Mike Dick (@miked1ck) April 9, 2019
Here’s another kicker: There is a spectrum of customizability to design systems, on purpose.
Even if you technically can use a public design system you’ve found and like, you might consider the customizability angle. There is a whole spectrum to this, but let’s consider the extreme edges and middle:
- Zero Customizability: We built this to strongly enforce consistency for ourselves.
- Pre-Selected Variations: We’ve got accordions in three different colors.
- BYO Theme: We’ll give you a skeleton that loosely achieves the pattern and you apply the styles to your liking.
There are design systems at all points on this spectrum. Bootstrap might be in between the last two, where you get a fully styled theme, but customizability largely comes via setting Sass variables and that creates infinite variations.
Polaris, Shopify’s design system, is open source, but definitely for Shopify stuff. They are intentionally not trying to do what Bootstrap does (they tell me). It’s far more about enforced consistency and adhering to a cohesive brand than it is slapping together and customizing a page.
Material Design is definitely Google’s thing. The story of Material Design is that Google has an absolute crapload of products across all sorts of platforms. This could so easily become a mess of inconsistent design and branding. Instead, Google develops Material Design and successfully ships it across what seems like their entire empire. An incredible success story in design systems. So I don’t think it’s off base to say that Material Design is by-Google for-Google.
But these days, they definitely encourage other developers to use it too. By default, that makes your thing look like a Google thing.
But they are actively trying to make Material Design more customizable so you can bring your own brand. So far, it looks like there is a Sketch plugin that helps with that. For us coders, their Material Components repo looks like it is built with Sass and many things are set up with variables you can override. See this tutorial about customizing.
There are lots of success stories with customizing Material Design. Companies like Lyft, Zappos, and NPR, who all have strong brand identities of their own, all use customized Material Design.
That makes the messaging for Material Design all the more tricky and interesting. It’s very definitely for Google, but clearly it’s also very definitely intended for anyone else who wants to use it. That messaging just might work as Google has the resources and perception to pull that off in a way that I would think it’s harder for other company-branded design systems to do.
In case this isn’t obvious (and I very much fear that it isn’t), design systems aren’t a commodity. We don’t get to simply pick the one that has the nicest accordion and use it on the next project. We might not even be allowed to use it. It might be intentionally branded for a specific company. There are all kinds of factors to consider here.
My parting advice is actually to the makers of public design systems: clearly identify who this design system is for and what they are able to do with it.
I’d also like to note that everyone who I’ve brought this up to in the last few weeks has had different opinions about all this target audience messaging stuff in design systems. Of course, I’d love to read your comments about how you feel about it.