Atomic Design

Atomic Design je metodika pro budování systémů UI komponent, kterou představil designér Brad Frost. Název vychází z chemie: stejně jako se hmota skládá z atomů, které se spojují do molekul a organismů, jsou rozhraní budována z malých, znovupoužitelných jednotek kombinujících se do stále složitějších struktur.

Hierarchie má pět úrovní. Atomy jsou nejmenší prvky: tlačítka, vstupní pole, popisky, ikony. Molekuly jsou skupiny atomů, které pracují společně, například vyhledávací lišta kombinující vstupní pole a tlačítko. Organismy jsou složitější sekce sestavené z molekul a atomů, třeba hlavička webu. Šablony definují strukturu rozložení bez skutečného obsahu. Stránky jsou konkrétní instance šablon naplněné skutečným obsahem.

Hodnota tohoto přístupu nespočívá v pojmenování, ale v disciplíně, kterou vynucuje. Navrhování a budování komponent v izolaci, typicky v nástroji jako Storybook, nutí týmy přemýšlet o tom, jak budou jednotlivé části znovu využity, místo aby řešily každou obrazovku jako jednorázový problém. Udržování konzistence při růstu produktu se tak výrazně zjednodušuje.

Atomic Design přirozeně doplňuje design systémy a knihovny komponent. Když tým sdílí stejnou slovní zásobu pro stavební bloky UI, předávání mezi designem a vývojem probíhá hladčeji a dochází k méně nedorozuměním ohledně toho, co má komponenta dělat. Pro týmy budující velké aplikace s mnoha přispěvateli se včasné přijetí této metodiky vyplácí po celý životní cyklus projektu.