Čo je Atomic Design?
Atomic Design je metodológia navrhovania používateľských rozhraní, ktorú vytvoril Brad Frost. Rozdeľuje UI na päť hierarchických úrovní: atómy, molekuly, organizmy, šablóny a stránky — od najmenších prvkov po kompletné rozloženia.
Definícia Atomic Design
Čo je Atomic Design
Atomic Design je metodológia vytvorená Bradom Frostom v roku 2013. Inšpiruje sa chémiou — tak ako sa hmota skladá z atómov, molekúl a organizmov, aj používateľské rozhranie sa dá rozložiť na hierarchiu stále komplexnejších komponentov.
Päť úrovní Atomic Designu
- Atómy — najmenšie nedodeliteľné prvky: tlačidlo, vstupné pole, label, ikona, nadpis
- Molekuly — skupiny atómov s jednou funkciou: vyhľadávacie pole (label + input + tlačidlo)
- Organizmy — komplexné sekcie z molekúl: navigačný panel, hlavička stránky, pätička
- Šablóny (Templates) — rozloženie stránky s placeholder obsahom — definujú štruktúru
- Stránky (Pages) — šablóny naplnené skutočným obsahom — finálna podoba
Prečo používať Atomic Design
Metodológia pomáha tímom systematicky budovať konzistentné rozhrania. Malé komponenty sa testujú izolovane, potom sa skladajú do väčších celkov. Výsledkom je modulárny, škálovateľný a ľahko udržiavateľný kód.
Praktický príklad
Príklad: Budovanie kontaktného formulára metódou Atomic Design.
Atómy: Label, Input, Button, ErrorMessage — každý samostatne otestovaný.
Molekula: FormField = Label + Input + ErrorMessage — znovupoužiteľná skupina.
Organizmus: ContactForm = 3× FormField (meno, email, správa) + Button „Odoslať".
Výsledok: Ak sa zmení dizajn Input komponentu, zmena sa automaticky prejaví vo všetkých formulároch na webe.
Často kladené otázky
Čo je Atomic Design?
Je to metodológia navrhovania UI od Brada Frosta, ktorá rozdeľuje rozhranie na päť úrovní: atómy, molekuly, organizmy, šablóny a stránky — od najmenších po najkomplexnejšie.
Aký je rozdiel medzi atómom a molekulou v Atomic Design?
Atóm je najmenší nedodeliteľný prvok (tlačidlo, input). Molekula je skupina atómov, ktoré spolu plnia jednu funkciu (napr. vyhľadávacie pole = input + tlačidlo).
Je Atomic Design vhodný pre malé projekty?
Áno, aj pre malé projekty poskytuje užitočnú štruktúru. Nemusíte striktne dodržiavať všetkých 5 úrovní — princíp skladania malých komponentov do väčších je univerzálne prospešný.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.