UI Recreation
Atomic Design
Learning Outcomes
Atomic Design Principles
Introduction
This design task focused on improving my skills as a UI designer while deepening my understanding of design systems, specifically the principles of atomic design as outlined by Brad Frost. By deconstructing existing app interfaces, I gained hands-on experience in identifying reusable components and their hierarchical relationships within a design system.
Process
To start, I conducted a UI audit by analysing screenshots of three app screens. I examined the text styles and visual elements, deconstructing the screens into atoms—the smallest building blocks such as icons, buttons, and CTAs. Next, I combined these atoms into molecules, such as tab navigation bars and list items, and subsequently built organisms, like complete navigation bars and item lists. These organisms were then assembled into full pages, including dashboards and inventory list views.
This step-by-step deconstruction allowed me to identify the structure and relationships of components within the app, aligning them to atomic design principles and creating reusable component sets across all layers.
Reflection and Outcomes
This exercise provided a practical understanding of atomic design, reinforced by the simplicity of the app's commonly used components like lists, interactive cards, and tab navigation. Recognising how these elements are layered made it easier to see the thought process behind atomic design systems, which can be applied across various applications.
Looking ahead, I aim to apply this approach to more complex apps with nuanced components. Additionally, I plan to explore the use of design tokens to enhance styling consistency and scalability, further refining my ability to build cohesive and flexible design systems.
