Atomowy projekt i szkic — przewodnik po usprawnianiu przepływu pracy

Szkic i Atomic Design to potężny zestaw narzędzi i metodologii, których projektanci mogą używać do tworzenia systemów projektowania, które pozwalają na standaryzację i wydajniejszy przepływ pracy.

Systemy projektowania: podkład

System projektowania to zestaw komponentów i wytycznych wielokrotnego użytku, które pomagają zespołom zjednoczyć się wokół wspólnego języka podczas tworzenia i życia produktu.

W większości przypadków systemy projektowe składają się z przewodnika stylu i biblioteki komponentów. Mogą również zawierać elementy, takie jak głos i ton, a także wartości marki. Celem posiadania systemu projektowania jest stworzenie zestawu standardów, które działają jako pojedyncze źródło prawdy dla produktu lub marki.

Material Design firmy Google to przykład ustrukturyzowanego systemu projektowania interfejsu użytkownika. Material Design został wprowadzony w 2014 roku jako sposób na projektowanie i tworzenie spójnych aplikacji na Androida.

Innym przykładem jest Głos i ton Mailchimpa. Opisuje, że głos jest zawsze taki sam, ale ton zmienia się w zależności od kontekstu. Świadomość tego pomaga wzmocnić treść i nadać marce osobowość.

Chociaż istnieje wiele różnych metod, których można użyć do stworzenia systemu projektowania, dobrym pomysłem jest wybranie frameworka, który pozwoli zespołowi ujednolicić się wokół wspólnego języka i zestawu standardów. Atomic Design to świetny przykład frameworka, który osiąga te dwa cele.

Projektowanie atomowe: systemy projektowania budynków

Atomic Design, metodologia wprowadzona przez Brada Frosta w 2013 roku, opiera się na założeniu, że każdy system projektowania można zdefiniować jako szereg współistniejących elementów konstrukcyjnych.

Oto krótki przegląd komponentów Atomic Design:

• Atomy . Przedstawiają podstawowe elementy składowe systemu projektowania. Przykładem jest przycisk lub styl tekstu.
• Cząsteczki . Grupa atomów pracujących razem jako całość. Cząsteczki to namacalne elementy interfejsu użytkownika. Na przykład przycisk i pole tekstowe można pogrupować w celu utworzenia formularza wyszukiwania.
• Organizmy . Atomy i cząsteczki współpracujące w złożonej strukturze. Pole wyszukiwania zgrupowane z paskiem nawigacyjnym tworzy organizm nagłówka na stronie internetowej.
• Szablony. Obiekty na poziomie strony umieszczające komponenty w układzie definiującym strukturę treści. Na przykład pobranie organizmu nagłówka i umieszczenie go w szablonie strony głównej.
• Strony. Instancje szablonów, które reprezentują produkt końcowy.

„Mamy za zadanie tworzyć interfejsy dla większej liczby użytkowników w większej liczbie kontekstów, korzystając z większej liczby przeglądarek na większej liczbie urządzeń, z większymi rozmiarami ekranu i większymi możliwościami niż kiedykolwiek wcześniej. To naprawdę zniechęcające zadanie. Na szczęście systemy projektowania są tutaj, aby pomóc” — Brad Frost jako wprowadzenie do projektowania atomowego i systemów projektowania.

Korzystanie z Atomic Design do tworzenia i utrzymywania systemu projektowania pomoże projektantom pracować wydajniej i lepiej komunikować się w ich zespołach. Istnieje mnóstwo narzędzi i metod tworzenia i utrzymywania systemów projektowych, ale często najlepsze narzędzia to te, które znamy najlepiej.

Jak korzystać z projektowania atomowego ze szkicem

Aby opracować system projektowania przy użyciu Atomic Design, doskonałym (i już znanym) narzędziem jest Sketch. Zapewnia nam płótno do tworzenia atomów, cząsteczek i organizmów: elementów potrzebnych do zdefiniowania rdzenia systemu projektowego.

Tworzenie atomów

Zaczynamy od stworzenia trzech typów atomów w programie Sketch: symboli, stylów warstw i stylów tekstu.

Symbolika. Symbole to nic innego jak komponenty wielokrotnego użytku. Są one definiowane raz, ponieważ można je tworzyć w całym produkcie. Na przykład symbol strzałki (atom) można zdefiniować za pomocą właściwości, takich jak kolor obramowania, rozmiar itp. Możemy następnie ponownie użyć tego symbolu bez konieczności ponownego tworzenia go za każdym razem.

Style warstw . Style warstw to elementy stylizacji wizualnej wielokrotnego użytku, które pozostają spójne w każdej warstwie. Na przykład kolor wypełnienia wcześniej zdefiniowanej strzałki.

Style tekstu. Style tekstu, podobnie jak style warstw, są elementami wielokrotnego użytku, które zapewniają spójność między podobnymi obiektami tekstowymi. Na przykład określenie rozmiaru i koloru czcionki elementu h1. Działa podobnie do stylów tekstu w Dokumentach Google lub Microsoft Word.

Gdy definiujemy symbole, style warstw i style tekstu, Sketch może podzielić je na hierarchiczne kategorie w swoich symbolach i menu stylów tekstu za pomocą „/” (ukośnik). Przestrzeganie konwencji nazewnictwa i posiadanie dobrze zdefiniowanego zestawu kategorii głównych zapewni zorganizowaną strukturę plików, zmniejszając zamieszanie i niespójności.

Oto kilka sposobów tworzenia hierarchicznych kategorii symboli, tekstu i stylów warstw w programie Sketch.

Możemy reprezentować symbole przy użyciu następującej sugerowanej konwencji nazewnictwa w Atoms/ :

