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.

既存のフローからアップデートするアジャイル・デザインフロー

571 views

Published on

This presentation describes how you can update your design flow to a more agile version. An agile design flow help you create an inner structure that prevents your UI design from generating design debt and bugs.

Published in: Design
  • Be the first to comment

既存のフローからアップデートするアジャイル・デザインフロー

  1. 1. 2018.6.29 DevLOVE Atomic Design UI
  2. 2. YUSUKE GOTO https://ygoto3.com/ @ygoto3_ 
 
 
 
 

  3. 3. Atomic Design
 https://www.amazon.co.jp/dp/477419705X
  4. 4. Plan Do Check Action
  5. 5. Plan Check Action Do
  6. 6. Plan Check Action Do
  7. 7. Do
  8. 8. Do
  9. 9. Do
  10. 10. https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/
  11. 11. https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/
  12. 12.
  13. 13. https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long
  14. 14. https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long
  15. 15. https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long
  16. 16. https://pixabay.com/en/games-children-child-girl-toys-2801332/
  17. 17. https://pixabay.com/en/blocks-child-toy-education-game-503109/
  18. 18. https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/
  19. 19. https://pixabay.com/en/freedom-silhouette-woman-back-light-2053281/
  20. 20. 
 Wikipedia
 https://ja.wikipedia.org/wiki/ %E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%8 2%B0_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)
  21. 21. 
 Wikipedia
 https://ja.wikipedia.org/wiki/ %E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%8 2%B0_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)
  22. 22. https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/
  23. 23.
  24. 24. https://www.youtube.com/watch?v=Ai6PEagQpAs
  25. 25. https://www.youtube.com/watch?v=Ai6PEagQpAs
  26. 26. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  27. 27. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  28. 28. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  29. 29. https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/
  30. 30. https://pixabay.com/en/freedom-silhouette-woman-back-light-2053281/
  31. 31. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  32. 32. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  33. 33. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  34. 34.
  35. 35.
  36. 36. 
 

  37. 37.
  38. 38.
  39. 39. 
 

  40. 40.
  41. 41.
  42. 42. https://www.amazon.co.jp/dp/4763131206
  43. 43. http://bradfrost.com/blog/post/atomic-design-book/
  44. 44. 
 

  45. 45. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  46. 46. Atomic Design http://bradfrost.com/blog/post/atomic-web-design/
  47. 47. Pages Templates Organisms Molecules Atoms
  48. 48. Pages Templates Organisms Molecules Atoms
  49. 49. Pages Templates Organisms Molecules Atoms
  50. 50. Pages Templates Organisms Molecules Atoms
  51. 51. Pages Templates Organisms Molecules Atoms
  52. 52. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  53. 53. 
 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  54. 54. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  55. 55. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  56. 56. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  57. 57. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  58. 58. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  59. 59. Pages Templates Organisms Molecules Atoms 
 Photo by Dhyamis Kleber from Pexels
  60. 60. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  61. 61. Pages Templates Organisms Molecules Atoms 
 
 Photo by Dhyamis Kleber from Pexels
  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. 
 Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  66. 66. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  67. 67. 
 

  68. 68.
  69. 69.
  70. 70.
  71. 71.
  72. 72.
  73. 73.
  74. 74.
  75. 75.
  76. 76.
  77. 77.
  78. 78.
  79. 79.
  80. 80. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  81. 81. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  82. 82. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  83. 83.
  84. 84. Organism A Organism B Organism D Organism E Organism C Template A
  85. 85. Organism A Organism B Organism D Organism E Organism C Organism A Organism B Organism C Organism E Organism D Template A Template B
  86. 86. Organism A Organism B Organism D Organism E Organism C Organism A Organism B Organism C Organism E Organism D Template A Template B
  87. 87. Organism A Organism B Organism E Organism C Template A
  88. 88. Organism A Organism B Organism E Organism C 
 Template A
  89. 89. Organism A Organism B Organism E Organism C Template A Organism A Organism B Organism E Organism C Template A
  90. 90.
  91. 91.
  92. 92.
  93. 93.
  94. 94.
  95. 95. 
 

  96. 96. 
 

  97. 97. 
 
 

  98. 98.
  99. 99.
  100. 100.
  101. 101. 
 

 

  102. 102.
  103. 103. 
 

 

  104. 104. 
 

 
 

  105. 105. 
 

 
 
 
 

  106. 106. 
 

 

  107. 107. 
 https://www.amebaownd.com/
  108. 108. 
 https://www.amebaownd.com/
  109. 109. 
 

  110. 110. 

 

 

  111. 111. 

 
 
 
 

  112. 112. 

 
 
 
 
 

  113. 113. 

 

 
 

  114. 114. 

 

 

  115. 115. 

 

 
 
 

  116. 116.
  117. 117.
  118. 118. https://sketchapp.com/docs/symbols/editing-symbols/
  119. 119. https://sketchapp.com/docs/symbols/editing-symbols/
  120. 120. https://sketchapp.com/docs/symbols/nested-symbols/
  121. 121. https://sketchapp.com/docs/symbols/nested-symbols/
  122. 122. https://sketchapp.com/docs/symbols/nested-symbols/
  123. 123. https://sketchapp.com/docs/symbols/nested-symbols/ 

  124. 124. https://sketchapp.com/docs/symbols/nested-symbols/ 

  125. 125. 

 

 

  126. 126. 

 

 
 
 

  127. 127. 
 

 

  128. 128. 
 

 
 

  129. 129. https://storybook.js.org/
  130. 130. 
 

 
 

  131. 131. 
 
 

  132. 132. 
 
 
 

  133. 133. 
 

  134. 134.
  135. 135.
  136. 136. https://blog.nagisa-inc.jp/archives/3459
  137. 137. 
 Interface Inventory
  138. 138. https://www.wantedly.com/companies/abema/post_articles/53312
  139. 139. 
 

  140. 140. 
 

  141. 141.
  142. 142. 
 

  143. 143. Atomic Design
 
 
 https://www.amazon.co.jp/dp/477419705X
  144. 144.
  145. 145. YUSUKE GOTO https://ygoto3.com/ @ygoto3_

×