Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI 開発をアジャイルに行うための Atomic Design

4,078 views

Published on

The slides describe how you can adopt Atomic Design to make your UI development agile.

Published in: Technology
  • Be the first to comment

UI 開発をアジャイルに行うための Atomic Design

  1. 1. 
 Atomic Design 2018.6.6 IT STAFFING
  2. 2. YUSUKE GOTO https://ygoto3.com/ @ygoto3_ 
 
 
 
 

  3. 3.
  4. 4. 
 

  5. 5. Plan Do Check Action
  6. 6. Plan Check Action Do
  7. 7. Plan Check Action Do
  8. 8. Do
  9. 9. Do
  10. 10. Do
  11. 11. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  12. 12. Pages Templates Organisms Molecules Atoms
  13. 13. Pages Templates Organisms Molecules Atoms
  14. 14. Pages Templates Organisms Molecules Atoms
  15. 15. Pages Templates Organisms Molecules Atoms
  16. 16. Pages Templates Organisms Molecules Atoms
  17. 17. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  18. 18. 
 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  19. 19. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  20. 20. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  21. 21. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  22. 22. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  23. 23. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  24. 24. Pages Templates Organisms Molecules Atoms 
 Photo by Dhyamis Kleber from Pexels
  25. 25. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  26. 26. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  27. 27. Pages Templates Organisms Molecules Atoms 
 Photo by Dhyamis Kleber from Pexels
  28. 28. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  29. 29. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  30. 30. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  31. 31. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  32. 32. 
 
 

  33. 33. http://bradfrost.com/blog/post/atomic-web-design/
  34. 34. We’re not designing pages, we’re designing systems of components.—Stephen Hay
  35. 35.
  36. 36.
  37. 37. 
 ?
  38. 38.
  39. 39.
  40. 40.
  41. 41.
  42. 42. 
 

  43. 43. 
 

  44. 44. 
 
 

  45. 45.
  46. 46.
  47. 47.
  48. 48.
  49. 49. 
 

  50. 50. 
 

  51. 51.
  52. 52. https://www.dropbox.com/branding/
  53. 53. http://ux.mailchimp.com/patterns
  54. 54. http://ui-patterns.com/
  55. 55.
  56. 56. 1 2 3 4
  57. 57.
  58. 58.
  59. 59.
  60. 60. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  61. 61. 
 

  62. 62. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  63. 63. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  64. 64. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  65. 65.
  66. 66. 
 

  67. 67.
  68. 68.
  69. 69. 
 

  70. 70. A Project Suitable for Agile Development
  71. 71. The Dependency Inversion Principle
  72. 72. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  73. 73. http://bradfrost.com/blog/post/atomic-web-design/
  74. 74. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  75. 75. http://bradfrost.com/blog/post/atomic-web-design/
  76. 76. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  77. 77. http://bradfrost.com/blog/post/atomic-web-design/
  78. 78. http://bradfrost.com/blog/post/atomic-web-design/
  79. 79.
  80. 80. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  81. 81. http://bradfrost.com/blog/post/atomic-web-design/
  82. 82. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  83. 83. http://bradfrost.com/blog/post/atomic-web-design/
  84. 84. Templates
  85. 85. Organisms
  86. 86. Organisms
  87. 87. Elements Inside
  88. 88. Atoms
  89. 89. Molecules
  90. 90. Atoms Inside the Molecule
  91. 91. Atoms: Balloon
  92. 92. Atoms: Balloon
  93. 93. Atoms: Balloon 
 

  94. 94. Atoms: Balloon
  95. 95. Atoms: Balloon 
 

  96. 96. Atoms: Balloon
  97. 97. Atoms: TrashCanIcon
  98. 98. Atoms: TrashCanIcon
  99. 99. Atoms: TrashCanIcon 
 
 
 
 
 
 
 
 
 
 

  100. 100. Atoms: TrashCanIcon
  101. 101. Molecules: DeleteButton
  102. 102. Molecules: DeleteButton 
 
 
 
 
 
 
 
 
 

  103. 103. Atoms: TrashCanIcon
  104. 104. Organisms: Notification
  105. 105. Organisms: Notification 
 
 
 

  106. 106. Organisms: Notification 
 
 
 
 
 
 
 

  107. 107. Organisms: NotificationList
  108. 108. Organisms: NotificationList 
 
 
 
 
 
 

  109. 109. Templates: NotificationListTemplate
  110. 110. Templates: NotificationListTemplate 
 
 
 
 
 
 
 
 
 
 
 
 
 

  111. 111. Flux
  112. 112. Templates Flux
  113. 113. Pages
  114. 114. 😁
  115. 115. https://storybook.js.org/
  116. 116.
  117. 117.
  118. 118. https://blog.nagisa-inc.jp/archives/3459
  119. 119.
  120. 120.
  121. 121.
  122. 122. 
 Interface Inventory
  123. 123. https://www.wantedly.com/companies/abema/post_articles/53312
  124. 124.
  125. 125. 
 

  126. 126. 
 
 
 

  127. 127. 
 

  128. 128. 
 
 
 

  129. 129. 😁
  130. 130. 
 

  131. 131. 
 

  132. 132. Atomic Design
 
 
 https://www.amazon.co.jp/dp/477419705X
  133. 133. YUSUKE GOTO https://ygoto3.com/ @ygoto3_

×