• Aktywa
• guziki
• Kontrola wejścia
• Zdjęcia
• Nawigacja
• Informacja

Nie będziemy konwertować stylów warstw na symbole, więc wystarczy zidentyfikować je na podstawie ich grupy semantycznej. Ponownie, używając Atoms /:

• Wypełnienia
• Granice
• Cienie
• Gradienty

Podobnie jak w przypadku stylów warstw, oto jak możemy tworzyć style tekstu w Atomach /:

• Nagłówki
• Ciało
• Podpis
• Etykiety
• Spinki do mankietów

Zunifikowany język projektowania nie powinien być tylko zbiorem statycznych reguł i pojedynczych atomów; powinien to być ewoluujący ekosystem. — Airbnb o budowaniu języka wizualnego.

Tworzenie cząsteczek

Atomy definiują podstawową część wytycznych projektowych produktu, ale same w sobie nie są do końca użyteczne. Aby uzyskać pewną funkcjonalność, łączymy atomy i tworzymy cząsteczki.

Połączenie etykiety (atom) z przyciskiem wprowadzania (atom) w celu utworzenia funkcji wyszukiwania jest dobrym przykładem powszechnie używanego elementu cząsteczki.

Słowo ostrzeżenia, ponieważ może tu być trochę szarej strefy. Przycisk na poziomie kodu jest uważany za atom, ale przycisk na poziomie projektu jest uważany za cząsteczkę, ponieważ grupujemy styl warstwy i atom stylu tekstu. Aby uniknąć nieporozumień, dobrym pomysłem jest myślenie tylko o elementach na poziomie kodu.

Główne kategorie, które wchodzą w skład Molekuły/ to:

• Informacja
• Nawigacja
• Kontrola wejścia

Ponieważ cząsteczki zaczną kształtować nasze produkty w sposób interaktywny, dobrym pomysłem jest dalsze zdefiniowanie powyższych kategorii. W tym przypadku zdefiniujemy zestaw podkategorii reprezentujący bibliotekę wzorców:

• Listy rozwijane
• Przełącza
• Suwaki
• Karty
• Paginacja
• Wskaźniki postępu
• Pola daty
• Pola tekstowe
• Pola wyboru
• Przyciski radiowe
• Moduły

Tworzenie organizmów

Organizmy to grupy atomów i cząsteczek. Mogą być również częścią innych organizmów.

W przeciwieństwie do atomów i molekuł, organizmy nie mają abstrakcyjnej inkluzji w projektowanych przez nas produktach; są to konkretne komponenty wielokrotnego użytku, które można łatwo zidentyfikować za pomocą określonych działań. Ich struktura jest bardziej złożona niż atom czy cząsteczka.

Jeśli wcześniej zdefiniowane pole wyszukiwania jest zgrupowane z innymi komponentami, takimi jak pasek nawigacji (cząsteczka) i logo (atom), tworzony jest organizm. Przykładem jest pasek nawigacyjny lub kalendarz.

Organizmy, podobnie jak cząsteczki, mogą pasować do tych samych kategorii i podkategorii:

Oto główne kategorie, które stworzymy dla organizmów/:

• Informacja
• Nawigacja
• Kontrola wejścia

Podobnie jak w przypadku cząsteczek, stworzymy również podkategorie dla organizmów:

• Listy rozwijane
• Przełącza
• Suwaki
• Karty
• Paginacja
• Wskaźniki postępu
• Pola daty

Do tego momentu większość interfejsu użytkownika została już zaprojektowana, więc teraz wystarczy wywołanie instancji naszych komponentów, gdy są one potrzebne do projektu.

Każdy z tych komponentów można łatwo zlokalizować według ich grup semantycznych, wyszukując je bezpośrednio za pomocą panelu wstawiania na pasku narzędzi Szkic, gdzie znajdziemy dobrze zorganizowany zestaw 3 głównych kategorii, lub za pomocą wtyczki, takiej jak Biegacz dla szkicu.

Runner for Sketch optymalizuje przepływ pracy projektanta, udostępniając zestaw poleceń klawiaturowych, których mogą używać zamiast szukać rzeczy w niekończących się menu. Na przykład mogą wpisać słowo wstaw , nacisnąć klawisz tabulatora i poszukać potrzebnych komponentów.

Po wpisaniu atoms rozwijana lista pokaże nam wszystkie elementy należące do tej kategorii. Jeśli atomy i molekuły mają wspólne kategorie, widoczne będą tylko atomy, a wszystkie molekuły zostaną zignorowane.

Zawijanie tego

Sketch i Atomic Design to potężny zestaw narzędzi, których można używać razem w celu usprawnienia procesów projektowych i ułatwienia efektywnej struktury systemu projektowania.

Wykorzystując koncepcję atomów , cząsteczek i organizmów jako podstawy komponentów, Atomic Design pomaga projektantom ujednolicić wspólny język podczas tworzenia i życia produktu.

Projektanci mogą używać narzędzi, takich jak Sketch, do implementacji Atomic Design, zapewniając bardziej wydajny przepływ pracy i zestaw standardów, które są akceptowane przez wszystkich członków zespołu projektowego, w tym programistów, na końcowych etapach projektu.

Dalsza lektura na blogu Toptal Design:

• Jak zbudować efektywne ramy projektowe
• Zrozumienie systemów i wzorców projektowych
• Jak utworzyć przewodnik po stylach szkicu, bibliotekę i zestaw interfejsu użytkownika
• Dlaczego startupy potrzebują przewodnika po stylach
• Wtyczka Zeplin Sketch — pomost pomiędzy projektowaniem a inżynierią