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.


YUSUKE GOTO













 


 

https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/


https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/








https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.youtube.com/watch?v=Ai6PEagQpAs














?
?
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/








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




Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels


Photo by Dhyamis Kleber from Pexels




Pages
Templates
Organisms
Molecules
Atoms


Photo by Dhyamis Kleber from Pexels




Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms


Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms


Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms


Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms




Organism A
Organism B
Organism D
Organism E
Organism C
Template A
Organism A
Organism B
Organism D
Organism E
Organism C
Organism A
Organism B
Organism C
Organism E
Organism D
Template A T...
Organism A
Organism B
Organism D
Organism E
Organism C
Organism A
Organism B
Organism C
Organism E
Organism D
Template A T...
Organism A
Organism B
Organism E
Organism C
Template A


Organism A
Organism B
Organism E
Organism C
Template A
Organism A
Organism B
Organism E
Organism C
Template A
Organism A
Organism B
Organism E
Organism C
Template A



 


 


 

















https://www.wantedly.com/companies/abema/post_articles/53312
https://www.amazon.co.jp/dp/477419705X
https://www.slideshare.net/ygoto3q/atomic-design-for-agile-ui-development-100961721
https://www.slideshare.net/ygoto3q/update-to-an-agile-design-flow
YUSUKE GOTO
https://ygoto3.com/
@ygoto3_
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

14

Share

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

Download to read offline

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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_
  • ShioriTakahashi

    Dec. 11, 2020
  • sazanami_jiro

    Jul. 28, 2020
  • ssuser2425a0

    Apr. 21, 2020
  • sayakaohnuma

    Feb. 20, 2020
  • MayuNiitsu

    Nov. 8, 2019
  • yutoshitrahata

    Aug. 15, 2019
  • syuichitsuji

    Apr. 26, 2019
  • hal7000

    Mar. 21, 2019
  • ShinFukuchi

    Mar. 11, 2019
  • itumoo

    Mar. 2, 2019
  • ssuser171e29

    Dec. 12, 2018
  • MosaYama

    Sep. 12, 2018
  • chiemuraoka

    Sep. 11, 2018
  • nyoshitaka

    Aug. 25, 2018

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

Views

Total views

12,541

On Slideshare

0

From embeds

0

Number of embeds

7,582

Actions

Downloads

19

Shares

0

Comments

0

Likes

14

×