Close Menu
Chris Badura Personal Blog – Design, Research, LearningChris Badura Personal Blog – Design, Research, Learning

    Cool Stuff

    Jeśli chcesz, od czasu do czasu, otrzymać ode mnie wiadomość o nowościach na blogu albo planowanych wydarzeniach, czy ciekawych projektach, to podaj proszę swojego maila.

    NAJNOWSZE

    UX umiera… Czy AI go ocali?

    30 stycznia, 2024

    Jak ChatGPT ułatwi Ci zdobycie zawodu UXUI Designer? — LIVE

    19 kwietnia, 2023

    Chris Badura. Dive to the Issues — LIVE

    19 kwietnia, 2023
    Facebook LinkedIn YouTube
    Facebook LinkedIn YouTube
    Chris Badura Personal Blog – Design, Research, LearningChris Badura Personal Blog – Design, Research, Learning
    subskrybuj
    • Design
      1. CZYTAJ
      2. SŁUCHAJ
      3. OGLĄDAJ
      4. wszystko

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Information Architecture – co musisz wiedzieć, zanim zaczniesz projektować?

      8 marca, 2023

      Product strategy – czym jest i dlaczego tak bardzo jest potrzebna w biznesie?

      1 lutego, 2023

      Strategia UX vs projektowanie UX

      18 stycznia, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Ludzie i interakcje ważniejsze od procesów i narzędzi czyli Agile Manifesto

      22 marca, 2023

      Information Architecture – co musisz wiedzieć, zanim zaczniesz projektować?

      8 marca, 2023

      Product strategy – czym jest i dlaczego tak bardzo jest potrzebna w biznesie?

      1 lutego, 2023
    • Research
      1. CZYTAJ
      2. SŁUCHAJ
      3. OGLĄDAJ
      4. wszystko

      Ludzie i interakcje ważniejsze od procesów i narzędzi czyli Agile Manifesto

      22 marca, 2023

      Właśnie ruszają fascynujące projekty naukowo-badawcze

      15 marca, 2023

      Value Proposition – sposób na niebanalną propozycję wartości

      1 marca, 2023

      Ewaluacja konkurencji, czyli jak wykrywać zagrożenia produktu na rynku

      22 lutego, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Ludzie i interakcje ważniejsze od procesów i narzędzi czyli Agile Manifesto

      22 marca, 2023

      Właśnie ruszają fascynujące projekty naukowo-badawcze

      15 marca, 2023

      Value Proposition – sposób na niebanalną propozycję wartości

      1 marca, 2023
    • Learning
      1. CZYTAJ
      2. SŁUCHAJ
      3. OGLĄDAJ
      4. wszystko

      Nauka zdalna – wyzwania i problemy

      24 stycznia, 2023

      Transformacja szkolnictwa wyższego

      4 czerwca, 2022

      Experiential blended learning jako gamechanger na rynku edukacji zdalnej

      26 lutego, 2022

      Czy blended learning to panaceum dla edukacji zdalnej?

      8 lutego, 2022

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Nauka zdalna – wyzwania i problemy

      24 stycznia, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Transformacja szkolnictwa wyższego

      4 czerwca, 2022
    • Offtopic
      1. CZYTAJ
      2. SŁUCHAJ
      3. OGLĄDAJ
      4. wszystko

      Czym jest strategia User Experience?

      15 lutego, 2023

      Team sprint planning – wyzwanie, któremu musimy sprostać

      8 lutego, 2023

      Rozwój technologiczny i jego wpływ na User Experience

      6 lipca, 2022

      Nowe technologie, a praca UX Designera

      13 maja, 2022

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022

      Chris Badura. Dive to the Issues — LIVE

      19 kwietnia, 2023

      Czym jest strategia User Experience?

      15 lutego, 2023

      Team sprint planning – wyzwanie, któremu musimy sprostać

      8 lutego, 2023

      Czytaj / Słuchaj / Oglądaj — o co w tym chodzi?

      2 listopada, 2022
    • Books
      • UXUI Design Zoptymalizowany
      • UI Design Zdekomponowany
      • UXUI Playing Cards
    • WOW!
      • AkademiaUXUI
      • Full Stack UXUI Designer
      • People Experience HUB
      • AI/UXUI Design Polska (grupa)
      • Digital Master Institute
      • Enjoy IT Magazine
      • Wetalk LIVE
      • UXUI Job
    Chris Badura Personal Blog – Design, Research, LearningChris Badura Personal Blog – Design, Research, Learning
    Strona główna » Sample Page » Wszystko, co musisz wiedzieć o Atomic Design
    Czytaj

    Wszystko, co musisz wiedzieć o Atomic Design

    By Chris Badura9 września, 20225 min. czytania

    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.

    Share. Facebook Twitter LinkedIn
    POPRZEDNI ARTYKUŁWstęp do teorii i badań psychologii społecznej
    KOLEJNY ARTYKUŁ Daily Shadow AI — czyli sztuczna inteligencja codziennego użytku wspierająca nasze działania, nie wychodząc z cienia

    POWIĄZANE

    Chris Badura. Dive to the Issues — LIVE

    19 kwietnia, 2023

    Ludzie i interakcje ważniejsze od procesów i narzędzi czyli Agile Manifesto

    22 marca, 2023

    Information Architecture – co musisz wiedzieć, zanim zaczniesz projektować?

    8 marca, 2023

    Product strategy – czym jest i dlaczego tak bardzo jest potrzebna w biznesie?

    1 lutego, 2023
    NAJNOWSZE
    Spotkania LIVE
    2 min. czytania

    UX umiera… Czy AI go ocali?

    30 stycznia, 2024

    Jak ChatGPT ułatwi Ci zdobycie zawodu UXUI Designer? — LIVE

    19 kwietnia, 2023

    Chris Badura. Dive to the Issues — LIVE

    19 kwietnia, 2023

    Ludzie i interakcje ważniejsze od procesów i narzędzi czyli Agile Manifesto

    22 marca, 2023
    AUTOR

    Chris Badura – UXUI Expert, Coach, Founder AkademiaUXUI, CEO, redaktor naczelny Product Design Magazine, autor podręcznika i ćwiczeń UXUI Design Zoptymalizowany.

    Czytaj więcej

    AkademiaUXUI
    info@uxui.edu.pl
    +48 534 331 332
    www.akademiauxui.pl

    BOOKS

    Chris Badura – UXUI Design Zoptymalizowany. Manual Book & Workshop Book

    Czytaj więcej

    Kurs Full Stack UXUI Designer
    https://www.youtube.com/watch?v=OSs3d6biWEk
    Facebook LinkedIn YouTube
    • Czytaj
    • Słuchaj
    • Oglądaj
    • |
    • O Autorze
    • Kontakt
    • Polityka Prywatności
    © 2025 ChrisBadura.com

    Type above and press Enter to search. Press Esc to cancel.