Atomic design – hit czy kit?

18 września 2018

Znamy bardzo dobrze pojęcia takie jak flat design, material design. Kilka lat temu pojawił się także termin atomic designu. I niech nikogo nie odstrasza chemiczne słowo “atomic” bo – zapewniamy, akurat to pojęcie jest o wiele prostsze do zrozumienia niż chemia 🙂

Atomic design po raz pierwszy został zaprezentowany w 2013 roku przez Brada Frosta na Jego blogu. Ideą trendu jest tworzenie “systemów projektowania”, a co za tym idzie – uproszczenia projektowania przez porównanie go częściowo do chemicznych terminologii, tj. Atomy, Molekuły czy Organizmy.
Wszystko zaczyna się od najmniejszych części, czyli atomów, które tworzą molekuły, które stanowią organizmy. Idąc dalej mamy zdecydowanie mniej terminologii chemicznej, są to głównie znane szablony czy gotowe strony.
Jak jednak rozumieć atomic design pod względem projektowania stron internetowych?

Atomy – czyli z chemicznej definicji, najmniejsze cząstki chemiczne, także w odniesieniu do webdesignu – najmniejsze elementy witryny, pojedyncze znaczniki. Atomami tutaj będą wszelkie znaczniki html – buttony, inputy, czy znaczniki typograficzne – h1, h2, list.
Cały “myk” polega na tym, by owe atomy, w miarę możliwości, analogicznie wykorzystywać w całym projekcie strony www.
Dobrą praktyką jest, by, projektując, stworzyć najpierw atomy, i z nich tworzyć następne “klocki”, czyli:

Molekuły, czyli nic innego jak połączenia atomów, tworzące całe elementy strony – formularze, przyciski etc.

Organizmy – w systemie atomic design, rozumiane jako kolejny, jeszcze większy “klocek”, określany jako sekcja – może to być header/footer, sidebar, content, czy osobna sekcja CTA.
Organizmy zawierają gotowe molekuły, odpowiednio rozmieszczone i uzupełnione o adekwatne teksty są podstawowym budulcem witryn.

Template – gotowy szablon strony internetowej, z rozplanowanym rozkładem elementów oraz styli, które pojawiają się analogicznie w różnych miejscach.

Strona – jest to z kolei już gotowy twór, który jest prezentowany tak jak będzie docelowo wyglądała cała strona, po wdrożeniu jej do internetu (zakodowaniu).

Gdzie sprawdzi się atomic design? Tak naprawdę możemy, a nawet powinniśmy korzystać z niego podczas projektowania każdej strony www. Tyczy się to zwłaszcza atomów, które muszą być powtarzalne i być spójne w każdej realizacji – i nie ma tu znaczenia, czy projektujemy blog, stronę informacyjną czy duży sklep internetowy.