What is a Design System? 6 Different Types of Design Systems

There are lots of different definitions of design systems out there. Is it a problem that we don't have one definition that we as an industry can standardize on? Well, let's get into it. What is a design system? You've probably heard lots about it. You may have worked on one, but you still might not even know what one is. So let's talk about the definitions of the design system. Let's lets check out what a bunch of design system books have to say about what a design system even is. Here is Alla Kolmatova's Design Systems. In this book, Olokolmatova says a design system is a set of connected patterns and shared practices coherently organized to serve the purposes of a digital product. In Laying the Foundations by Andrew Caldwell, Andrew says design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. This is the Design Systems Handbook by the Design better crew at InVision. In this book, Marco Suarez says a design system is a collection of reusable components guided by clear standards that can be assembled together to build any number of applications. Developer Jeremy Keith says the components are the trees, the design system is the forest. Front end designer Brad Frost says a design system is the official story of how your organization designs and builds digital interfaces. Haley Hughes, design director of Nike's Design System, says a design system is any set of decisions governed across an organization. Design system consultant Nathan Curtis says a design system offers a library of visual style components and other concerns documented and released by an individual team or community as code and design tools so that adopting products can be more efficient and cohesive. There are lots of different definitions of design systems out there. Why do you think that is? I think it's because there's a lot of different definitions of the word design and of the word system, and both of them are very broad. My favorite definition of design comes from Jared Spool, and he says design is the rendering of intent. My favorite definition of systems comes from this book, Thinking in Systems by Donella Meadows. In this book, Donella Meadows says a system is a set of things, people, cells, molecules or whatever, interconnected in such a way that they produce their own pattern of behavior over time. So if we put those two things together, it really says a design system is an intentional set of connected things that create repeated behavior. I mean, that could apply to almost anything. And that's a good thing. There are six kinds of things that we often call a design system. Let's go through each of the six and talk about them in detail. One kind of design system is a design system as a brand identity or a design language. This is probably the oldest and most common version of what people in general know as a design system. This has been around from the beginning of when graphic design emerged as an industry. Design languages refer to all of the different visual elements that will make up a brand or a particular user interface design. That could be the colors, the typography, the spacing, the layout, all of the different visual components that then combine so that something is recognizable to you as part of that brain. Let's take a look at some examples of some design languages. Here's the design language for the National Park Service collected in this great book by standards manual called Fittingly Parks. As we flip through these, we see a lot of historical record of some of the old brochures and all the different marketing collateral and print material that describe the parks and the national service. As we look through all of the different versions of this, we see lots of things that are similar, things that are connected, the same typefaces, very similar layouts. It's really easy to understand how this is all part of the same family of visual elements. That way when you see one or more, and more importantly, when you see more of these, you realize that they're a system and they are a family of related elements that make you feel like you're reading something from the National Park Service. As the design language evolves, you actually need less and less of it to communicate a particular brand. One of the most powerful versions of this is actually what Nike does with their design language. Sometimes when you just see Futura Extra Bold condense on a T shirt, you know it's a Nike shirt without even having the symbol or a color palette or anything like that just to associate with. Beware though, this can be really dangerous. Sometimes just relying on a typeface or a particular color can start to mix with brands. As you see here with the Absolute Identity, they also use Futura Extra Bold. Condensed context plays a lot into a design language. And so depending on the photography or the art direction that's paired with it, the design language is very strong and can stand on its own. The next kind of design system is a design system as a tool, and this becomes much more common when we talk about digital products. A great example of a design system as a tool is a UI kit. We see these a lot when we talk about software applications like Figma or Sketch, where we have these libraries of visual components. That we can drag and drop into other interfaces to make it easier to design those interfaces all at once. Websites like design systemsforfigma.com will show us a gallery of different UI kits that different teams have used and open source so you get a sense of how these libraries are connected with symbols and components that can be reassembled. A component library is another great example of a design system as a tool. Just like we have UI kits in design programs like Figma and Sketch, component libraries are sort of the code equivalent to that. So in the same way that you can drag and drop some components into an art board and a design tool with a component library, you can use shorthand snippets of code to reference other code that lives elsewhere. Component libraries are popular in frameworks like React Angular Vue, where you can use a set of code to reference another set of code in a systematic way. Another type of design system is a design system as a product. And that's the one that I like to talk about most when it comes to design systems that big organizations can use to to be more efficient and more consistent and more of a relief at scale. This is my preferred definition of a design system, which is a connected package, managed version, control software product that contains the smallest set of components and guidelines an organization needs to make digital products consistently, efficiently and happily. A lot of the popular design systems that we reference nowadays are this kind of design system, a design system as a product. These are ones like Material Design, the Lightning design system, Shopify's Polaris and others like them. Now, what makes this kind of design system a product is that they have dedicated teams that are focused on building those out day to day and week to week. They have a backlog, they have budgets devoted to them so that they can be sustained like any good product. Think of the way a startup works and makes a product. There's usually a team that is dedicated. They have a product manager, they have a backlog, they have things they have to work on. They release things very frequently to their users and to their customers. Those customers give them feedback on how that product needs to grow, what features are working for them and not working for them, and and a good design system as a product at an organization follows suit. So a design system as a product is something that needs to grow organically with the needs of the organization it serves. The next type of design system is a design system as a process. A company's design system could simply be the way that we build digital products here that could just outline all of the Steps. First we do this, then we do this, then we do this, then we do this. And that could be a way that that organization scales to be more consistent. If everyone's working in the same process, maybe that makes all the output more consistent than if everybody was just doing their own thing. This is why a big topic in design systems is actually governance. Because governance is supposed to lay out who does what and when they do that. So process and workflow is a really big part of how design systems need to live within an organization. Process could be all a design system is. There could be no components or anything like that. But just saying this is how we work could be a really effective design system for an organization. The next type of design system is a design system as a service. At lots of different companies. A design system team is its own entity. And the way that other product teams or feature teams interact with that entity is they almost use them like a service, like an internal agency, or like a system staff augmentation team, where as they need something that the design system team knows is something that scales across the organization. A product team or a feature team will essentially place orders with that design system team and then receive back components or suggestions or workflow tips on how they can actually make that. So in that way, a design system can actually be a service to the rest of the organization, and that can be really successful. The last type of design system is a design design system. As a practice, this is probably the most mature stage for a design system to be at an organization. And it's essentially the idea that things happen over and over again that could be repeated use of the same components and patterns that could incorporate process, that can incorporate design system as a service. It could incorporate all of the different ways that design systems can manifest within an organizations. But essentially you're doing that thing over and over again. And the more you do it over and over again, the more efficient your organization becomes and the more consistent your organization becomes over time. So as design systems become a practice in an organization, those are the things that evolve the organization to be able to scale better. Okay, so we just talked about lots of different definitions of what a design system is or could be. Is it a problem that we don't have one definition that we as an industry can standardize on? I say it's a great thing that we don't have one definition that we could standardize on. Although it's not a problem, it can be problematic at times. Generally when you're working with a team, you want to agree and actually have some standard definitions and vocabulary for the things that you're working on. Otherwise, it gets to be really complicated in how you're working with team members. And in fact, one of the promises of a good design system is that it creates shared vocabulary among teams that might not have that shared vocabulary otherwise. So think of designers and engineers calling a component different things because it's called different things in their workflow. And then a process, a good design system will actually allow them to align on a definition of something. So while there are different kinds of design systems, it is useful for you to say to your design team or your engineering team or your product team. When we work on a design system, this is the version that we're talking about. It could be any of the versions that we discussed. But it is important that your team picks one or picks a set of them or a combination of them. So you all know what each other is talking about. And as you're working toward a common goal, not having one standard definition of design systems allows us to be more inclusive of where any team is in their design system journey. If you just have a UI kit, that's okay. You're working toward a larger and more mature design system. If you have a full design system practice that is mature, that's okay too. You're probably still working on that. The idea is that a design system is never complete. Continue to work on it. I'm reminded of the common idea that none of us will actually achieve perfection. But the pursuit of the material design team has been working on that design system for many years and they still have a lot to work on. The Lightning design system team has been working on that for many years and they still have a lot to work on. And that's not a bad thing. All digital. So hopefully this video gives you a better understanding of all the different types that are out there and how you can move and progress to become more mature in your design system. Practice at your organization so that you can do better work with your colleagues.