Why (and how) to create your first design system

Alright, let's see if I can do all of this in one take. Probably not. Here's something that's going to 10x your design speed, eliminate 80% of your design decisions, and just give your design some really nice symmetry and consistency. I'm talking about building a design system, and specifically I'm talking about building your design tokens before you start designing anything at all. And a design token is basically just things like your colors, your borders, your fonts, typography, shadows, spacing, all of these other atomic values that you use throughout your designs and that go into designing your websites. You can think of them as basically like standardizing your design decisions. The beauty of this whole concept is that it will turn all of your design decisions into reusable variables that you can just sprinkle throughout your design. And I talked about this more in my book as well, which if you want to learn web design you should go check that out as well but there are a couple benefits to building a design system first and then starting to design your products and i'm going to go over all of them right now first you can define your brand identity at least in terms of design very easily things like colors things like fonts and all these other things that we call design tokens all of these can be defined in terms of your brand identity very easily now every brand has their own unique set of colors and fonts and other things that make that brand unique. All these design elements that make each brand unique. And a lot of these things can be just defined as a simple CSS variable or a Figma variable. And you can just basically organize all of your design tokens in this way. And once you do that, and then you start designing something, what ends up happening is that whatever product you design after that, the design will naturally align with whatever brand you're designing for because you've already standardized all of the design tokens. Now obviously there's more to a brand than just the design tokens and the design elements that you standardize. There's also the personality of the brand that you give off, the language that you use and so many other things. And quite frankly most of those things are beyond the scope of this video but it's just you have to think about all of these things before you start designing something so that the design that you create will align itself to the brand that you're designing for the second benefit to creating a design system beforehand before starting to design something is that you can make design decisions a lot faster let's take a quick example with spacing for instance if you're trying to design a card component and you're trying to decide between 18 pixels margin on both sides or 20 pixel margin on both sides. It's a very tiny decision. It's a very pointless decision honestly and you should not be wasting time on tiny decisions like that. The same thing if you're trying to decide the width of this card component. If you're arguing between 540 pixel width and 560 pixels width for instance, there's not really much difference and since there's no much difference, we shouldn't be wasting time arguing about all these things. So if you have a good spacing system let's say then you can make all of these decisions almost I would say instantly as opposed to wasting time arguing between different values trying to decide one-off values and just picking values on the fly and creating an inconsistent system out of it. The same thing applies with colors you don't want to have to be picking colors on the fly or picking arbitrary shades of a color you want to define your shades up front so that you can just reuse them throughout your designs quickly and instantly And the third benefit to creating a design system before you start designing is that your designs will just have a symmetry, a consistency to them. Now this is hard to show because it's just such a subtle effect but you will notice it when you create a design using a design system and then you start to notice all of these tiny little details you see that the margins the spacing the colors everything just looks consistent everything looks well reused throughout the design now hopefully i've convinced you to try to build a design system and then use that before you start designing something designing a new product or new app or website or whatever you're working on but how exactly do you go about doing this and how exactly do you even create your first system because remember if we're trying to create a complete design system then we need to think about a bunch of things we need to think about colors we need to think about typography spacing borders shadows icons all sorts of these things and we need to even in all of these categories we have different subcategories like for instance with colors we need a couple of colors we need brand colors we need semantic colors we need grays we need other kinds of colors we need accent colors and each of the colors we pick we need to pick different shades for every color now for instance in my case i personally go for 8 to 12 shades usually about 12 shades per color that i pick for my project so that's a lot of shades and a lot of colors that we pick even in typography we have things like the font families that we use the font styles, the text size, the font size. And in spacing, we have things like margins, borders, padding, width, height, and all of these other things that go into spacing systems, basically. In borders, we have different border styles, sizes, shadows, we have shadows, different kinds of shadows, different inset, outset, different sizes of shadows, etc, etc. So we have a lot of things to cover if we want to create a complete design system. So there's a lot of things to cover. And how do we even go about doing this? First of all, an initial tip for designing any kind of a system. You want to look at values or situations where you feel like if you had a bunch of predefined values in advance in this situation, then this would be a lot faster to design. For instance, in spacing, if you had a good spacing system, you wouldn't need to worry about font sizes. You wouldn't need to worry about sizing different components, sizing your text, all of these things. If you had a good design tokens for colors, then you wouldn't need to waste time trying to pick different shades, trying to pick different colors for different situations. so try to find situations like these where you just know if you defined a bunch of values in advance then it would speed up your workflow a lot now you don't need to create a design token for literally every single thing right from the get-go but generally generally the more of these you create the better it is because the more design systems and design tokens you create beforehand the less you'll labor over low-level design decisions and the more and the faster you can create good-looking designs. So this isn't exactly like a binary yes I have a design system no I don have a design system it more like a spectrum and you want to be on the good side of that spectrum as much as you possibly can So on one side we have someone who doesn't use a design at all and just wings it, uses on the fly arbitrary values. And on the other side, we have a person who has a design system for literally everything under the sun, right? And we want to be on that side as much as possible, not entirely, but as much as possible. now some of the design tokens that we're going to talk about can work well with a linear system which if you don't know what a linear system is it's basically something like for instance let's say color color can work perfectly well with the linear system and all we really do with color is that we just pick a bunch of shades we pick a bunch of colors and we give them a bunch of shades now the thing with linear systems is that the let's say the difference between each value will be consistent. So each shade that you pick for a color will be equally different than all of the other shades as opposed to a exponential system which we usually use for things like typography and spacing where the increments between each value start to get larger and larger. They get exponentially larger over time. So if you for instance look at a spacing scale and I'll put some example scale on the screen so you know what I'm talking about but basically you start off with something like 4 pixels, 6 pixels, 8 pixels, 10 pixels and you have very small differences between each value but as you go higher and higher let's say 64 pixels, 128 pixels, 256 pixels you start to have a much larger increment between each value and this is just so you don't waste too much time laboring over let's say 540 or 560 pixel width as we talked about before in the video. So that's a ton of preliminary information that I just dumped your way but how exactly do we put all of this into practice and how do we create our first design system so that we can start designing more consistent products. There is a ton of detail that goes into creating a good design system and it would take me forever to cover all of it so we're not going to do that right now. I'll post some more videos on this topic and we can go into more detail on this topic and just learn everything there is to learn but for now I'm going to give you a beginner guide and this is exactly what I do in all of my projects before I start so you're in good hands. First you need to pick a bunch of colors for your design. Now what I use to pick colors is a site called coolers.co and I'll link it in this description but this is basically a website that is all about color and it's going to help you pick your colors. Now they have a palette generator that you can use to pick out some gorgeous colors for your design. So go ahead go over there pick your brand colors and also pick some semantic colors like red green or orange and these are basically colors that you can use to display things like alerts to display things like success messages info messages warnings errors those kinds of things. So you do want to have a bunch of semantic colors as well as brand colors. In the palette generator you will also find an option to pick a bunch of shades for your color. So coolers actually gives you a list of shades for every color that you pick and you can basically just grab 8 to 12 shades for every color that you pick. Now I usually go with about 12 but you can pick anywhere between 8 to 12 shades. Once you have your colors all picked you need to store them somewhere and this can be something as simple as a bunch of CSS variables variables in your front code base Or it can be a bunch of Figma variables in your Figma or any other design software that you use But whatever tool you're using you just need to grab all of these colors and these shades and then store them somewhere that you can reference and use. Next I'm going to pick some fonts for my website and I usually go with some open source fonts that I can find on Google fonts Now there is a ton of information that goes into picking good font families and identifying good typography. And it would take forever to explain all of this. But just to give you guys some tips to pick some good fonts. If I'm going for a formal or professional design, then I go with a nice serif font. Otherwise I stick to sans serif fonts. For headlines, you can also pick something like a display font. and display fonts are basically just fonts with some distinct striking features and these features are only really apparent at headline and large text. That's why they're used for headlines and large text but never use these on body text because those distinct and striking features will just hinder readability and make the body text hard to read. So for headlines you can use a display font otherwise just stick to a serif or sans serif fonts if you want to be neutral. So once you have your font families, define a sizing scale for them as well so you can easily scale your font size up and down as your need arises. Now here's an image of a perfectly good scaling system on the screen right now that you can use in all of your projects. Finally when all of this is done, just like we did with colors, we want to store these font and font families and font sizes in our Figma variables or CSS variables or wherever you're storing all of these so we can reference them and use them in our designs later on. Now finally for all other systems, I'm just going to take a shortcut and I'm just going to use Tailwind. Now Tailwind is a CSS framework, but it's much more than that. It's also a complete design system and they've built all of the different design tokens that we use in our projects and they've all done it for us beforehand. Now Tailwind is created by a bunch of really good designers and they've already done the hard work for us for designing all of the design tokens the different shadows and borders and everything else so if you are a complete beginner to this and you don't know how to create your complete design system then start with this start with tailwind pick your colors pick your font families pick a bunch of other things that you really want to customize and make unique to your brand let tailwind handle all of the other stuff obviously you can customize all of these things as much as you'd like but if you don't have a good sense of what you're doing if you're complete if you're a complete beginner to this then feel free to take this shortcut and just use tailwind and it will make your designs a lot better so to wrap all of that up we covered how to create a design system we covered why it's necessary important and necessary in creating our design systems and I'm gonna post a bunch more videos on this topic but for now I hope this beginner guide serves you well so that's all I had for today if you like this then like if you want to subscribe then subscribe if you want to work with me on a project or something or if you want to hire me or something then check out my website the link is in the description other than that yeah thanks for watching bye