Atomic design
2 likes1,389 views
The document discusses Atomic Design, a methodology for creating design systems that promote consistency and scalability in web development. It details the hierarchical structure of atoms, molecules, organisms, templates, and pages in design, emphasizing the iterative nature of the design process. Additionally, it highlights the potential challenges and considerations for implementing Atomic Design in various projects and infrastructure.
Atomic design
- 1. Atomic Design Bryan Wengren | @bwengren creating systems to promote consistency and scalability
- 2. Bryan Wengren Sr. Client-side developer UX Generalist “Unicorn” @bwengren
- 4. Atomic Design ❖ Core concepts ❖ Real-time application ❖ Is it right for my project/ company?
- 5. “I need a mock-up of…”
- 7. “Atomic design provides a clear methodology for crafting design systems…” –Brad Frost http://bradfrostweb.com/blog/post/atomic-web-design/
- 8. Atoms combine to form elements, elements create molecules, molecules create organisms, and so on.
- 11. ATOMS
- 12. ATOMS Atoms are the basic building blocks
- 14. MOLECULES
- 15. MOLECULES Molecules are groups of atoms bonded together
- 20. ORGANISMS
- 21. ORGANISMS Combine molecules together to form organisms
- 28. Which one is a contact us form?
- 29. TEMPLATES
- 30. TEMPLATES Templates consist mostly of groups of organisms stitched together to form pages
- 33. PAGES
- 34. PAGES Pages are specific instances of templates
- 37. FRAMEWORKS
- 39. Frameworks ❖ Look-alike issues! ❖ Potential for bloated/ unneeded mark-up! ❖ Compatibility issues with existing sites! ❖ Not always the lesser of two evils
- 41. DOES IT WORK?
- 46. “I need a mock-up of…”
- 49. IS IT FOR ME?
- 50. Is it for me? ❖ Atomic Design may not be for everyone or every situation. ! ❖ It has to make sense for the project, the infrastructure. ! ❖ It can be difficult to apply to legacy structure.
- 53. “Atomic design promotes consistency and cohesive between teams.” - Luke Wroblewski http://www.lukew.com/ff/entry.asp?1809
- 54. Atomic Design #atomicdesign | @brad_frost | @lukew http://pattern-lab.info/about.html http://bradfrostweb.com/blog/post/atomic-web-design/
- 55. Bryan Wengren Sr. Client-side developer UX Generalist “Unicorn” @bwengren