W artykule Atomic Design – podstawowe założenia nakreśliłem, czym jest atomic design i w jaki sposób projektować zgodnie z tą koncepcją, aby ułatwić sobie (i innym) pracę. Dziś nieco szerzej chciałbym opisać metodologię projektowania atomowego, która towarzyszy projektantom już prawie od dekady. Projektowanie interfejsów zostało odniesione do świata przyrody, dokładniej chemii, i opisane w postaci metodologii przez Brada Frosta. Koncepcja ta jest bardzo ciekawa, bo pozwala na tworzenie powtarzalnych elementów oraz reużywalnych bibliotek.
Świata chemii a tworzenie interfejsów
Układ okresowy jest uporządkowanym zestawieniem pierwiastków chemicznych, które występują w przyrodzie. Pierwiastki są w stanie łączyć się ze sobą, tworząc związki chemiczne – jednym z najbardziej znanych połączeń tych pierwiastków jest woda. W przypadku wody wodór (H2) łączy się z tlenem, (O2) tworząc wzór H2O. Brad Frost porównał pierwiastki do elementów, składających się na tworzenie interfejsu. I to właśnie porównanie jest niezwykle trafne, choć oczywiście nie zawsze musi się sprawdzać, jednak szczególnie istotne będzie przy tworzeniu bardzo dużych i obszernych projektów.
Struktura Atomic Design
To projektowanie, które rozpoczyna się od atomu, przedstawionego jako najmniejszy element interfejsu. Przykładem atomu jest button, czyli przycisk. Grupa dwóch lub więcej atomów tworzy molekuły – jeśli jednym z Twoich atomów jest button, drugim input (czyli tzw. pole wejściowe), a kolejnym header, czyli nagłówek, to przy ich połączeniu otrzymasz możliwość zdefiniowania formularza. Kilka połączonych ze sobą molekuł tworzy większy organizm. Jeśli zbierzesz kilka molekuł formularza, a u góry wstawisz molekułę typu step/progress bar (czyli pasek informacyjny/postępu), otrzymasz gotowy wizard, przeprowadzający użytkownika krok po kroku do celu. Jeśli mamy organizmy, ich grupa zarządzana jest przez szablon, a ten z kolei tworzy strony serwisu internetowego.
ATOMS – ATOMY
Tak, jak w przyrodzie, tak i w interfejsach atomy są podstawowymi elementami budulcowymi. W przypadku świata przyrody są to składniki budujące materię. Atomy są dla nas znacznikami HTML takimi, jak etykieta formularza, dane wejściowe lub przyciski. Równocześnie atomy mogą zawierać bardziej abstrakcyjne elementy, jak palety kolorów, fonty i jeszcze bardziej niewidoczne aspekty interfejsu (np. animacje). Jednak musimy wziąć pod uwagę, że sama etykieta formularza, dane wejściowe lub przycisk nie zbytnio przydatne same w sobie, ale po połączeniu ich razem w formie, mogą stworzyć molekuły.
MOLECULES – MOLEKUŁY
W chemii cząsteczki (molekuły) powstają poprzez połączenie ze sobą atomów w grupy i są najmniejszymi elementami związków. Dobrze obrazuje to wodór w chemii, bo jego występowanie w przyrodzie możliwe jest w postaci cząsteczkowej H2, składającej się z dwóch atomów. Powstałe cząsteczki wyróżniają się indywidualnymi właściwościami. W projektowaniu interfejsów cząsteczki mogą służyć jako szkielet naszych systemów projektowych. W tym wypadku cząsteczka może być etykietą formularza lub polem wejściowym. Co ważne, pomimo że cząsteczki są bardziej złożonymi elementami, zazwyczaj są stosunkowo prostymi kombinacjami atomów możliwymi do ponownego użycia.
ORGANISMS – ORGANIZMY
Organizmy są tworzone przez grupy cząsteczek połączonych ze sobą i budują one stosunkowo złożoną, odrębną część interfejsu. Kiedy widzimy stworzony organizm, widzimy już konkretną strukturę, widzimy, że ostateczny interfejs zaczyna nabierać kształtu. Organizmy mogą składać się z podobnych i/lub różnych typów cząsteczek. Przykład: masthead (przestrzeń reklamowa/banerowa, widoczna od razu po wejściu na stronę) może składać się z różnych elementów, np. logo, głównej nawigacji, wyszukiwarki i listy kanałów mediów społecznościowych.
Dzięki tworzeniu organizmów z molekuł możliwe jest użytkowanie przenośnych komponentów wielokrotnego użytku.
TEMPLATES – SZABLONY
Szablony składają się głównie z grup organizmów połączonych w celu utworzenia stron. To tutaj zaczynamy widzieć odniesienie do projektu końcowego i zaczynamy widzieć rzeczy takie, jak układ w akcji. Szablony są bardzo konkretne i stanowią kontekst dla wszystkich tych nieco abstrakcyjnych cząsteczek i organizmów. Szablon może przypominać wireframe projektu i na jego etapie mamy już stworzony bardzo czytelny obraz naszych działań, który możemy przedstawić naszym klientom.
PAGES – STRONY
Ostatnim etapem projektowania atomowego są strony, które zawierają w sobie specyficzne instancje szablonów. Jest to moment tworzenia, podczas którego tzw. treść zastępcza jest podmieniania na treść rzeczywistą, reprezentatywną. Taki zabieg ma na celu przedstawienie dokładnego obrazu tego, co użytkownik ostatecznie zobaczy. Strony są najwyższym poziomem zgodności z projektem i, biorąc pod uwagę, że strony są najbardziej namacalnym etapem, większość projektantów spędza na ich udoskonalaniu najwięcej czasu, bo jest on bardziej angażujący.
Projektowanie atomowe – korzyści
Skoro już przedstawiłem Ci wszystkie elementy projektowania atomowego, pora poruszyć temat korzyści, jakie przynosi. Jak możesz się spodziewać, Atomic Design wymaga dużo planowania oraz wysiłku wkładanego w tworzenie całego systemu. Dlatego też uważam, że uświadomienie sobie korzyści, wynikających z projektowania atomowego, jest bardzo ważne.
Po pierwsze: przez projektowanie atomowe budujemy system, który opiera się na komponentach. Dzięki temu podczas rozłożenia tych komponentów na czynniki pierwsze (atomy) jest nam łatwiej dostrzec możliwość mieszania i dopasowywania wybranych atomów i tworzyć nowe cząsteczki, czy organizmy. Drugą zaletą będzie łatwiejsze tworzenie zestawienia stylów. Założenie jest proste: otóż wszystkie atomy i cząsteczki są tworzone na samym początku, co oznacza, że można je wszystkie zawrzeć w zestawieniu stylów i posługiwać się nimi w trakcie tworzenia kolejnych etapów projektu. Co ważne, zestawienie stylów pomaga na stworzenie projektu spójnego na każdym etapie. Tutaj warto również wyróżnić projektowanie atomowe za prosty i intuicyjny układ, ale nie tylko prostota jest tu zaletą – jest nią również szybkość prototypowania i aktualizowania komponentów oraz możliwość szybkiej reorganizacji witryny. Dzięki zdefiniowanej liście atomów możliwe jest po prostu szybkie i łatwiejsze tworzenie makiet stron. Jeśli z kolei wymagana jest aktualizacja, możliwa jest jednorazowa zmiana wszystkich atomów, cząsteczek czy całego organizmu. Modułowa struktura plików to kolejna zaleta. W tym rodzaju projektowania istotny jest również łatwy do odczytania kod, spójniejszy od tradycyjnych kodów. Do tworzenia układów witryny używane są predefiniowane atomy, które ułatwiają sprawdzenie tego, jakie komponenty były używane w różnych częściach witryny.
Podsumowując: Atomic Design jest naprawdę ciekawą metodologią, którą projektanci mogą wdrożyć w swoje projekty. Nie zawsze taki sposób projektowania będzie najbardziej odpowiedni, szczególnie w przypadku mniejszych projektów. Z całą pewnością jednak ułatwia on implementację komponentów w kodzie CSS, HTML i JS, a także zarządzanie i wdrażanie nowych serwisów. Decyzja o tym, czy wykorzystasz projektowanie atomowe w swoim projekcie, należy już, jak zawsze, do Ciebie.