UX/Design/Atomic

• Atomic Design

  • A methodology from Person/Brad Frost for building interface design systems as a hierarchy of five stages[1].

  • Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.[1]
    

  • The five stages

    • UX/Design/Atomic/L1 - Atom
    • UX/Design/Atomic/L2 - Molecule
    • UX/Design/Atomic/L3 - Organism
    • UX/Design/Atomic/L4 - Template
    • UX/Design/Atomic/L5 - Page

  • A mental model, not a sequence

    • Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.[1]
      

  • Used in this garden

    • Logseq/Entity/UI/Area and Logseq/Entity/UI/Control map the parts of hardware and software interfaces into pages.

  • [1] https://atomicdesign.bradfrost.com/chapter-2/