Atomic design

552 views

Published on

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
552
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Atomic design

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

×