Self Care App Design System
Building this design system helped me understand the nuances of interface design in depth. It was inspired by a real-world system I developed for a commercial project.
Category
Category
User Interface
Scope
Scope
Design System
Timeline
Timeline
2 Months
Tools
Tools
Figma
Following through with Atomic Design
Atomic design is a systematic approach to building design systems by breaking interfaces down into smaller, reusable components and progressively combining them into more complex structures. It ensures consistency, scalability, and efficiency by creating a clear hierarchy from basic elements to complete layouts.
Atoms
Basic building blocks like colors, typography, and simple UI elements that define the visual foundation.
Molecules
Combinations of atoms forming functional components, such as a search bar or input group.
Organisms
Larger, reusable sections made of molecules, like navigation bars or product cards.
Following through with Atomic Design
Atomic design is a systematic approach to building design systems by breaking interfaces down into smaller, reusable components and progressively combining them into more complex structures. It ensures consistency, scalability, and efficiency by creating a clear hierarchy from basic elements to complete layouts.
Atoms
Basic building blocks like colors, typography, and simple UI elements that define the visual foundation.
Molecules
Combinations of atoms forming functional components, such as a search bar or input group.
Organisms
Larger, reusable sections made of molecules, like navigation bars or product cards.
Buttons
Developed a scalable button and link system with defined hierarchies, sizes, and states to guide user actions clearly and maintain consistency across the interface. Made over 200+ Variants that followed through with rest of the design system.
Custom Icons
The custom icon set establishes a calm and consistent visual language, aligning with the rest of the theme while enabling quick recognition and effortless interaction.
Arrows and Directions
Arrows and Directions
User-Interface
User-Interface
Special Icons
Special Icons
Custom Icons
Atomic design is a systematic approach to building design systems by breaking interfaces down into smaller, reusable components and progressively combining them into more complex structures. It ensures consistency, scalability, and efficiency by creating a clear hierarchy from basic elements to complete layouts.
Arrows and Directions
User-Interface
Special Icons
Buttons
Atomic design is a systematic approach to building design systems by breaking interfaces down into smaller, reusable components and progressively combining them into more complex structures. It ensures consistency, scalability, and efficiency by creating a clear hierarchy from basic elements to complete layouts.
My Learning
This process taught me the importance of designing beyond individual screens, focusing instead on reusable systems that ensure consistency and long-term scalability.
My Learning
This process taught me the importance of designing beyond individual screens, focusing instead on reusable systems that ensure consistency and long-term scalability.