TL;DR

Atomic Design narodził się z praktycznej potrzeby tworzenia spójnych interfejsów dla różnych urządzeń
Metodologia została zainspirowana lekcją chemii z czasów szkolnych Brada Frosta
Design tokeny działają jako „subatomowe” elementy, oddzielające strukturę od estetyki
Analogia drzwi: solidna konstrukcja (struktura) może mieć różne wykończenia (estetyka)
Design systemy nie ograniczają kreatywności, a raczej oferują solidne fundamenty
Brad stworzył narzędzie Pattern Lab do implementacji Atomic Design, poprzedzające Storybook
W erze AI projektanci muszą wyjść poza „tworzenie prostokątów” w stronę rozwiązywania złożonych problemów
Kluczem do sukcesu jest ciekawość i gotowość do ciągłego uczenia się

Czym jest Atomic Design i skąd się wzięło?

Brad Frost, ekspert w dziedzinie design systemów, opowiada o nieoczekiwanej drodze do stworzenia metodologii Atomic Design. Rozpoczął jako student muzyki w James Madison University, by później odkryć program Media Arts and Design, gdzie zetknął się z projektowaniem cyfrowym. Początkowo tworzył strony dla swojego zespołu muzycznego i eksperymentował z MySpace.

Kluczowym momentem w jego karierze było przeczytanie książki „Designing with Web Standards” Jeffreya Zeldmana, którą zamówił na Amazon jeszcze przed ukończeniem studiów.

Inspiracja dla Atomic Design pochodziła z lekcji chemii w liceum. Brad wspomina, jak odkrył, że może efektywniej rozwiązywać równania chemiczne, skupiając się najpierw na lewej stronie równań. To doświadczenie i koncepcja łączenia atomów w większe struktury molekularne stały się fundamentem jego metodologii projektowania.

Pragmatyczne korzenie systemowego myślenia

Frost przyznaje, że jego podejście do design systemów wynikało z pragmatyzmu i rozwiązywania realnych problemów, a nie z wrodzonej skłonności do systemowego myślenia.

Główne wyzwania, które doprowadziły do powstania Atomic Design:

Trudność w dzieleniu komponentów między różnymi stronami
Konieczność tworzenia wersji stron dla różnych urządzeń (iPhone, iPad, desktop)
Redundancja pracy przy powielaniu tych samych elementów
Rosnąca złożoność ekosystemu urządzeń mobilnych

Przełomowym momentem była praca dla dużych marek jak Nike, Tiffany & Co. i MasterCard około 2009 roku, gdy iPhone już istniał, ale web jeszcze nie dostosował się do nowych realiów mobilnych. Brad wspomina projekt dla Nike, gdzie nieświadomie projektowali dla niezapowiedzianego jeszcze iPada. Ostatecznie musieli zarządzać czterema wersjami strony: iPhone.nike.com, iPad.nike.com, zwykłym Nike.com oraz M.nike.com dla pozostałych urządzeń mobilnych.

To doświadczenie uświadomiło mu absurdalność powielania tej samej treści w czterech różnych miejscach i zainspirowało do bardziej modułowego podejścia.

Pattern Lab i narodziny narzędzia

Równolegle z tworzeniem koncepcji Atomic Design, Brad opracował narzędzie do jej implementacji – Pattern Lab. Było to rozwiązanie oparte początkowo na PHP, które umożliwiało organizację i zarządzanie komponentami interfejsu.

Pattern Lab, będący prekursorem dzisiejszego Storybooka, pozwalał nawigować po różnych wzorcach (patterns) i wyświetlać je w osobnym iframe. Brad wspomina, jak tworzył to narzędzie i jednocześnie formułował koncepcję Atomic Design, a Jonathan Stark, współpracujący z nim programista JavaScript, pomógł w nadaniu nazwy narzędziu.

Design tokeny – subatomowe elementy designu

Design tokeny, wprowadzone w 2016 roku przez Ginę Ann, stanowią kluczowe uzupełnienie metodologii Atomic Design. Frost przyznaje, że gdyby mógł cofnąć się w czasie, włączyłby je do swojej pierwotnej koncepcji.

Czym są design tokeny:

„Subatomowe” elementy designu (jak elektrony, protony, neutrony)
Definicje podstawowych wartości wizualnych (kolory, typografia, cienie, animacje)
Elementy oddzielające strukturę od estetyki
Podstawa dla elastycznych systemów designu
Muszą być zastosowane w kontekście komponentów, by nabrać znaczenia

Analogia drzwi: estetyka vs struktura

Brad używa doskonałej analogii drzwi do wyjaśnienia relacji między strukturą a estetyką w design systemach:

Struktura (powtarzalna):

Wymiary i forma
Mechanizm otwierania/zamykania
Umiejscowienie zawiasów
Otwór na klamkę

Estetyka (elastyczna):

Kolor drzwi
Rodzaj wykończenia
Materiał okuć (mosiężne, czarne, niklowane)
Dekoracyjne elementy

Jak design tokeny rozwiązują realne problemy?

Design tokeny są szczególnie cenne w organizacjach „multi-wszystko” – z wieloma markami, platformami, trybami i językami.

Korzyści z rozdzielenia struktury i estetyki:

Ten sam komponent może obsługiwać różne marki
Zespoły produktowe zachowują elastyczność estetyczną
Unika się konfliktów między systemem a potrzebami produktu
Możliwe jest dostosowanie do różnych kontekstów bez powielania pracy

Czy design systemy zabiły kreatywność?

Frost stanowczo odpowiada na zarzut, że design systemy ograniczają kreatywność:

Dlaczego design systemy nie zabijają kreatywności:

