- **Epistemic status:** #budding Atomic design is a technique for creating [[Design Language System]] requiring you to label and organize every component by five distinct categories: ## Methodology ![[atom-structure.png]] Photo taken from [Building Design Systems with Atomic Design](https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676) (2021)otter.png ### Atoms Atoms are the basic building blocks of your user interface. These elements cannot be divided into smaller parts without losing their use. They are reference elements. A few elements that apply in this category are: - Text - Buttons - Inputs - Labels - Checkboxes - Icons - Color Palettes - Animations - Etc ### Molecules Molecules are groups of atoms, making them the smallest fundamental unit of a compound, becoming the basic building blocks of your [[Design Language System]]. They aren't incredibly useful by themselves, but can be put anywhere on the page. A few elements that apply to this category are: - Notification Toasts - Input fields with buttons - Chips - Dialogs - Etc ### Organisms Organisms are groups of molecules that are functional without relying on anything else on the page. They are complex in nature, making them distinct in a user interface. Clients will be able to start seeing the final interface facilitating communication. A few elements that apply to this category are: - Navigation bars - Search Forms - List of social media channels - Forms - Tables - Etc ### Templates Templates are a collection of organisms to form pages that start showing our final output. Commonly these are Wireframes that can be reused to produce pages. Overtime, they can become high fidelity designs. ![[wireframes.jpg]] ### Pages Pages are instances or children of templates and their content is replaced by real content, giving a real depiction of what users will actually see. These designs are the highest fidelity and where you will spend most of your time reviewing with the client. It is quite normal to go back and change atoms, molecules, organism, and templates to account for the requested changes. Pages can provide an avenue of showcasing variations of the template to help establish a robust and reliant [[Design Language System]], for example: - One card's headline might be 10 characters long, while another might be 30 characters long. - A user with administrative privileges might see extra screens or buttons compared to users without those privileges. - One user might have 1 item on their shopping card and another has 10. ![[otter.png]] ## Advantages - **Quickly shift between abstraction and concrete:** Easily see interfaces broken down into their atomic elements and how when combined form the final experience. The process is not linear because you can then compare how the parts fit the whole of the UI. When building a system with Atomic Design don't think that each category goes by step such as “Step 1: atoms; Step 2: molecules; Step 3: organisms; Step 4: templates; Step 5: pages.”. Instead, think of the categories as a mental modal to concurrently create the final UI. - **Clear separation between content and structure:** A well crafted [[Design Language System]] has harmony between the content and the structure by both being aware of how they are going to be presented. With atomic design, it gives a clear [[Ubiquitous Language]] to communicate UI structures and a clear separation between templates and pages. - **Clear naming conventions:** The hierarchy of the different components can be deduced easily by the names alone, reducing confusion when establishing naming conventions. If a taxonomy that follows the same hierarchy structure works for your team, then you can still reap the benefits. - **Improved collaboration:** The clear structure creating an [[Ubiquitous Language]] makes it easier to educate stakeholders, colleagues, and even third parties on how the [[Design Language System]] operates using helpful documentation. This, in turn, will allow teams to modify, extend and improve the system over time with less friction. The end result is a system that promotes a consistent experience no matter the device or browser. --- ## References - “Atomic Design | Brad Frost.” Accessed October 13, 2021. <https://bradfrost.com/blog/post/atomic-web-design/>. - “Atomic Design by Brad Frost.” Accessed October 13, 2021. <http://atomicdesign.bradfrost.com/>. - Brad Frost. “Brad Frost Web.” Accessed October 13, 2021. <https://bradfrost.com>. - Syvets, Igor. “Building Design Systems with Atomic Design.” Medium, March 26, 2018. <https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676>.