What is Atomic Design?

Transcript

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