A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared library and visual consistency across different pages and platforms.
As a Junior UX Designer, I never had opportunity to work on design systems, so main goal was to create a consistent design system that could help and turn designs into reusable products.
The Challenge
I thought that creating design system from the zero would give me the better understanding of a process as a whole. I also believe this system can be used during creating other apps, websites etc, serving as a general template which I can reuse and adjust according to certain needs. Every time when new project was created, I needed to set up a new library component, thus design the same buttons and elements every time.
I wanted to gather some most usable things ad create the basic library of components I can use in future, in the same time to explore the design systems in general.
The Benefits
Centralized Reference: It serves as a single, centralized source to view all design components, patterns, and styles, fostering consistency across projects.
Scalable Redesigns: Facilitates the management and implementation of new changes for the same projects, allowing for efficient redesigns at scale through the design system.
Consistency in Design and Functionality: Ensures visual and functional consistency across various aspects of a project, leading to a cohesive and polished user experience.
Elimination of Inconsistency: Reduces the likelihood of inconsistencies in design and development by minimizing the need to reinvent the wheel for similar design elements.
Version Control and Updates: Facilitates version control and updates, ensuring that everyone is working with the latest design elements and reducing the risk of using outdated components (If we use this system for the project created by several people)
The Approach
I started with creating the color guide, using variables for better usability. I tried to adhere to the principle of atomic design, which meant that I need to create basic elements first, and then create bigger and more complicated elements.
The style guide consisted of:
• In-page annotations (how we document and layout each component within the library)
• Branding (colours, typography)
• Spacing guidelines
• Layout grids
• Icon pack
• Different types of elements like buttons, inputs etc.
Each component would have variants and each variant would be correctly named so that when it came to publishing the components it made it easy to understand the state changes and what you can turn off and on to get the desired component.
