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.

Atomic Design という名のデザイン整理術

2,283 views

Published on

This presentation describes how you and all the members of your team can organize your idea of UI design with Atomic Design.

Published in: Design
  • Be the first to comment

Atomic Design という名のデザイン整理術

  1. 1. 

  2. 2. YUSUKE GOTO 
 
 
 
 

  3. 3.
  4. 4. 
 

  5. 5. 
 

  6. 6. https://www.youtube.com/watch?v=Ai6PEagQpAs
  7. 7. https://www.youtube.com/watch?v=Ai6PEagQpAs
  8. 8. https://www.youtube.com/watch?v=Ai6PEagQpAs
  9. 9. https://www.youtube.com/watch?v=Ai6PEagQpAs
  10. 10. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  11. 11. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  12. 12.
  13. 13. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  14. 14. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  15. 15. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  16. 16. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  17. 17. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  18. 18. https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/ 
 

  19. 19. 
 
 https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/
  20. 20. https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
  21. 21. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  22. 22. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  23. 23. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  24. 24. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  25. 25. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  26. 26. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  27. 27. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  28. 28. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  29. 29. https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
  30. 30. https://www.youtube.com/watch?v=Ai6PEagQpAs
  31. 31. https://www.youtube.com/watch?v=Ai6PEagQpAs
  32. 32. https://www.youtube.com/watch?v=Ai6PEagQpAs 

  33. 33.
  34. 34.
  35. 35. 
 

  36. 36.
  37. 37.
  38. 38. ? ?
  39. 39. http://bradfrost.com/blog/post/atomic-web-design/
  40. 40. http://bradfrost.com/blog/post/atomic-web-design/
  41. 41. 
 

  42. 42. 
 

  43. 43. Pages Templates Organisms Molecules Atoms
  44. 44. Pages Templates Organisms Molecules Atoms
  45. 45. Pages Templates Organisms Molecules Atoms
  46. 46. Pages Templates Organisms Molecules Atoms
  47. 47. Pages Templates Organisms Molecules Atoms
  48. 48. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels
  49. 49. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels 
 

  50. 50. Pages Templates Organisms Molecules Atoms Photo by Dhyamis Kleber from Pexels 

  51. 51. Photo by Dhyamis Kleber from Pexels 
 
 Pages Templates Organisms Molecules Atoms 

  52. 52. Photo by Dhyamis Kleber from Pexels 
 
 Pages Templates Organisms Molecules Atoms
  53. 53. Photo by Dhyamis Kleber from Pexels 
 Pages Templates Organisms Molecules Atoms 

  54. 54. Photo by Dhyamis Kleber from Pexels Pages Templates Organisms Molecules Atoms 

  55. 55. Photo by Dhyamis Kleber from Pexels 
 Pages Templates Organisms Molecules Atoms 

  56. 56. Photo by Dhyamis Kleber from Pexels 
 Pages Templates Organisms Molecules Atoms 

  57. 57.
  58. 58. Organism A Organism B Organism D Organism E Organism C Template A
  59. 59. Organism A Organism B Organism D Organism E Organism C Organism A Organism B Organism C Organism E Organism D Template A Template B
  60. 60. Organism A Organism B Organism D Organism E Organism C Organism A Organism B Organism C Organism E Organism D Template A Template B
  61. 61. Organism A Organism B Organism E Organism C Template A
  62. 62. 
 Organism A Organism B Organism E Organism C Template A
  63. 63. Organism A Organism B Organism E Organism C Template A Organism A Organism B Organism E Organism C Template A
  64. 64.
  65. 65. 
 

  66. 66. 
 

  67. 67. 
 

  68. 68. 
 
 

  69. 69.
  70. 70. 
 
 

  71. 71.
  72. 72. https://www.wantedly.com/companies/abema/post_articles/53312
  73. 73. https://www.amazon.co.jp/dp/477419705X
  74. 74. https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development-100961721
  75. 75. https://www.slideshare.net/ygoto3q/update-to-an-agile-design-flow
  76. 76. YUSUKE GOTO https://ygoto3.com/ @ygoto3_

×