Your SlideShare is downloading. ×
Atomic design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Atomic design

172
views

Published on

Atomic Design overview

Atomic Design overview

Published in: Internet

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
172
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
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. 07.20.14 ATOMIC DESIGN Our past; Design’s future
  • 2. AGENDA What is Atomic Design? Why should I care?
  • 3. AGENDA What is Atomic Design? Why should I care?
  • 4. DESIGNER BUZZ WORDS
  • 5. ATOMIC DESIGN
  • 6. @brad_frost
  • 7. ATOMIC DESIGN
  • 8. ATOMS
  • 9. MOLECULES
  • 10. ORGANISMS
  • 11. TEMPLATES
  • 12. PAGES
  • 13. ATOMIC DESIGN
  • 14. ATOMS
  • 15. ATOMS
  • 16. ATOMS -Building blocks of matter -Rarely used by themselves -Simple
  • 17. ATOMS -Building blocks of design -Rarely used by themselves -Simple
  • 18. LABELS
  • 19. INPUT
  • 20. BUTTON
  • 21. MOLECULES
  • 22. MOLECULES -Atoms bounded together -Groups of elements functioning as a unit -Functions in only one way
  • 23. ENTER PHRASE HERE SEARCH SEARCH SITE
  • 24. ORGANISMS
  • 25. ORGANISMS -Grouping of molecules (and atoms) -Form a distinct interface -Encourages standalone, reusable components
  • 26. Home AboutBlog Contact
  • 27. TEMPLATES
  • 28. TEMPLATES -Composed of organism (and smaller entities) -Form a distinct interface -Encourages standalone, reusable components
  • 29. Home AboutBlog Contact
  • 30. PAGES
  • 31. PAGES -Specific instances of a template -Accurate depiction of the final product
  • 32. Home AboutBlog Contact Cras mattis consectetur purus sit amet fermentum.Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas egetridiculus Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
  • 33. THIS SHOULD FEEL FAMILIAR
  • 34. OBJECT-ORIENTED PROGRAMMING
  • 35. MODULAR-ABSTRACT
 STRUCTURED PROGRAMMING
  • 36. OOP -Modular, reusable systems -Easy maintenance -Decoupling data
  • 37. VARIABLES
  • 38. FUNCTIONS
  • 39. CLASSES
  • 40. LIBRARY
  • 41. PROGRAM
  • 42. ATOMIC DESIGN O-O DESIGN==
  • 43. AGENDA What is Atomic Design? Why should I care?
  • 44. PREVENT FEEDBACK LOOPS
  • 45. Comps
  • 46. You should be here.
  • 47. https://github.com/sparkbox/style-prototype
  • 48. ENCOURAGE REUSABILITY
  • 49. REUSABILITY -Quicker development time -Easily prototype -Cleaner, modular code
  • 50. _text.scss _body.scss _call-out.scss _colors.scss _detail.css
  • 51. _heading.erb _paragraph.erb _header.erb _logo.erb view.erb
  • 52. Home AboutBlog Contact
  • 53. RAISE EMPATHY
  • 54. EMPATHY -Forces you to work alongside other practices -Promotes “group-think” -Helps create co-ownership of the entire product
  • 55. AGENDA What is Atomic Design? Why should I care?
  • 56. ATOMIC DESIGN
  • 57. REASONS TO CARE -Helps prevent feedback loops -Testable and clean -Raises empathy
  • 58. THANK YOU.