• Like
Atomic design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Atomic design

  • 410 views
Published

Atomic Design: Creating systems to promote consistency and scalability. …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
410
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
6
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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