What is Atomic Design?

To easy to understand 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