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/

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…”

6. http://fixitordeal.files.wordpress.com/2010/10/sad-black-kitten-in-hell.jpg

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.

9. http://bradfrostweb.com/blog/post/atomic-web-design/

11. ATOMS

12. ATOMS
Atoms are the basic building blocks

14. MOLECULES

15. MOLECULES
Molecules are groups of atoms bonded together

18. Iterate, iterate, iterate

20. ORGANISMS

21. ORGANISMS
Combine molecules together to form organisms

25. Iterate, iterate, ITERATE!

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?

44. Page title
Input
Error
Buttons
Toggle
Nav bar

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