Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 The Structure of a Design System

In this lesson, you’ll learn about the structure of a visual design system. You’ll have a pretty good idea by now, having been shown a few examples in the previous lesson, but let’s get into the details of graphic design systems a bit more.

Related Links

2.2 The Structure of a Design System

Welcome to lesson number two where you'll learn about the structure of a design system. If probably for your doubt by now based on the examples that I showed you previously but, let's get into details a bit more. Before we do that I would just like to mention that design systems are still relatively new. So people are still trying to figure out the best way to create them. That's why when it comes to structure, your mileage may vary. You'll find that some systems do things in a specific way, while others do it differently. So take what I'm about to show you with a grain of salt, right? In the end, it's important that you create a system that helps you scale your product and maintain them properly. How you do that is up to you, but here are a couple of guidelines. We can divide the components of a design system in two parts, tangible and non tangible, actual and abstract. You can name these in different ways. The tangible parts are patterns, components, style guides, and so on. These are the actual elements you can use and reference. And they represent the largest percentage of a design system. The non-tangible or abstract parts are represented by shared beliefs, company values, working mentality, brand purpose, design principles and so on. Here's another way we can look at a design system. We have the pattern library, the style guide and the rules and guidelines. This works in the majority of cases or when you're a one man team and you don't necessarily have shared beliefs or company values. Although even as a freelancer you should think of yourself as a brand and have a mission and values, but that's another discussion. Some brands add their company philosophy in the mix like IBM does here. It's also common to list third party resources like icons, fonts, and other tools team members can use. A good example is Google Material Design, which lists all the helpful resources in a separate page. It can also include an FAQ page with the most common questions just like sales force is doing here. Now regardless of the structure, you must treat a design system as its own product, right? Which means it's gonna have different versions. You're gonna iterate it, you're going to have a backlog for it. You're gonna have a list of all the things that you wanna add to it. It's very important that you start using the design system right away, and not wait until it's perfect or complete. Because a design system is never gonna be complete, you're always gonna update it. But if you're gonna bring people onboard early, you'll have a lot of benefits because they'll get used to it, it's gonna be easier to update and maintain that design system. And you're gonna start seeing good results in a short amount of time. Not to mention, you're gonna see consistency and all of your projects. A great example of how you can do this is provided by the Polaris system. This offers a free sketch plug in called telescope that shows you all of the components and rules directly in the sketch document. So when you're designing the next product you can just reference that. Very, very helpful, so we've talked about design systems and their structure. Now, there are a couple of different types of systems that you need to be aware of and we'll discuss about those in the next lesson.

Back to the top