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.
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 Design System, on the other hand, is open source licensed. They also have an entire section explaining who should use the system:
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.
I completely agree.
I was always very shy about design systems and especially towards Bootstrap. It looks like bootstrap. When you want to built a completely new website or app, it’s of no use except for some utility classes or responsive grid system (which is less and less useful now we have a large support for grid).
Nevertheless, I had one lightning strike falling down on me with inuitcss from Harry Roberts.
A grid system (maybe not relevant anymore), a few components without real design aspects, just the basics, but a solid, consistent base. And fully customisable.
You still have a lot to do once it’s set up, but you just build upon it, you don’t have to override anything like with other systems.
Looks like I’m advertising for it, sorry.
Before we address the who, maybe it’s important to address the “why.”
Aside from the static use case of branding (fonts, colors, correct application) and styling common HTML elements, design systems offer repositories for application UI components.
Most web app UI components / custom elements exist because there is no “native” version of the thing they need. They replace the native thing with a complex HTML/CSS/JS structure and/or hide the real native element, adding more DOM nodes in order to accomplish things like a table with sortable headers, or fancy dropdown selects.
But what’s weird is that it seems like every library reimplements the same things over and over in their own unique flavour. There are some very common, easily identifiable web app UI use cases.
When you look at native OS UI libraries – for instance, Xcode’s Interface Builder – a lot of these use cases are covered.
I’m starting to wonder – without removing the transparency and accessibility of the Web, if it isn’t more efficient to propose a new HTML UI elements that cover these use cases, and that can be just as styleable as Bootstrap / jQuery / your-framework-here?
Bootstrap used to be “Twitter Bootstrap” which was a lot like the alternatives… an internal tool made public. It now is part of GitHub backed by Mircrosoft which I believe gives Bootstrap the ecosystem to unify the web to a common way of doing things. Instead of creating new systems and libraries, why not work together to improve Bootstrap and make it better?
Internal design systems made public often get neglected over time or sunsetted.
Open source projects not backed by large corporations often lose funding and motive to continue the work.
An open source project backed by a large corporation with the distribution of the development community…. should be embraced and improved.
Don’t bash Bootstrap for what it is now. Think of what it could be in the future!
If you’re really into design systems and want to join a Slack workspace that’s all about design systems, check out https://design-systems.slack.com/ ^_^
Huge fan of Foundation by zurb. Gives you the best tools to create and customize. You can also only include what you need. https://foundation.zurb.com/sites/docs/
Cheers Chris keeping me up to date with all things fancy and new online :)