Establish an internal design system (that is build on top of Fluent Design System) to fulfill the requirements of our team apps: Notepad, Paint, Snipping Tool, Windows Media Player, Sound Recorder, Calculator and Clock. This project mostly contains the componenents for Windows 11 Paint.
Using Atomic Design Methodology, we broke down our UI into its fundamental components, starting with the smallest elements like buttons and input fields (atoms). These atoms combined to form more complex structures, such as form fields and navigation bars (molecules). We then grouped these molecules into larger, reusable modules, such as headers and user profiles (organisms). Finally, we assembled these organisms to create comprehensive page layouts (templates) and polished them into fully functional user interfaces (pages). This method ensured consistency, modularity, and scalability throughout our design process, resulting in a cohesive and efficient UI.
Each component was meticulously documented with visual references, usage guidelines, and interaction details. We also provided code snippets and technical specifications to ensure accurate implementation. This comprehensive documentation facilitated efficient communication between designers and developers, ensuring consistency and clarity in the development process.
In this example, Windows 11 Paint was the first app utilized our Design System for their requirements. Functioning as two-way street, this Design System is a working document for Paint design team to contribute more scalable components for all Windows inbox apps.
