DESIGN SYSTEM
Czym jest design system? Jak efektywnie z niego korzystać? Jakie jest jego miejsce w metodzie prowadzenia projektu "agile"?
DESIGN SYSTEM - JAK TO SIĘ JE?
Nierozłączne narzędzie UX/UI Designera
System z definicji jest to zbiór elementów bądź zasad lub połączenie owych rzeczy działających razem w zorganizowany i przewidywany sposób.
Ta definicja świetnie przedstawia czym jest system designu zakładając, iż elementy i zasady naszego systemu projektowania służą do kreowania wizerunku, ścieżek oraz interface’u użytkownika podczas tworzenia nowego produktu internetowego i szeroko pojętego jego wizerunku.
Każdy efektywny System Designu posiada takie grupy jak: kolorystyka, typografia, zasoby oraz komponenty. Pierwsze dwie grupy stanowią zbiory zasad na temat wykonywania kolorystyki oraz typografii, które będą powielane podczas projektowania w celu zachowania spójności wizerunku i kreowania rozpoznawalnych wzorów dla użytkownika.
Zasoby oraz komponenty są grupami elementów, które są wykorzystywane podczas tworzenia nowych funkcjonalności zapewniając użytkownikowi zbiór znanych narzędzi, zdjęć, logotypów, tagów, pinów itp. powielanych w obrębie całego projektu. Grupy zasobów i komponentów wraz z rozwojem aplikacji są aktualizowane i powiększane, gdzie nowe elementy powstałe na podstawie istniejących zapewnią spójność wizerunku, a ich działanie jest łatwo rozpoznawalne dla klienta nawet użyte w nowym kontekście czy środowisku.
W ostatnich czasach gdzie projektowanie i tworzenie serwisów internetowych stało się bardziej uporządkowane, projektanci UX i UI uzyskali własne odrębne narzędzia pozwalające nie tylko na tworzenie rozbudowanych grafik dedykowanych dla weba ale również rozwiązania do tworzenia systemów designu oraz zarządzania ścieżkami, historiami i przepływem użytkownika. Nowe rozwiązania pozwalają nie tylko na stworzenie interaktywnych makiet produktowych ale i zbiory zasad i elementów do wykorzystania na łamach kreowanego produktu. Dzisiaj każde szanujące się oprogramowanie dla projektantów posiada wbudowane narzędzia do tworzenia systemów designu, jak również gotowe biblioteki powszechnie znanych systemów jak “Material Design” od Google czy “iOS” od firmy Apple. Uxpin, Skatch, Adobe XD czy Figma to jedynie czubek góry oprogramowania dla projektantów wspierające usystematyzowane tworzenie.
ELEMENTY - CO SKŁADA SIĘ NA SYSTEM?
Kolorystyka
Jak już wcześniej wspomnieliśmy jedną z grup zasad systemu jest określenie palety kolorystycznej wykorzystywanej w projekcie tworzonego produktu. Stworzenie biblioteki kolorów oraz gradientów wraz z krótkim opisem ich wykorzystania pozwoli podczas pracy na szybkie odnalezienie wartości oraz wykluczy ciągłe sięganie po próbnik. w efekcie przyspieszy to nasza pracę jak również pozwoli na uniknięcie błędów podczas implementacji projektu przez deweloperów.
Kolory główne (Primary colors) – tym mianem określane są kolory wybijające się na łamach projektu. Ich użycia ma oznaczać priorytet w ścieżce, ważne informację czy specjalne miejsca gdzie chcemy przyciągnąć wzrok użytkownika. Nierzadko w rozbudowanych projektach możemy mieć do czynienia z kilkoma kolorami bądź gradientami o wysokim priorytecie, często służącym własnemu wewnętrznemu podziałowi przypisanemu do konkretnej funkcji lub działu produktu.
Kolory pomocnicze (Secondary colors) – mają swoje użycie przy funkcjach o mniejszym priorytecie, gdzie dalej mają zapewniać widoczną różnice, wybijającą dany element z tłoku tekstu, inputów i grafik ale stanowią one jedynie pomocnicza funkcję lub alternatywną ścieżkę. Kolory pomocnicze często wykorzystują bardziej stonowaną barwę, która nie przyćmiewa informacji za którą idzie użycie kolorów głównych.
Tworząc bibliotekę kolorystyczną, czy to opartą na istniejących zbiorach jak paleta “Material Design”, czy grupując własny zestaw kolorów, należy pamiętać aby zachować konieczny umiar jednocześnie zapewnić alternatywę na łamach projektowanego dzieła. Innymi słowy każda biblioteka musi być na tyle rozbudowana na ile rozbudowany jest projekt nad którym pracujecie. Nie możemy dopuścić aby niedosyt kolorystyczny zbagatelizował w odbiorze głównej funkcji obranego koloru.
Typografia
Kolejnym zbiorem jest typografia, czyli określenie zasad dotyczących tekstu i jego przedstawienia na łamach produktu. Dobór odpowiedniej czcionki bądź jej rodziny powinien być ukierunkowany typem stylistyki obranej podczas badania nad grupą docelową. Ważne aby kierować się zasadą umiaru, ograniczając się do maksymalnie 3 rodzajów czcionek na publikację (w tym przypadku na system). Z doświadczenia wiem polecam ograniczenie się do 2 czcionek w pełnym zakresie rozpiętości ich wagi (text-weight). Nie zawsze czcionka mająca wysoką wartość estetyczną wykorzystana w banerach reklamowych na stronie głównej produktu będzie dobrze się sprawdzać jako tytuły sekcji formularza bądź czcionka użyta w tekstach opisowych.
Warto zastosować odpowiednie zasady doboru czcionki. Zasada kontrastu i wysokiej czytelności zastosowana w stosunku do tytułów w celu szybkiego odnalezienia ważnych informacji. Zasada zmniejszenia czytelności długich tekstów w celu zwiększenia zapamiętywania treści. Zasada priorytetyzacji i wartościowania teksty. Czy zasada konsekwencji użycia stylów.
Każdy web designer znający prawidła swojego zawodu zna wartościowy podział tytułów wywodzący się z zasad HTMLa i CSSu i sposób odczytywania ich wartości przez przeglądarki. Ponadto ma świadomość pozostałych znaczników i ich atrybutów dotyczących manipulacji tekstem. Warto wykorzystać tę wiedzę tworząc system designu dzieląc odpowiednio style na tytuły, hiperłącza, tekst zwykły itp. Taki podział nie tylko pozwoli na świadome użycie czcionek podczas projektowania ale również znacznie pomoże w pracy podczas implementacji styli.
Zasoby
Magiczna nazwa grupy zasoby to nic innego jak wszelkiego rodzaju grafiki odpowiadające za wizerunek marki lub specjalnie stworzone elementy graficzne wykorzystywane w projekcie niedostępne jako komponenty lub we wbudowanych bibliotekach. Mam tutaj na myśli wszelkiego rodzaju logotypy i znaki firmowe, zdjęcia wielokrotnie używane w kreowaniu wizerunku marki takie jak zdjęcia produktów zewnętrznych sprzężonych z systemem, spersonalizowana ikonografia produktu czy reklamy wewnętrzne używany do autopromocji.
Ważną kwestią takiej biblioteki jest odpowiedni opis materiałów aby projektant/zespół projektantów znał zasady stosowania znaków firmowych oraz zdjęć. Kolejną istotną kwestią jest strukturyzacja aby zapewnić szybkie odnalezienie potrzebnych materiałów.
Komponenty
Kolejną grupą elementów są komponenty, czyli spersonalizowane i zgrupowane elementy graficzne kreowanego produktu. Omówienie tej grupy zostawiłem na koniec gdyż różni się ona od pozostałych i często stanowi największą wartość w pracy z zespole projektowym oraz podczas etapu rozwoju produktu.
Komponent możesz utworzyć z każdego elementu stworzonego w projekcie. Jest elementem powiązanym dzięki czemu niezależnie od ilości jego powielenia, podczas edycji, korzystając z narzędzia synchronizacji zostanie jego wersja zaktualizowana na łamach całego projektu. Oczywiście komponent może zostać rozłożony czy odseparowany od innych ale jego główną zaletą jest synchronizacja. Często komponenty są wielokrotnie złożone z innych komponentów i aby nie zagubić się w ich połączeniach odpowiednia struktura biblioteki jest równie ważna jak ich wielowarstwowość. Tworzenie bardziej skomplikowanych komponentów z ich mniejszych braci daje niesamowitą szybkość w edycji czy ich powielaniu.
Dobrze stworzona biblioteka komponentów potrafi znacznie skrócić czas projektowania oraz zapewnić spójność tworzonego produktu.
DOBRE PRAKTYKI - ZALETY SPRAWNIE ZARZĄDZANEGO SYSTEMU?
Konsekwencja
Konsekwentne korzystanie z systemu projektowania zapewni Ci spójny wizerunek na łamach całego projektu. Wszystkie wcześniej opracowane style zaczną pracować jak dobrze naoliwiona maszyna przyspieszając pracę nad tworzeniem nowych sekcji, podstron czy funkcjonalności. Na etapie projektowania interface’u wszystkie elementy systemu znajdą swoje wielokrotne zastosowanie, a ty nie będziesz musiał się zastanawiać jaki użyć kolor przycisku ścieżki, jakiej wielkości ma być tytuł w opisie funkcjonalności czy jak mają wyglądać pola wprowadzania danych w spersonalizowanym formularzu nowej usługi na łamach produktu.
Porządek w szafie
Zadbaj o przejrzystą strukturę Twojego systemu. Pamiętaj aby każdy element był podpisany w odpowiedni sposób świadczący o jego przeznaczeniu. Dobre opisy oraz grupowanie elementów zapewni Ci szybki dostęp do potrzebnych rzeczy bez zbędnego czasu na przekopanie się przez całą bibliotekę. System ma stanowić efektywne narzędzie aby czasy przeszukiwania podstron projektu w celu odnalezienia odpowiednich stylów do skopiowania odeszły w zapomnienie albo pozostały w formie sentymentalnych wspomnień.
Zagnieżdżanie komponentów
Wykorzystuj w pełni dobrodziejstwa komponentów i zadbaj o poprawne zagnieżdżenie. Tworząc nowy element sprawdź czy nie możesz wykorzystać w nim już stworzonego komponentu lub zbudować go z mniejszych. Mając na celu zachowanie spójności w projekcie będziesz często zmuszony do edycji nawet małych rzeczy, warto móc mieć możliwość szybkiej synchronizacji niż przeszukiwania całego produktu w celu re-edycji podobnych elementów.
Poszerzanie biblioteki
Staraj się wykorzystywać obrane style, ale nie bój się dodawać nowych elementów jeżeli zauważysz braki w systemie. Ponadto tworząc nowe funkcjonalności, twórz nowe komponenty w oparciu o już istniejące. Nie tylko poszerzysz bibliotekę o nowe rzeczy do wykorzystania w przyszłości ale zapewni Ci to powtarzalność na każdym etapie prac. Takie praktyki w konsekwencji będą prowadzić do łatwiejszego zrozumienia przez użytkownika twojego produktu, przyspieszy pracę w jego środowisku i zapewni mu pozytywne doświadczenie z jego użytkowania.
Dodawaj wszystkie nowe elementy kto wie gdzie mogą się przydać lub jak wyewoluować
EFEKTYWNE DZIAŁANIE - PRAKTYCZNE WYKORZYSTANIE SYSTEMU W METODYCE ZWINNOŚCI.
Projektowanie nowych funkcjonalności
Powyższa część tego artykułu dla większości dała już spory pogląd jak pozytywnie wpływa design system na podniesienie efektywności pracy oraz wizualna konsekwencję w tworzeniu rozbudowanego produktu.
Każda zwinna metodyka wymaga od zespołu elastyczności i możliwości szybkiej zmiany kierunku rozwoju produktu. System projektowania dzięki rozbudowanym biblioteką i elastyczności jaką daje tworzenie i edycja komponentów jest idealnym rozwiązaniem.
Projektując nowe funkcjonalności warto wykorzystać istniejące elementy i oprzeć ich interface na wcześniej stworzonych elementach. Zapewnia to szybkie wdrożenie użytkownika do poprawnej obsługi nowych funkcji już od pierwszego użycia.
Jeżeli nowa funkcja wymaga stworzenia całkowicie nowych elementów, łatwo możesz powielić istniejący komponent i przerobić go do nowych potrzeb pozostawiając jego wizualny charakter zgodny z całym produktem.
Praca zespołowa
Działając na łamach jednego Systemu wspieranego przez odpowiednie oprogramowanie do projektowania, praca w zespole stanie się łatwiejsza dla Ciebie i Twoich współpracowników. Zasady wizualne jakimi kieruje się projekt będą łatwo dostępne dla każdego projektanta, a wszelkiego rodzaju sugestie i dyskusje w odniesieniu do stylów i ich zmian będą mogły być na bieżąco korygowane z natychmiastowym efektem.
Początek pracy projektowej w zespole często obarczony jest niespójnością wywołaną różną “wizją” każdego z designerów. Łączona biblioteka pozwala już w trakcie pracy na korzystanie z elementów stworzonych przez inną osobę. Choć wykorzystywanie nie zatwierdzonych elementów często wiąże się z późniejszymi zmianami, to dzięki komponentom i możliwości synchronizacji cały żmudny proces zmian i przerzucania się zatwierdzonymi elementami ogranicza się do pracy jednej osoby i synchronizacji.
Również w zaawansowanym etapie prac pozyskanie zatwierdzonych stylów i elementów do stworzenia nowych funkcjonalności, wiązałoby się ze stratą czasu, który musisz poświęcić na przejrzenie plików roboczych swoich kolegów w celu ich odnalezienia. W tym przypadku dobrze opisana i posortowana biblioteka czyni pracę niezmiernie łatwą ale i efektywną.
Podobnie ma się kwestia wdrożenia nowych pracowników. Bez tygodni spędzonych nad aplikacją i poznaniem każdego jej zakamarka pod kątem wizualnym i funkcjonalnym bardzo ciężko, a niekiedy wręcz niemożliwe jest dołączyć do rutynowej pracy projektowej. Nawet jeżeli pracownik będzie dawać z siebie wszystko zawsze znajdzie się szczegół, który został już wcześniej wykonany, a który został przez niego przeoczony. Takich błędów można prosto uniknąć jeżeli w całym produkcie konsekwentnie będzie używany stworzony przez zespół system. A nawet nowa osoba będzie na jego podstawie w stanie wykonać w pełni akceptowalny projekt pod dostarczone zadanie czy historię.
Re-design aplikacji
Każdy, niezależnie jak dobrze zaprojektowany produkt z czasem wizualnie zaczyna odstawać od aktualnych trendów. W takich przypadkach cały zespół projektowy staje przed ciężkim zadaniem wdrożenia nowego wyglądu. Często ten proces jest na tyle trudny, a niekiedy i niemożliwy, że inwestor skłania się do stworzenia od podstaw nowego produktu na bazie funkcjonalności poprzedniego.
W przypadku korzystania z systemu podmiany wymagają jedynie zasady i komponenty, które jak już wiemy zaktualizują się same,a cały żmudny proces zostanie zamknięty w “jednym sprincie”.
Wdrożenie tak wielkiej zmiany oraz wpływ jej na użytkowników to temat na inny artykuł ale na płaszczyźnie projektowej oszczędność czasu takiego rozwiązania jest ogromna.
DESIGN SYSTEM - PODSUMOWANIE.
Wielkość projektu nie ma znaczenia
Pierwsze systemy projektowania tworzone bez odpowiednich narzędzi były niedoskonałe i mimo potencjału jaki sobą reprezentowały dopiero w połączeniu z dedykowanymi systemami do projektowania produktów internetowych nabrały blasku.
Design System dla aplikacji jest tym, czym Brand Book dla marki. Już po otwarciu pierwszej strony projektant wie jak potężne narzędzie otrzymał w swoje ręce i dziękuje, osobie która przyłożyła się do jego stworzenia. Dlatego niezależnie od wielkości serwisu jaki przyszło Ci projektować, bądź tym kimś, który ułatwia pracę Tobie lub Twojemu zespołowi.
Dziś rozpoczęcie prac projektowych bez wsparcia jakie daje dobrze wykonany system i narzędzi w nim zawartych wydaje mi się drogą przez mękę. Argumentów za stworzeniem własnego systemu na łamach kreowanego projektu jest wiele. Powyżej przytoczyłem kilka najważniejszych aby przedstawić potencjał jaki drzemie w tej metodzie oraz skłonić osoby, dla których to rozwiązanie jest nowe do eksploracji rozwiązań jakie za tym płyną.
Rafał Chudoba
AUTOR ARTYKUŁU
Product Designer z wieloletnim doświadczeniem w branży IT. Od kilku lat wyspecjalizowany w projektowaniu produktów webowych.