Description
When we are creating a prototype for a project we start by creating the wireframe to layout everything quickly we want to have on our website, but what's the next step? You would probably think that it is time for the hi-fi prototype but there is one step in between which is called style guide. But what actually is a style guide? It is a place were we create all of the components that we want to use in our hi-fi prototype based on previously created wireframe and moodboard, colors, fonts, buttons, text fields, logos and whatever we want. Because we have everything connected we also posses more control over everything in our prototype so if there will be a need to change that one color that we used one every button in our prototype instead of doing it manually we can just go back to our style guide and if everything is connected properly we can just change color there.
You probably wonder what is the difference between style guide and design system? Well first off you would probably create a design system for much much larger projects so think of it as this huge bubble that contains Design principles, patterns and design rules that whole company uses, and inside of this bubble is another bubble where we have style guide which contains typography, icons, grid, colors etc. You can also create another bubble called Pattern library/Component library which can contain buttons, navigation and other components if you want to organize your design system better. To keep things simple in this guide we will only focus on style guide where you can also create components like buttons, navigation etc. especially if we are not making a project of that huge scope.