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

To co robi teraz jest lepsze od tego co robił pół roku temu, ale co będzie robił za pół roku będzie jeszcze lepsze niż to, co robi teraz – w każdej dziedzinie, którą się zajmuje, ponieważ jak twierdzi, jak się nie rozwija to się zwija. Uważa, że na wszystkim jesteśmy w stanie zarabiać, cokolwiek przychodzi nam do głowy, cokolwiek lubimy robić, jesteśmy w stanie mieć z tego zysk.

Artysta, autor bloga, projektant, grafik komputerowy, barista. Na codzień mieszka we Wrocławiu, prowadzi bloga BrainDesign, robi to co lubi i ma z tego frajdę. Fan pozytywnego myślenia, standupu, rozwoju osobistego oraz dobrej kawy. W wolnych chwilach łapie chwile na zdjęciach, czyta ciekawe książki, bawi się w Social Mediach, a także przegląda YouTube’a podziwiając występy sztuki Flair czy inspirujące wystąpienia z TED/TEDx’owych konferencji.

Wczytaj więcej

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Sprawdź także

Adobe Photoshop – Ciekawe Tutoriale Cz.1

Czy Ciebie też zastanawia czasem „jak to jest zrobione?” kiedy patrzysz na jak…