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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Going to the Next Level With Design Systems

Welcome to the sixth and final lesson of this course. In the previous lesson, you learned about the three fundamental elements you need to include in your visual design system: color, spacing, and typography.

Obviously, you don’t need to stop here. You can add as many things as you deem necessary to perfect the system. Here are a few ideas to get you going and help you create more complex graphic design systems.

Related Links

3.3 Going to the Next Level With Design Systems

Welcome to the sixth and final lesson of this course. Now, in the previous lesson you learned the first three elements you should always include in your design system, color, spacing and typography. Now, obviously you don't have to stop here, you can add as many elements to the system as you deem necessary. Here are a few ideas to get you going. Icons represent an important aspect of design. And depending on the type of project you're building, you're gonna have a different number of icons, a different style of icons. For example, if you're building an admin interface, you're probably gonna have a lot of icons. If you're building a simple presentation website, you're going to have very few. Regardless of their number, what's important is that you document their style, their size, and in which context they're being used. You can also consider possible animations you'll be adding to your icons. For example, material design has a dedicated section for the various transitions that can be applied to icons. If you plan on using these in your project, you need to document them. It's also important to list any resources here. For example, if you're using an icon set, then you need to document that. Because, in the future, if you wanna add more icons, you should be using elements from the same set. Not a different one, that's to maintain consistency If you're planning on using animations or transitions, in your projects, for example, a transition on button hover. Then you need to document this so developers will know what animations or transitions to use in order to keep everything consistent. If you're gonna use shadows, it's also important to document them, again, just to keep things consistent in the long run. It's also a good idea to tokenize them, to create design tokens for them. So that developers will have a much easier time working with these. Grid systems are a must-have nowadays, so it's imperative that you document the one or the ones that you're using. And by grid system, I don't necessarily mean the eight points system I talked about previously. But although that's also good to document. But I'm talking about the vertical columns or horizontal rows that you're using to create layouts. If you've ever used Bootstrap or Foundation, then you know what I'm talking about. Response in break points are also very important. Today, you cannot build a web product that's not responsive, right? So get these set up right from the start and you'll have a much easier time working from that point on. If you're looking for a great guide on setting responsive break points, I recommend this article by David Gilbertson. And the list can go on and on, have a look at the examples that I showed you and see how their built, right? These are built by huge companies, so they have teams of people working on this stuff, we have a lot to learn from it. Now, here are a few key takeaways from this course. Number one, a design system is never complete, right? You'll always be adding to it, you'll always be perfecting it. And the truth is, a design system will evolve together with the product. Number two, you can always build a design system. It doesn't matter if you're a huge company or if you're an individual, a freelancer, just starting out. You can always do that and it's gonna help you tremendously. And finally number three, a design system is not just a style guide or a pattern library, or a sketch file, it's all those things and more. It has all of those things and principles and guidelines and values and so on and so forth. Right, so don't just think that if you created this sketch file or figma file. And you design some components then, hey, you have a design system. No, you need to write the appropriate documentation for how to use those components in what context, what are the best practices to do that? And with that said, I hope you found this course useful. And that it'll give you a little bit more insight into what design systems are all about and what are the steps you need to take to create one. I would like to thank you very much for watching this course. I'm Adi Purdila and until next time, take care.

Back to the top