Atomowe projektowanie to wspaniała idea, którą możesz zaszczepić w projekcie już na samym początku. Ma ona bezpośredni wpływ nie tylko na warstwę wizualną, ale wiąże się również z rozwiązaniami technicznymi, ułatwiającymi pracę zespołu projektowego.
Twórcą metodologii Atomic Design, powstałej w 2013 roku, jest Brad Frost. Celem natomiast jest dostarczenie wskazówek na temat budowania lub projektowania interfejsów i systemów w uporządkowany, hierarchiczny sposób.
Ogólne założenia Atomic Design
Aby zrozumieć zagadnienie, należy odnieść się do świata przyrody, a dokładniej do chemii, w której znajdziemy wytłumaczenie i zarazem odpowiedź na pytanie, czym są poszczególne elementy opisane w Atomic Design. Atom to podstawowy element budulcowy materii. Wszechświat składa się z pierwiastków atomowych (znamy je z układu okresowego czy też tablicy Mendelejewa), które są budulcem wszystkiego, co nas otacza, i mają specyficzne właściwości, dzięki którym mogą łączyć się, tworząc większe cząsteczki. Cząsteczki również łączą się ze sobą w złożone organizmy, te zaś tworzą całą materię obecną we wszechświecie. Brad Frost odniósł elementy świata chemicznego do interfejsów i zauważył, że interfejsy mogą być również rozłożone na bardzo podobny zestaw skończonych elementów. Oznacza to, że możemy rozbić całe interfejsy na podstawowe bloki konstrukcyjne, pomagające w tworzeniu systemów projektowych, i zacząć na nich pracować, tworząc większe komponentyczy też biblioteki wzorców. Tym samym, w referencji do świata materii, w Atomic Design wyróżnione zostały takie elementy, jak: atomy, cząsteczki, organizmy, szablony i strony.
Dla kogo jest Atomic Design?
Atomic Design sprawdzi się szczególnie przy rozbudowanych stronach, które posiadają wiele informacji. Dzięki projektowaniu atomowemu możliwe jest reużywanie ogromnej liczby elementów, a zmiana na poziomie atomu wywołuje efekt na wszystkich stronach serwisu i we wszystkich elementach, przy których wybrany atom został zastosowany.
Czy Atomic Design jest potrzebny?
Dzięki Atomic Design możliwe jest tworzenie całych komponentów, które powinny być funkcjonalne, użyteczne, ale również ładne. Projektowanie atomowe umożliwia łatwiejsze poruszanie się pomiędzy częściami i całością naszego UI. Co ważne: projektowanie atomowe nie jest projektowaniem liniowym, a więc nie możemy projektować przycisków w odizolowaniu od innych elementów. Atomic Design pomaga tworzyć UI jako spójną całość, a nie wyodrębniać poszczególne elementy.
Co zyskujemy dzięki implementacji podejścia Atomic Design?
Otrzymujemy możliwość tworzenia systemów projektowych na podstawie jasnej metodologii. Klienci oraz cały zespół projektowy są w stanie lepiej zrozumieć koncepcję systemów projektowych, bo dzięki Atomic Design widzą przed sobą poszczególne kroki. Dzięki niemu możemy tworzyć systemy, które są spójne i skalowalne, a jednocześnie pokazują prace w ich ostatecznym kontekście. Dzięki składaniu poszczególnych elementów w większe cząsteczki, organizmy czy strony tworzymy system już na samym początku, zamiast wybierać próbki poszczególnych elementów po stworzeniu określonego komponentu.
Poniżej przedstawiam Ci kilka najważniejszych powodów, dla których warto zdecydować się na ten sposób projektowania.
- Możliwość mieszania i dopasowywania komponentów
- Łatwe stworzenie zestawienia stylów
- Prosty, intuicyjny układ
- Konsystencja kodu
- Koniec z projektowaniem pixel perfect
- Błyskawiczne tworzenie prototypów
- Swobodne aktualizowanie komponentów i reorganizacja witryny
- Modułowa struktura plików
Więcej informacji znajdziesz w artykule Wszystko co musisz wiedzieć o Atomic Design.