Atomic design

732 views
620 views

Published on

Atomic Design: Creating systems to promote consistency and scalability.

This was a presentation I gave at #FredDev on 2/11/14 and is based on the Atomic Design Principals from @brad_frost bradfrostweb.com/blog/post/atomic-web-design/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
732
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Atomic design

  1. 1. Atomic Design Bryan Wengren | @bwengren creating systems to promote consistency and scalability
  2. 2. Bryan Wengren Sr. Client-side developer UX Generalist “Unicorn” @bwengren
  3. 3. Atomic Design ❖ Core concepts ❖ Real-time application ❖ Is it right for my project/ company?
  4. 4. “I need a mock-up of…”
  5. 5. http://fixitordeal.files.wordpress.com/2010/10/sad-black-kitten-in-hell.jpg
  6. 6. “Atomic design provides a clear methodology for crafting design systems…” –Brad Frost http://bradfrostweb.com/blog/post/atomic-web-design/
  7. 7. Atoms combine to form elements, elements create molecules, molecules create organisms, and so on.
  8. 8. http://bradfrostweb.com/blog/post/atomic-web-design/
  9. 9. ATOMS
  10. 10. ATOMS Atoms are the basic building blocks
  11. 11. MOLECULES
  12. 12. MOLECULES Molecules are groups of atoms bonded together
  13. 13. Iterate, iterate, iterate
  14. 14. ORGANISMS
  15. 15. ORGANISMS Combine molecules together to form organisms
  16. 16. Iterate, iterate, ITERATE!
  17. 17. Which one is a contact us form?
  18. 18. TEMPLATES
  19. 19. TEMPLATES Templates consist mostly of groups of organisms stitched together to form pages
  20. 20. PAGES
  21. 21. PAGES Pages are specific instances of templates
  22. 22. FRAMEWORKS
  23. 23. Frameworks ❖ Look-alike issues! ❖ Potential for bloated/ unneeded mark-up! ❖ Compatibility issues with existing sites! ❖ Not always the lesser of two evils
  24. 24. DOES IT WORK?
  25. 25. Page title Input Error Buttons Toggle Nav bar
  26. 26. “I need a mock-up of…”
  27. 27. IS IT FOR ME?
  28. 28. 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.
  29. 29. “Atomic design promotes consistency and cohesive between teams.” - Luke Wroblewski http://www.lukew.com/ff/entry.asp?1809
  30. 30. Atomic Design #atomicdesign | @brad_frost | @lukew http://pattern-lab.info/about.html http://bradfrostweb.com/blog/post/atomic-web-design/
  31. 31. Bryan Wengren Sr. Client-side developer UX Generalist “Unicorn” @bwengren

×