Wykorzystanie projektowania atomowego w nowoczesnym rozwoju sieci
Jeśli jest coś, czego nauczyłem się pracując dla firmy technologicznej, to właśnie w celu zbudowania strony internetowej - naprawdę niesamowitej, pięknej i dobrze działającej strony internetowej - wiele różnych talentów i elementów musi się spotkać i pracować w harmonii. Czasem może się wydawać, że pracujesz na Wieży Babel: jedna osoba przegląda paletę kodów szesnastkowych, faceci po drugiej stronie pokoju grzebią w alfabecie z różnymi akronimami kodowania, a kierownik konta jest obok mnie przy telefonie wyjaśniając, jak korzystać z systemu zarządzania treścią dla klienta, a jednocześnie staram się napisać ten artykuł prostym językiem angielskim.
Wszystkie te elementy wymagają sposobu, aby się zjednoczyć bez zagubienia w kakofonii, a istnieje stosunkowo nowa koncepcja, która naprawdę pomogła nam lepiej pracować jako zespół: projektanci, programiści, testerzy ... wszyscy.
To jest nazwane Projekt atomowy .
Czym jest Atomic Design?
Składniki Atomic Design pochodzą od projektanta Brad Frost Fascynacja chemią; atomy są najmniejszą jednostką, wiążącą się z cząsteczkami, które z kolei tworzą bardziej złożone organizmy, ostatecznie tworząc całą materię we wszechświecie.
Tak więc, jeśli jesteśmy na Międzynarodowej Stacji Kosmicznej, patrząc na cały projekt jako całość, oto ukończona strona główna dla najnowszego projektu, do którego zastosowaliśmy Atomic Design, Route 93 Pizza Mill :
Strona internetowa Route 93 Pizza składa się z wszystkich naszych elementów jako zunifikowanej, funkcjonalnej strony internetowej. Teraz, jeśli umieścimy witrynę pod mikroskopem, zobaczymy jej ziarniste komponenty:
Atomy: Poniżej znajdują się atomy na stronie internetowej Route 93 Pizza Mill's. Atomy są podstawowymi elementami budulcowymi, takimi jak znaczniki, etykiety formularzy, przyciski, paleta kolorów i czcionki. Chociaż atomy nie są bardzo przydatne same w sobie, są twoim wstępnym punktem odniesienia - początkiem twego stworzenia.
Cząsteczki: molekuły są miejscem, w którym atomy są uruchamiane - gdzie ukończony projekt strony internetowej zaczyna być odczuwalny. W cząsteczkach dla trasy 93 można zobaczyć paletę kolorów, czcionki i ikonografię łączącą się w pola formularzy, nakładki obrazów i przyciski. Są, jak mówi Frost, twoim narzędziem do "robienia jednej rzeczy i robienia tego dobrze".
Organizmy: zanim dotrzemy do organizmów, możemy stworzyć całą stopkę dla Route 93. Łączy ona wszystkie wymienione komponenty w funkcjonalną, estetyczną stronę internetową.
Inwentaryzacja interfejsu: teraz, gdy mamy wszystkie składniki, potrzebujemy namacalnego menu, w którym można je ułożyć w coś strawnego; dokument zawierający wszystkie powyższe elementy jako czytelny, użyteczny zasób - inwentarz interfejsu.
Podczas gdy niektóre organizacje nazywają to Biblioteką wzorców lub Przewodnikiem Stylów i używają Inwentaryzacji Interfejsu specjalnie w celu odniesienia się do audytu, który wykonali na istniejącej stronie internetowej, używamy terminu Zapas interfejsu dla naszych własnych projektów (a także audytów innych witryn) jako część ciągłego procesu oceny.
Ponieważ przepływ pracy w Atomowym Projekcie nieco przypomina dylemat typu kurczak lub jajko, inwentarz interfejsu zwykle przybiera formę nieco organicznie po utworzeniu strony głównej i jednej innej strony witryny, ale nie za długo po tym. Gdy te dwie początkowe strony nabierają kształtu, projektant zapewnia, że elementy na obu są spójne. Na wszystkich późniejszych stronach będą oni mogli pobierać dane z ekwipunku. W ten sposób powstaje kanoniczne źródło informacji o tym, jak należy projektować style wizualne w całym projekcie, dosłownym wspólnym języku, w prostym języku angielskim, kodów heksadecymalnych, stylów przycisków, szerokości wypełnień itp., Do których mogą się odnosić programiści - i cały zespół.
Projektując Inwentarykę interfejsu z procesem projektowania atomowego, możemy rozpocząć od podstawowych modułów i złożyć je w gotowe elementy. Proces ten poprawia wydajność, komunikację między członkami zespołu i generuje piękniejszą witrynę.
Co Atomic Design robi dla nas
Projekt Atomic pomaga nam odkryć solidne "prawdy" na temat projektu projektu, nad którym pracujemy, a także tworzy wspólny słownik pomiędzy jego aspektami artystycznymi i technicznymi. Zachęca to do stworzenia solidniejszego systemu, który poprawia UX i zapewnia metodologię, dzięki czemu projektanci mogą stosować się do wytycznych opracowanych przez producentów przy zachowaniu kreatywności.
Oczywiście, programiści kodują od podstaw, podczas gdy podejście artysty zwykle zaczyna się w bardziej mglistej formie, która następnie z czasem przekształca się w funkcjonalną stronę internetową. Atomic Design zachęca i wymaga od projektantów do pracy od podstaw, aby wszystkie elementy interfejsu były spójne i celowe na możliwie najniższym poziomie.
Ustanowienie tego wspólnego języka, reprezentowanego przez Inwentaryzację interfejsu, gwarantuje, że projektanci i programiści nie wymyślają nowych rozwiązań problemów, które zostały już rozwiązane. Na przykład, jeśli do projektu dodany zostanie nowy formularz kontaktowy, style potrzebne do utworzenia tej formy już istnieją i można je łatwo zastosować do zbudowania strony, uważając, że projektant nie musi nakładać dodatkowego wysiłku. Nie musi to oznaczać pracy projektanta, ale pozwala deweloperom szybciej budować rozwiązania, niż wymagać od projektanta makiety każdej strony - lub organizmu - najpierw. Po utworzeniu stron rola projektanta zostaje przesunięta do czegoś, co bardziej przypomina kierunek artystyczny. Te namacalne "prawdy" eliminują również konieczność używania projektanta jako arbitra. Pytania takie jak "czy wybór projektu jest zamierzony?" Lub "jaki kolor powinniśmy użyć w tym konkretnym elemencie?", A także zmiany w ostatniej chwili lub dodatki do strony są odbierane przez Inwentaryzację interfejsu.
Wspólny język prowadzi również do zapewnienia jakości. Podczas testowania strony internetowej pod kątem zarówno treści, jak i funkcjonalności, wyciągam Inventory interfejsu na ekranie jako przewodnik. Chociaż jest to przede wszystkim narzędzie projektanta, a po drugie narzędzie programistyczne, pozwala on każdemu z zespołu na uczestnictwo z przekonaniem w rozmowach na temat projektowania i spójności, ponieważ upewniamy się, że nasze witryny są nienaganne i gotowe do przekazania klientowi.
Wniosek
Aby zapewnić właściwą realizację projektu, zwłaszcza niektóre z większych, z którymi często się spotykamy, komunikacja ma kluczowe znaczenie; jeśli będziesz krzyczeć na siebie nawzajem różnymi pomysłami, nic z tego nie wyjdzie. Atomic Design pomaga działać jako tłumacz dla tych różnych działów i "języków", które towarzyszą im w utrzymaniu spójności w projektowaniu. Ustanawia modułowe zasoby dla zespołu, pozwalając na spójność i skutkuje skutecznym obejściem, mniejszą liczbą błędów i bardziej dopracowanym końcowym produktem.