Zapewniają solidną podstawę strukturalną
Eliminują niepotrzebną pracę nad podstawowymi elementami
Pozwalają skupić się na rozwiązywaniu unikalnych problemów
Umożliwiają elastyczność estetyczną przy zachowaniu spójności strukturalnej

Design w dobie AI

W kontekście rozwoju AI, Brad zauważa istotną zmianę w roli projektantów:

Wpływ AI na design:

Łączy ograniczenia design systemów z elastycznością generatywną
Wymusza przemyślenie roli projektanta
Przesuwa fokus z tworzenia elementów na rozwiązywanie problemów
Wymaga większej refleksji nad wartością ludzkiego wkładu

Brad dostrzega fundamentalną różnicę między idealizmem wczesnych dni internetu a dzisiejszym entuzjazmem wobec AI. Podkreśla, że pierwotne ideały webowe wywodziły się z CERN i naukowców, którzy chcieli swobodnie dzielić się wiedzą. Natomiast dzisiejszy idealizm wokół AI jest często napędzany przez podmioty, które mają w nim duży finansowy interes.

Redefiniowanie roli projektanta

W obliczu postępu technologicznego, projektanci powinni na nowo zdefiniować swoją rolę:

Nowa rola projektanta:

Tworzenie rzeczy i pomaganie ludziom (misja nadrzędna)
Rozwiązywanie złożonych problemów zamiast tworzenia prostych elementów
Wykorzystanie nowych narzędzi do realizacji swoich celów
Przekraczanie granic między dyscyplinami
Wychodzenie poza binarne myślenie (np. „za AI” vs „przeciw AI”)

Brad dostrzega, że w branży pojawiają się różne obozy – od entuzjastów AI („pociąg odjeżdża, wsiadaj”) po „dumnych luddystów” odrzucających nowe technologie. Sam przeszedł przez różne etapy obaw i niepewności co do przyszłości zawodowej w erze AI. Podkreśla jednak, że kluczowe jest wyjście poza czarno-białe postrzeganie rzeczywistości i znalezienie własnej ścieżki.

Checklist dla projektanta w erze AI i design systemów

✅ Zrozum fundamenty Atomic Design

Poznaj relacje między atomami, molekułami, organizmami, szablonami i stronami
Naucz się identyfikować te elementy w istniejących interfejsach
Zrozum, jak elementy łączą się w większe struktury

✅ Wdrażaj design tokeny

Zidentyfikuj wartości estetyczne, które mogą stać się tokenami
Oddziel strukturę komponentów od ich stylistyki
Stwórz system nazewnictwa dla swoich tokenów
Ustal, jak tokeny będą implementowane w kodzie

✅ Balansuj między systemem a elastycznością

Ustal, które elementy powinny być standaryzowane, a które elastyczne
Wprowadź mechanizmy dostosowywania komponentów do różnych kontekstów
Dokumentuj zarówno zasady użycia, jak i możliwości customizacji

✅ Przygotuj się na erę AI

Naucz się wykorzystywać AI jako narzędzie wspierające, nie zastępujące
Skup się na rozwijaniu umiejętności, których AI nie posiada
Zdefiniuj na nowo swoją wartość jako projektanta
Kieruj się ciekawością, nie strachem przed zmianą

✅ Rozwój osobisty

Podążaj za swoją ciekawością, nie tylko obowiązkami
Ucz się nowych umiejętności z wewnętrznej motywacji
Wyjdź poza binarne myślenie (np. „uczyć się kodowania czy nie”)
Regularnie zastanawiaj się nad swoją misją jako twórcy

Praktyczna rada dotycząca PHP i technologii webowych

W rozmowie Brad wspomina o technologiach webowych, w tym PHP, które mimo upływu lat pozostaje stabilną i niezawodną podstawą wielu projektów. Jak zauważa:

Dlaczego stare technologie wciąż mają wartość:

Dojrzałość oznacza stabilność i niezawodność, nie przestarzałość
PHP nadal jest podstawą wielu popularnych systemów (np. WordPress)
Modularność tych technologii miała wpływ na rozwój myślenia systemowego
W erze AI obserwuje się nawet pewien renesans „starych” technologii

Podsumowanie

Brad Frost pokazuje, że design systemy, od Atomic Design po design tokeny, powstały z potrzeby rozwiązywania realnych problemów projektowych. Nie ograniczają kreatywności, ale dają solidne podstawy dla innowacji i skalowalności. W erze AI kluczowe jest ponowne zdefiniowanie roli projektanta i skupienie się na rozwiązywaniu złożonych problemów, zamiast tworzenia podstawowych komponentów.

Metodologia Atomic Design, Pattern Lab i design tokeny to nie tylko koncepcje teoretyczne, ale praktyczne rozwiązania wynikające z rzeczywistych wyzwań w projektowaniu cyfrowym. Ich wartość staje się jeszcze większa w erze AI, która wymaga od nas ponownego przemyślenia relacji między ludźmi a technologią.

Polecane zasoby:

„Designing with Web Standards” – Jeffrey Zeldman
Kurs „Design Tokens Course” dostępny na atdesigntokenscourse.com
Blog Brada Frosta na bradfrost.com, prowadzony od prawie 20 lat

Źródło:

Artykuł powstał na podstawie podcastu „Atomic Design, Tokens, AI and the Future of Design Systems with Brad Frost, Ep28” (vaexperience) – https://www.youtube.com/watch?v=ZGjsNCyTqZ8

*Ten artykuł jest częścią serii notatek z wartościowych podcastów

Tag: Pattern Lab

Przyszłość design systemów – notatki z podcastu z Bradem Frostem #EN67