fbpx

Atomic Design

Opublikowane przez Patryk Kudła w dniu

Czym jest Atomic Design?

Atomic Design jest metodologią zaproponowaną przez Brada Frosta, która pozwala na podzielenie interfejsu aplikacji na pięć poziomów. Dzięki temu możemy stworzyć uporządkowany design system, a każdy poziom jest bardziej rozbudownany niż poprzedni.

We’re not designing pages, we’re designing systems of componentsStephen Hay

Korzyści

Korzyści płynące z korzystania z Atomic Design w naszych projektach:

  • pozwala nam na lepsze zrozumienie elementów interfejsu, z których został złożony,
  • łatwiejsza rozbudowa interfejsu o nowe elementy oraz prosta aktualizacja już istniejących,
  • pomaga w sprawnej komunikacji pomiędzy programistami a projektantami, ponieważ istnieje tylko jedno źródło prawdy (single source of truth),
  • czytelna oraz intuicyjna organizacja struktury katalogów,
  • znacząco mniej powtarzającego się kodu,
  • świetnie współpracuje z narzędziem Storybook, które między innymi możemy wykorzystać do dokumentacji naszych komponentów.

Poziomy

Wyróżniamy pięć poziomów (niektóre opierają się na pojęciach fizyczno-chemicznych):

  • Atomy: w otaczającym nas świecie wszystko zbudowane jest z atomu, czyli z najmniejszej części danego pierwiastka. Tak samo jest w metodyce Atomic Design. Atom jest najmniejszym elementem interfejsu, którego nie możemy rozbić na mniejsze cząsteczki. Wszystkie elementy w interfejsie użytkownika możemy wydzielić i przedstawić jako atomy.
  • Molekuły: nazywana również jako cząsteczka. Jest to grupa składająca się z dwóch lub więcej atomów. Każda molekuła powinna spełniać zasadę pojedynczej odpowiedzialności (ang. Single responsibilty prenciple) oraz powinna być zdolna do wielokrotnego użytku. Przykładem takiej molekuły może być Input z przyciskiem lub przycisk (<button>), który zawiera w sobie ikonę.
  • Organizmy: mogą być połączone z molekułami lub z pojedynczymi atomami, ale również mogą składać się z innych organizmów.  Bardzo ważne jest, aby elementy połączone ze sobą miały sens. Przykładem organizmu może być header aplikacji, który zawiera logo, nawigację, wyszukiwarkę.
  • Szablony: jest to połączenie organizmów, które odwzorowują finalną wersję strony, która zawiera przykładowe treści oraz zamiast obrazków zaimplementowane są placeholdery. W tym miejscu widzimy układ naszych elementów na stronie. Treści najczęściej wypełniane są dobrze nam znanym Lorem ipsum.
  • Strony: jest to już ostatni etap w metodologii Atomic Design. Jest to gotowy widok, który powinien odwzorować projekt graficzny i jest to finalna wersja strony, którą zobaczy użytkownik.
Animacja przedstawiająca główne elementy metodologii Atomic Design
Atomic Design w praktyce

Struktura katalogów

Z Atomic desing, możemy bardzo fajnie zorganizować strukturę katalogów w projekcie. Identyczną strukturę możemy zastosować w narzędziu Storybook. W przyszłości zaowocuje to uporządkowaną strukturą w projekcie, a dodatkowo, nowi programiści, którzy dołączą w czasie realizacji projektu, będą mogli się szybciej i sprawniej odnaleźć w projekcie.

Struktura katalogów w aplikacji

Podsumowanie

Atomic Design pozwala na projektowanie modułowego systemu komponentów, zachowując przy tym zasadę pojedynczej odpowiedzialności oraz możliwość ponownego wykorzystania elementów. System, który na początku skupia się na najmniejszych elementach (elementach atomowych) w interfejsie, następnie łączą się i tworzą cząsteczki, a w późniejszym etapie organizmy. Elementy potrafią ze sobą współpracować i umożliwiają hierarchiczne projektowanie oraz potrafią sprawnie zorganizować strukturę katalogów w aplikacji.

Źródła

A jakie jest Twoje zdanie na ten temat? Napisz koniecznie w komentarzu!

Kategorie: React