Indonesia Article: Design System 101: Tutorial bagaimana memulai dan membuat Design System
Design System, as discussed before in our latest article, can be said Design system is a documentation of assets and components in our Product Design. The reason for the documentation is that we need to use it regularly as a team.
Also Read: What is design systems?
So how to make it? maybe this post will help you to create it. Because UI Designers, UX Design, or event Product Designers always wonder how to start and how to make it.
The reason why we Design System?
the need to have this kind of documentation will help you when you already have a team to create the product you design. If you don’t have this design system you will face inconsistencies in some of the designs.
So how to start it?
User Interface Audit
Look at your previous design and find the component you use. Find the similarity between them and also how many times you use that kind of component. You can also give the highlight or even mark them for easy finding to the next step you will use for creating a design system.
The component you looking for is like the button you use or the type of card. Because that kind of component often uses in our design. If you don’t have the design system you will find inconsistencies between them such as the width or even height or maybe even the type of font for the label.
Arrangement of asset and component
After you highlight and mark the component you always use now arrange them. Arrange them according to the brand identity of your product. This step will sure to keep your components in the same unity such as color, typography, or even shape.
Also Read: First Step into Product Management Field
if you don’t know about it you can ask your graphic designer to help you with the brand identity of your product.
Documentation
The main reason of design a system is to create a document of your component. So after you arrange them now time to group them how we use them. This step will help your team to find the right component to use when designing a new user interface.
Giving them Guideline
Your documentation of the design system surely will have many components which have similarities. Like buttons that have three colors, or even a card which have different sizes. Now it’s time to put a guideline on how to use them and how to not use them. These steps will make your team understand which component to use when designing a new screen.
Creating a guideline in your design systems will keep the design unity and make them consistent from one to. So set proper guidelines in your documentation and tell your team its must to use by the rule.
Teamwork and unity
After you finish with other steps now it’s time for your teams to use it. Not just for UI/UX Designer but for Developer as well. Why? because we need our design can be implemented by the developer in as same as we design in our programs.
If these kinds of steps are not followed, what is use the design system we start? and also creating the design system to make them work with ease and not create something from scratch again.
Keep in Touch when Change Occur.
As we know in design work, there are will keep evolving, so as well design system we use. So we must be ready to keep improving the component we had.
A common mistake in a design system is when we have a component we rarely use or just use in one scenario. We need the component in the documentation to be flexible. As for it, we can follow the tips by Alla Kholmatova. She said in creating a guideline/rule in a component we need to follow two rules.
a. Strict Rule: when introducing the new components, we still need to keep proper guidelines, patterns, or even design guidelines we had.
b. Loose Rule: When we want to change or add some components we need to come out with a strong reason. Maybe the new component can improve the user interface or user experience.
When we added a new component to our documentation, we must inform our team as well, so they keep up to date with the documentation. Many companies sometime use third parties or create by themself.
Creating a design system is one of the first steps when we start working as a team in a company or start-up. Having them will make your work more ease for one another and also help the new recruiter to catch up with you in designing your product.
