atomic design

Metro, Flat, Material Design to popularne i nadal żyjące style projektowania stron internetowych. Coraz popularniejszy jednak staje się Atomic Design.

Po raz pierwszy metodologia projektowania Atomic Design została zaprezentowana w 2013 roku przez Brada Frosta na Jego blogu. Motywem przewodnim tej metody 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.

atomic design
Źródło: http://bradfrost.com/blog/post/atomic-web-design/

Jak więc widać na załączonym obrazku, wszystko zaczyna się od najmniejszych części – od atomów, które tworzą molekuły, które tworzą organizmy – później jest już mniej chemicznie i są ‚templejty’, czyli szablony stron i gotowe strony. Ale co to tak dokładnie oznacza, w odniesieniu do projektowania stron internetowych?

Atomy

Są to najmniejsze cząstki chemiczne, ale też najmniejsze elementy strony internetowej, pojedyncze znaczniki. Atomy w odniesieniu do stron internetowych to każdy znacznik html, tj. <button> czy <input>. Motywem przewodnim metodologii Atomic Design jest to, aby raz użyte style czy kolory były używane w miarę możliwości w całym projekcie, a więc jeśli stworzymy przycisk zielony z białym napisem i zaokrąglonymi rogami to tak powinien wyglądać każdy przycisk na stronie.

Innymi słowy, jeśli projektujemy stronę, wg. tej metodologii, powinniśmy najpierw stworzyć pojedyncze elementy, pojedyncze style dla elementów tj. <button>, <h2> itp, a później tworzyć z nich…

Molekuły

Czyli połączenia atomów, które składają się na np. gotowe formularze, gotowe przyciski itp.

Przykładem takiego molekułu może być np. przycisk <button> z jakąś ikoną w środku, bądź formularz połączony z tytułem oraz przyciskiem.

Organizmy

Kolejna, jeszcze większa część strony internetowej, która wg ogólnie używanej terminologii może być określana jako sekcja, np. header, section, sidebar, footer. Zawiera ona gotowe już molekuły, czyli może to być header strony, zawierający logo, pełną nawigację i formularz z wyszukiwarką, może to być sekcja ze sliderem, w którym są ‚slajdy’, nagłówki, tekst, a może to też być boczna sekcja strony (sidebar), w której są zawarte molekuły, tj. formularz kontaktowy, sekcja o firmie itp.

Template

Template to gotowy szablon strony, gotowy rozplanowany układ elementów, który pojawią się w danych miejscach na stronie internetowej. Zwykle zawiera przykładowe teksty (Lorem ipsum) i puste miejsca lub placeholdery zamiast obrazków.

Strona

Jest to z kolei już gotowa strona, która jest prezentowana tak jak będzie docelowo wyglądała po wdrożeniu jej do internetu (zakodowaniu).

metodologia atomic design instagram

Powyższy obrazek świetnie prezentuje całą metodologię Atomic Design na przykładzie Instagrama. Na początku są pojedyncze elementy – atomy, które łączą się w molekuły, te z kolei tworzą sekcje – organizmy i tak powstaje szablon, z którego docelowo tworzona jest strona z prawidłowymi elementami zamiast sztucznych wypełniaczy.

Jakby się przyjrzeć, każda strona jest zbudowana z atomów, każdą istniejącą stronę możemy podzielić na elementy zgodne z metodologią Atomic Design, natomiast jak to wygląda od drugiej strony i rozpoczynania projektowania od pojedynczych elementów, to już kwestia indywidualna.
Jeśli jednak tematyka ta Cię zainteresowała, odsyłam do pełniejszej wersji w książce Brada Frosta poświęconej tej tematyce, która dostępna jest online za darmo, choć można również otrzymać ją w formie ebooka czy drukowanej książki. 🙂
Atomic Design by Brad Frost

Wczytaj więcej
Wczytaj więcej wpisów autora Wierzchu
Wczytaj więcej w Grafika

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Sprawdź także

UX vs UI – Podstawowe różnice

Skróty UX oraz UI często chodzą w parze. Co to oznaczają w praktyce i czym te pojęcia się …