Atomic design is a methodology for creating design systems that involves breaking down interfaces into basic reusable components. There are five levels in atomic design: atoms, molecules, organisms, templates, and pages. Atoms are the smallest elements like buttons and inputs. Molecules are groups of atoms that work together. Organisms combine molecules and other organisms into more complex components. Templates define the content structure without real content. Pages show templates with actual content for users to interact with. The methodology helps create reusable interfaces and maintainable design systems.

1. Hi I’m Vlad
UX/UI Designer at
SoftServe

2. What do we need to be
more productive?

4. A B

5. A B

6. A B

8. The client
sees

9. Developer

10. Atomic design &
Design system

11. What is Atomic design?
Atomic design is methodology coined by Brad Frost (10 Jun, 2013) for creating Design Systems. That
involves breaking a website layout down into its basic components, which are then reused throughout
the site. There are five distinct levels in atomic design:

12. Atoms
Atoms of our interfaces serve as the foundational building blocks that comprise all our user
interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others
that can’t be broken down any further without ceasing to be functional.

13. Atoms

14. Molecules
In chemistry, molecules are groups of atoms bondedtogether that take on distinct new properties.
In interfaces, moleculesare relatively simple groupsof UI elements functioning together as a UNIT.

15. Molecules

16. Organisms
Organisms are relatively complex UI components composed of groups of molecules and/or atoms
and/or other organisms. These organisms form distinct sections of an interface

17. Organisms

18. Templates
Templates focus on the page’s underlying content structure rather than the page’s final
content.

19. Mobile Desktop
Templates

20. Pages
Pages are specific instances of templates that show what a UI looks like with real representative
content in place. This is what users will see and interact with when they visit your experience. This is
what your stakeholders will sign off. And this is where you see all those components coming together to
form a beautiful and functional user interface.

21. Pages

22. Atomic model

25. Design systems

26. Holy grail

27. Holy grail
Creating environment where the
patterns library and live application
are perfectly sync

28. Design system should
increase in value over
time like a bottle of fine wine
… Rather than a used car
that's just been driven off the
lot.
Brad Frost
“

29. Thank you
Highly recommended links
1. Brad Frost blog & book http://bradfrost.com/
2. Design systems examples http://styleguides.io/

30. See you on our next
meeting in March!
08 / 03 / 2018 at 17.30