From Template to Atoms
Traditionally atomic design concept has become a cornerstone for creating robust and consistent design system. Start designing with the smallest element and then focus on crafting the composite building blocks.
Atomic Design: Building from the Ground Up
Atomic design takes inspiration from the building blocks of the physical world — atoms and molecules — and applies this concept to digital design. The central idea is to start small and progressively build more complex elements, mirroring the way atoms combine to form molecules, which in turn create larger structures.
- Starting Point: The initial stage of Atomic design begins with the smallest design elements, such as buttons, labels, form inputs, and error messages. These are the atomic units of design that serve as the foundation for the entire system.
- Composition: In Atomic design, designers combine atoms to create molecules, which are then used to construct organisms like page elements, search panels, or entire forms.
- Hierarchy: This hierarchy ensures consistency, scalability, and ease of maintenance, all while adhering to the core principles established at the atomic level.
The UI Screen Creation Process: From Outline to Details
In contrast to Atomic design, the process of creating UI screens often resembles the work of a painter drawing a portrait. While both Atomic design and UI screen creation aim for cohesive and visually pleasing results, the approach differs significantly.
- Initial Outline: The first step in UI screen creation is to draw the initial outline. Designers focus on defining the overall form and layout of the screen. This includes decisions on placement, alignment, and proportions, much like a painter mapping out the fundamental lines and shapes of a portrait.
- Detailed Elements: Once the outline is established, designers shift their attention to the specific elements that make up the screen, just as an artist moves from the initial sketch to the fine details of eyes, lips, and nose. In UI design, this phase involves creating and refining individual components like buttons, form elements, a navigation panel, icons and images, ensuring they harmonise within the overarching framework.
- Harmonization: As the UI screen takes shape, designers work to harmonise all the elements within it, creating a cohesive and visually appealing user interface. This phase can be likened to an artist blending colors and textures to achieve a unified and captivating composition.
So, while working on UI design project start from pages and then move down to atoms. This is similar to how a painter would start drawing a portrait, create an outline and then work on the details.
If you like this article and want to get connected just drop me a note on on Linkedin
