(en)
Atomic Design is a methodology for grouping and building systems design. It involves building components starting with “atoms” to build more complex components such as molecules and organisms. This method allows building a system from the smallest unbroken elements. For the explanation:
– Atoms are basic components such as typography, colors, spacing, styles, labels, icons.
– Molecules – more advanced components such as buttons, inputs, text buttons with icons, cards. All components that require more than one atom to be built.
– Organisms – complex creations, they can contain several molecules. As UI components they can be full footers, product penalties, navigation menus. Large repeating elements are as blocks in the system design.
– Templates / Pages – superior elements grouping organisms in a page layout. Creating templates for subpages, views or entire user paths.
Atomic Design coincides very well with the implementation of components in code – CSS, HTML, JS. This makes it easier to manage, maintain and implement new services and applications.
(pl)
Atomic Design to metodologia grupowania i budowania design systemów. Polega ona na budowaniu komponentów UI zaczynając od “atomów”, aby na ich podstawie budować bardziej skomplikowane komponenty takie jak molekuły czy organizmy. Metoda ta pozwala budować system od najmniejszych nie rozbijanych elementów. Dla wyjaśnienia:
– Atomy – to podstawowe komponenty takie jak typografia, kolory, odstępy, style, labele, ikony.
– Molekuły – bardziej zaawansowane komponenty, takie jak buttony, inputy, text buttony z ikonami, karty. Wszystkie komponenty, które wymagają więcej niż jednego atomu do zbudowania.
– Organizmy – rozbudowane twory. Mogą zawierać w sobie kilka molekuł. Jako komponenty UI mogą to być pełne stopki, kary produktów, menu nawigacyjne. Duże elementy powtarzające są jako bloki w design systemie.
– Templatki / Strony – elementy nadrzędne grupujące organizmy w układzie strony. Tworzące wzorce dla danych podstron lub widoków, albo całych ścieżek użytkownika.
Atomic Design bardzo dobrze pokrywa się z implementacją komponentów w kodzie – CSS, HTML, JS. Ułatwiając tym samym zarządzanie, utrzymanie i wdrażanie nowych serwisów czy aplikacji.