Projektowanie UI - atomic design

Dokładne poznanie: branża, rynek, tematyka, użytkownicy tzw. grup docelowe, do których chcemy dotrzeć z przekazem marketingowym;

Jasny plan działania: przedstawimy szczegółowy harmonogram realizacji projektu, w którym rozpisujemy obowiązki Zamawiającego i wykonawcy;

Warunki współpracy: zawsze staramy się przedstawić zrozumiałe i logiczny sposób wyliczenia kosztu realizacji projektu. Pomimo umowy na stałą kwotę za realizację projektu tzw. fixed price, przedstawimy algorytm wyliczania cen projektów co w przypadku poszerzenia zakresu prac zawsze pozwala Klientowi kontrolować budżet projektu.

Elastyczność i terminowość: szczególnie w dużych projektach jak najczęściej realizujemy w agencji CG2 pojawiają się zmiany w zakresie projektu. Wynikają one z odkrywania nowych potrzeb klienta lub chęci powierzenia nam kolejnych usług graficznych, którymi mamy się zająć.

Analiza i badania

Przed rozpoczęciem projektowania, ważne jest zrozumienie, czego oczekuje klient, jakie są cele projektu i kto jest docelową grupą odbiorców. Te informacje możemy pozyskać za pomocą rożnych metod np. analizując konkurencję oraz aktualne trendy w branży. Wiedza ta pomaga nam lepiej zrozumieć, jakie rozwiązania wizualne są efektywne i pożądane.

Planowanie i koncepcja

Brief projektowy to podstawa. Tworzenie dokumentu, który zawiera wszystkie istotne informacje o projekcie, takie jak cele, wymagania, ograniczenia i harmonogram pozwala nam zorganizować odpowiedni scenariusz pracy. Aby pozyskać niezbędne informacje często opracowujemy moodboard, w którym zbieramy inspiracje, tworzymy tablicę nastrojów, która pomaga wizualizować pomysły i stylistykę projektu. Przygotowanie wstępnych szkiców i schematów, które pozwalają na lepsze planowanie ma również duże znaczenie.

Projektowanie i prototypownie

Podstawowe składowe projektu, które stanową fundament opracowania design systemu to np. wybór palety kolorów zgodnej z brandingiem marki, typografia czyli wybór fontów, projektowanie elementów graficznych, takich jak ikony, ilustracje, zdjęcia i inne elementy wizualne. Na ich podstawie rozpoczynamy projektowanie zgodne z metodologią atomic design.

Testowanie i walidacja

Sprawdzanie, jak użytkownicy postrzegają przygotowane projekty to jeden z etapów, który pozwala nam znacząco poszerzyć horyzonty i poznać inny sposób myślenia, interpretacji i komunikacji. Na podstawie testów wprowadzamy kluczowe zmiany, które znacząco podnoszą ich jakość. Ważną wiedzą jaką pozyskujemy w tym obszarze realizacji projektu jest feedback od klienta, który często zna lepiej swoich klientów i ich potrzeby.

Wdrożenie

W przypadku projektów cyfrowych, takich jak strony internetowe czy aplikacje, wdrożenie produktu w postaci design systemu czyli przekazanie go zespołowi developerów kończy najbardziej intensywny etap współpracy klienta z projektantami.

Monitorowanie i aktualizacja

Po wdrożeniu projektu, monitorowanie jego skuteczności i zbieranie danych zwrotnych oraz wprowadzenie ewentualnych zmian i aktualizacji w celu poprawy efektywności projektu kończy etap projektowania.
 

Atomy 

czyli najmniejsze składowe systemu, których nie możemy już rozłożyć na mniejsze części. Przykładem atomów mogą być ikony, paragraf <P>, nagłówki <h1-h6> lub inne składowe HTML .

Molekuły 

zwane także cząsteczkami to grupy kilku atomów, które mogą już samodzielnie pełnić określoną funkcje. Dobrym przykładem jest zestaw atomów tworzących cząsteczkę postaci przycisku z ikoną.

Organizmy 

są to zestawy składające się z molekuł, atomów jak również innych mniejszych organizmów. Logicznie połączone ze sobą składowe w organizm muszą pełnić określoną funkcję w widoku. Prostym przykładem organizmu w atomic design jest formularz na stronie, który zawiera atomy takie jak etykiety <label>, molekuły jak input z ikoną itd.

Szablony 

to czwarty poziom podziału składowych interfejsu w metodologi atomic design, który prezentuje wykorzystanie organizmów w finalnej wersji strony. Szablony wypełnione zostają treściami, których objętość i rodzaj odpowiada gotowym treścią przygotowanym przez copywritera.

Strony

to ostatni etap budowy interfejsu zgodnie z atomic design. Strony są to gotowe widoki, które odwzorowują finalne obszary projektowanej strony internetowej.

Bardzo wysoka spójność graficzna wszystkich obszarów systemu informatycznego co w szczególności w skalowalnych systemach ma ogromne znaczenie.

Łatwość rozbudowy, przebudowy i nanoszenia zmian w całym interfejsie.

Duża pomoc w komunikacji pomiędzy programistami, a projektantami. Programiści nie mogą wykraczać poza design system, który został opracowany przez projektantów co pozwala zachować linię graficzną we wszystkich obszarach front-endu.

Duże oszczędności kodu co przekłada się także na oszczędności w kosztach projektu. Zastosowanie atomic design wraz z budową stron w Drupalu daje bardzo dużą elastyczność w tworzeniu rozbudowanych widoków stron.

Dodatkowa pomoc w tworzeniu dokumentacji projektowej, która staje się bardziej zrozumiała.