Introduction
Consistency in design is the main thing for designers, especially the design team at JDID in making a design, the design system plays a very important role in making it easier for designers to make design elements in JDID applications, both app/web, so that the designs made will always be consistent and in accordance with the guidelines and JDID's brand identity. A design system is more than a framework, UI toolkit or component library. A design system is an evolving ruleset governing the composition of a product. Knowing all those facts, made us think how might we Make UI toolkit or component library so make it easier for designer to design with precise & consistency
Atomic Design
At this stage of the system design process, I use the atomic design method to make it easier and map each design element in detail. The Atomic Design methodology created by Brad Frost is a design methodology for crafting robust design systems with an explicit order and hierarchy. As the name suggests, it’s derived from a basic chemistry concept; the composition of all matter.
Elements of Atomic Design
The levels of atomic design are as follows:
1. Subatomic particles
2. Atoms
3. Molecules
4. Organisms
5. Templates
4. Pages
1. Colour
Before I start designing shiny components, I need to lay the foundations for those components. I need to break the product down into its most bare-bones form. So in the early stages of this design, I created a color palette based on the JDID brand colors by creating primary, grayscale, main gradient and secondary colors.
2. Text
The next step is to classify the font type, which consists of:
1. Base Font (IOS & Android)
2. Special Font
3. Font Size Specification
3. Button
The button components are classified based on the following:
4. Element
5. Dialog
6. Tips & Toast
7. Navigation
8. Pop Up
9. Icon
10. Tag
11. Default Illustration
Lesson Learned
The immediate time and cost savings, improved product consistency, better team collaboration and powering accessibility, and long-term strategic efforts are some of the many reasons we building design systems. Knowing the elementary principles of modern design systems will help me grow as a designer.