2.1 What Is a Design System?
Welcome to the first lesson of this course. Let’s start with the most important question: what is a design system? We'll look at the main components of visual design systems and what they're used for, and then we'll look at some real-world design system examples.
1.Introduction1 lesson, 01:50
2.Design Systems3 lessons, 17:21
3.Creating Design Systems3 lessons, 21:06
2.1 What Is a Design System?
Welcome to the first lesson of this course. Let's talk about what a design system is all about. And at first glance, you might say that it's all it's about design, right? Well, not true. A design system is a tool. We can think of it as a collection of reusable components that are guided by a set of standards. You can then use this collection to build any number of applications. Now, because this collection is guided by standards, designers and developers will have a much easier time building your products. First, designers don't have to guess every time, when they need to design a new component or a new page, they can just reference that system. Developers don't have to build components from scratch every single time. So essentially, you're not reinventing the wheel with every new product. And this is fantastic because, one, you save a bunch of time and two, your team gets to collaborate even more, right? So designers, developers, other people involved In that project, get to reference this centralized map of components, of ideas, of guidelines. And not only that, they also collaborate to maintain it and to update it. Not to mention, by using a design system you get consistency, and that's something that brands require dearly. When you're working off of a design system and you maintain the standards, you make sure that any new products you're developing are in line with the brand's identity. To give you an example, imagine that you or your team built a website like two years ago, and now you have to add some extra pages to that website. Well, if you created a design system for that project, and you documented everything, well, creating these pages is really a piece of cake for book designers and developers. You simply follow the guidelines and you create the new pages. But if you didn't have a design system in place, you would have to reference this to your old website and try an figure things out all over again. That's time consuming, it's prone to errors, and it's inconsistent really, so not a very good idea. From this we can draw the conclusion that a system makes design reusable. Because of that we can scale projects, whereas without a system in place, we are basically creating bespoke design which is inconsistent and hard to maintain. Now is a design system equal to a pattern library, or a sketch file, or a style guide? The answer is no. A design system is all of that stuff and more. Here's a quote that I think explains this very well, it's by Emmet Connolly, the Director of Product Design at Intercom. So 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. So, a design system is a collection of assets and, a set of standards and documentation that accompanies that collection. As the quote said, "A pattern library is just a box of Lego pieces in order to make it into a system." You need to add instructions, standards and best practices. The style guide or pattern library, those are just deliverables. And since we're on the topic of these two concepts, let's go ahead and define them to avoid any future confusion. A pattern library is a collection of components and guidelines for using them. A style guide is a set of guidelines for the graphic styles, typefaces, colours, images and so on. Now to give you an example of what I'm all about, I'm going to show you the Polaris design system, which is for Shopify. They're displaying their pattern library under components, right? So if we go here, we're going to find a list of components ranging from cards, frames, layout pages, top bars, forms. So you can see all of these components here, and these are part of the pattern library, images and icons, and the list goes on and on. A style guide can be found here under design, where we find information about colors, typography, illustrations, icons, and so on. And so, they're split into categories. But as you can see, the Shopify design system is not just pattern libraries and style guides, they also have some patterns here, information about content, like the voice and tone, the naming, the vocabulary that's being used. And on each component you'll find examples of how to use these, accessibility information, best practices and guidelines all right? That's the difference between just the pattern library and a design system, okay? The design system comes with all these extra bits of information. Now, let's see some example design systems, these are created by large companies and are used even today. The first one, and I already mentioned this, is material design, right? This is made by Google. And it's a way to unify their product line across platforms. So we're talking web, and we're talking Android. They design basically a visual language that ties all of these together. And just like any other design system we have the style guide, this is under design, you'll find information right here about typography colors. Then we have the components or the pattern library. And they go into extensive detail on every component, how do you use it, what are the best practices, and so on. Of course they list some third party resources as well. So this is yet another thing that you could include in a design system. Polaris, I showed you this previously, this is for Shopify. IBM has a design language. Here, you can see they split it up in three parts philosophy, gallery and elements. And you can find various bits of information about the colors and typography right here. Zendesk also has a design system called Garden, this is a bit simpler than the other ones, but it is a design system. Here, Gordon divides their system into assets, CSS components, react components and react containers. We also have a design system from Salesforce, this is called Lightning, and it's probably one of the most complete design systems that I've seen. As I mentioned, Adobe also has a design system, it's called Spectrum. And here you can find all the information you would expect like components, patterns, guidelines for the content, and so on and so forth. And Atlassian also has a design system, you can find information about it right here under atlassian.design. All right, so I hope you got a better understanding of what is a design system after this lesson and after seeing these examples, we'll go more into this in the next couple of lessons. But for now let's focus on the structure of a design system, that's coming up in the next lesson.