What is Atomic Design?

Affee225683fef978457e27fbe3ecb67?s=47 endam
July 30, 2019

What is Atomic Design?

To easy to understand what is Atomic Design



July 30, 2019


  1. UUUU Welcome to Atomic Design Masayuki Yoshida

  2. Topics ๏ What is Atomic Design ? ๏ Why did

    Goalous decide to adopt Atomic Design ? ๏ How does Goalous use Atomic Design? ๏ Pros and Cons of Atomic Design
  3. What is Atomic Design ?

  4. Atomic Design is… ๏a design methodology that create big components

    by combining small components. ๏It is composed of five component layers
  5. https://www.youtube.com/watch?v=q5CB1za0NfA Refer this movie to know the role of each

    layer https://www.youtube.com/watch?v=q5CB1za0NfA
  6. Component Layers of Atomic Design

  7. What's the difference between traditional design method and Atomic Design?

  8. Traditional Design as top-down and decompose from page Page U

  9. Atomic Design Design as bottom-up and combine minimum unit parts

    Page U
  10. Atomic Design is similar to Lego Various designs can be

    made depending on the combination
  11. Why did Goalous decide to adopt Atomic Design ?

  12. Let's go over the previous Goalous system…

  13. There are a lot of the negative legacies of technology

    continued to accumulate in frontend system… System is collapsed so much! We need to remake system for future ! Damasa
  14. System was like this…..

  15. We have design problems same as system ๏Bad information architecture

    ๏Difficult to use service, especially beginner ๏Not transmitted advantages for customers
  16. Finally we decided to do Service Renewal !

  17. Renewal Development Concept ๏ Respond to design changes flexibly and

    quickly ๏ Robust (design collapse is unlikely to occur) ๏ Unify service design rules We decided to adopt Atomic Design
  18. Atomic Design is widespread around the world. it has been

    already adopted by some famous services even Japan
  19. How does Goalous use Atomic Design?

  20. Refer presentation slides that Hiroko Suzuki created

  21. Pros and Cons of Atomic Design

  22. Pros ๏ The UI parts dependency greatly reduced (Lower component

    doesn’t depend on upper component) ๏ The collaboration of design and development became smooth among developer, designer and even product owner ๏ It’s easy to develop after get used to Atomic Design
  23. Cons ๏It is difficult to design follow Atomic Design until

    get used to it even senior designer ๏Sometimes worry about how to separate components and which layer the component is
  24. Conclusion ๏It was good decision for Goalous to adopt Atomic

    Design ๏But Atomic Design is not silver bullet
  25. Thank you for listening