Design systems: podejście praktyczne

W ciągu dwóch lat pojęcie design systems zawojowało przestrzeń związaną z tzw. product design. Setki tekstów tłumaczących temat, konkretne przykłady i wdrożenia (Atlassian, IBM, Google, Shopify) spowodowały, że podejście to stało się dla wielu świętym Graalem, rozwiązującym wszystkie problemy związane z designem. Tymczasem rzeczywistość i praktyczne podejście są trochę inne.

W tym artykule przyjrzę się praktycznej stronie design systemu. Zajmę się definicjami i wpływem na całość procesu, spróbuję ująć ten temat w bardziej przyziemnej perspektywie.

Oczywiście, ten krótki tekst nie wyczerpuje zagadnienia, jest jedynie zarysowaniem kilku problemów wiążących się z design systems.

Przykłady rozbudowanych i działających design systemów.
Przykłady rozbudowanych i działających design systemów.

Design system i jego rola w procesie tworzenia produktu

Jednym z celów designu jest zapewnienie jak najlepszego produktu. Zagwarantuje on użytkownikowi satysfakcjonujące doświadczenie oraz przyniesie wymierne, biznesowe korzyści właścicielowi. Aby osiągnąć ten cel niezbędne jest zastosowanie właściwej metody projektowania i wdrożenia. Metoda ta pozwala efektywnie połączyć wszystkie etapy produkcji produktu (od koncepcji po końcowe testy i optymalizację).

Design system jest narzędziem służącym do budowania spójnego i szybkiego do wdrożenia produktu. Jest także częścią ważną częścią całego procesu.

Czym jest design system

Praktycznie od początku pracy z interfejsami natykano się na problem zapewnienia spójności oraz odpowiedniej komunikacji pomiędzy projektantami a zespołem wdrożeniowym, czy mówiąc szerzej, wszystkimi właścicielami procesu. Rozrastający się projekt, często długoterminowy, z biegiem czasu ulegał entropii, owocując niespójnościami lub dublowaniem istniejących rozwiązań. Problemów tych nie rozwiązywało tworzenie statycznych styleguidów (niezrozumiałych lub niepraktycznych) czy permanentne konsultacje. Dyscyplina budżetowa procesu projektowego odrzucała wszystko, co nadmiarowe.

Tą lukę próbuje wypełnić włączone w proces zaprojektowanie design systemu.

Próba definicji

Design system to dynamiczny zbiór wytycznych umożliwiających spójne projektowanie i wdrożenie produktu. Wytyczne obejmują elementy brandingu, wyglądu interfejsu oraz reagowania na zachowania użytkownika. Poprawnie skonstruowany system ułatwia też współpracę na linii projektant (UX, UI) – developer oraz radykalnie przyspiesza pracę. Na poziomie praktycznym to zbiór komponentów oraz zasad ich stosowania. Nie zawsze taki zbiór musi powstać przed wdrożeniem produktu. W przypadku platformy b2b e-commerce  dla Inter Cars, realizacji e-point SA, prace nad systemem ruszyły 8 miesięcy po uruchomieniu sklepu B2B. Zaznaczyć też trzeba, że design system nie jest produktem jednorazowym: to rodzaj narzędzia, żyjącego razem z projektem i ewoluującego wraz z nim.

Mówiąc o systemie można rozróżnić różne poziomy skomplikowania. W najprostszym ujęciu to ogólne wytyczne i podstawowe elementy interfejsu. Idąc dalej, design system zapewnia pełne pokrycie elementów, z których zbudowany jest produkt. Zaawansowane opracowania pokazują integrację z kodem, prezentując bibliotekę elementów graficznych i gotowe do zastosowania code snippets. Design system może być dodatkowo połączony z elementami brandingu i identyfikacji wizualnej, języka, komunikacji, wizji, etc.

Struktura design systemu rozpowszechniona przez Brada Frosta w książce "Atomic Design"
Struktura design systemu rozpowszechniona przez Brada Frosta w książce "Atomic Design"

Uogólniając, jest to język, dzięki któremu możemy budować produkty; gwarantujący spójność, płynne projektowanie i wdrożenie, a przez to dobre doświadczenie użytkownika produktu

Rola design system​

Właściwie zaprojektowany i stosowany design system umożliwia wielokrotne wykorzystanie elementów oraz spójny rozwój produktu. Taka powtarzalność przyśpiesza czas projektowania i wdrożenia, gwarantuje też spójność wizualną i funkcjonalną produktu.

Dzięki spójności możliwe jest zapewnienie jednolitego (i pozytywnego) doświadczenia użytkownika. Spójność oraz standaryzacja zapewniają skalowalność produktu, łatwiejszy rozwój i optymalizację. W świetle tego można założyć, że design system powinien być częścią długoterminowych projektów. Znacząco ułatwia to utrzymanie spójności oraz przyspiesza pracę. Mówiąc kolokwialnie: raz wynalezione koło po prostu działa.

Design system poprzez jedną bibliotekę (“źródło prawdy”) pozwala na płynną pracę w obrębie zespołu. Wykorzystanie biblioteki oraz jednolitego języka pozwala wygospodarować więcej czasu na pracę z zachowaniami użytkowników oraz poszukiwanie nowych rozwiązań.

Jak konstruować design system​

Nie istnieje jedna uniwersalna metoda na zaprojektowanie dobrego systemu. Stopień skomplikowania i zawartość powinny być dostosowane do zadania i wynikać z analizy wstępnej.

Proces powstawanie design systemu można ująć w czterech etapach. Proces ten oczywiście nie jest liniowy i charakteryzuje się szeregiem iteracji, przybliżających do efektu końcowego.
Proces powstawanie design systemu można ująć w czterech etapach. Proces ten oczywiście nie jest liniowy i charakteryzuje się szeregiem iteracji, przybliżających do efektu końcowego.

Ogólny proces można zdefiniować w kilku krokach.

Koncepcja

Pierwszym krokiem jest stworzenie ogólnej koncepcji budującej charakter interfejsu, jego cechy szczególne i zasady interakcji. Są to zazwyczaj projekty graficzne i prototypy oparte o te projekty. Z racji tego, że powstają one na początku procesu, bardzo często stanowią jedynie prezentację look&feel docelowego produktu. Etap ten pozwala jednak uchwycić docelowy efekt na tyle dokładnie, że może stanowić on podstawę do dalszych prac.

Systematyzacja i projektowanie

Na podstawie wstępnej koncepcji można ustalić listę składowych systemu oraz komponentów i rozpocząć budowanie ustrukturyzowanej biblioteki. Przyjmując podejście, które rozpowszechnił Brad Frost, fundamentem design systemu są podstawowe elementy takie jak typografia, kolory, ikonografia, elementy formularzy (np. przyciski, pola tekstowe), elementy aktywne (np. listy rozwijalne) oraz zasady łączenia tych elementów. Z elementów podstawowych budowane są większe struktury: komponenty (np. pole formularza). Te z kolei służą do tworzenia patternów- wzorców będących większymi elementami wykorzystywanymi w produkcie. Takimi patternami są na przykład wielokrotnie wykorzystywane formularze, siatki z produktami czy, przykładowo, elementy treści łączące multimedia z tekstem.

Równolegle, w celu zweryfikowania, dobrze jest pracować w skali makro, budując layouty lub ich fragmenty. Ważnym jest, aby te dwie perspektywy (mikro i makro) stale się przenikały. Kolejne wersje przybliżają do efektu końcowego.

Na poziomie koncepcji istotne jest, aby poza standardowymi elementami tworzącymi interfejs zdefiniować problemy adekwatne do tematu. Innym zakresem zostanie objęty sklep internetowy, innym- aplikację finansową. Nawet wstępne opisanie zakresu pozwoli szybciej zbliżyć się do zakładanego celu.

W trakcie prac nad systemem warto trzymać się zasady minimum: wykorzystywać istniejące elementy, nie produkować elementów zbyt podobnych, ograniczyć zastosowanie koloru i typografię. Wszystko to będzie miało wpływ na koszt i czas wdrożenia produktu. Oczywiście, przemyślane wyjście poza te zastrzeżenia ma sens, należy jednak pamiętać o generalnej zasadzie: liczy się produkt, a nie system dla systemu.

Rozbudowany design system potrafi zawierać ogromną ilość elementów tworzących produkt. Utrzymanie spójności w takiej bibliotece bywa sporym wyzwaniem, ale owocuje szybkim przejściem do etapu wdrożenia. Na ilustracji widok projektu graficznego takiego systemu dla jednego z klientów e-point design.
Rozbudowany design system potrafi zawierać ogromną ilość elementów tworzących produkt. Utrzymanie spójności w takiej bibliotece bywa sporym wyzwaniem, ale owocuje szybkim przejściem do etapu wdrożenia. Na ilustracji widok projektu graficznego takiego systemu dla jednego z klientów e-point design.

Dobre praktyki i problemy z design system

Z punktu widzenia osoby projektującej podstawowy problem z design system to utrzymanie spójności. Problem ten dotyczy przede wszystkim dużych projektów, w których kluczowa jest dynamika oraz operowanie w ramach budżetu.

Często okazuje się, że koszt aktualizacji i optymalizacji takiego systemu z punktu widzenia właściciela projektu nie ma większego sensu. Design system staje się wtedy martwym opracowaniem, nie mającym odniesienia w produkcie.

Zagrożeniem jest także przekonanie. że wysokiej jakości design system daje gwarancję wysokiej jakości produktu. Nie zawsze tak jest. Dobrze jest pamiętać, że wysoką jakość zapewnia w dużej mierze dobre wdrożenie.

Dobrze skonstruowany design system jest efektem pracy zespołowej. Kolejne etapy projektowania i weryfikacji projektu, konsultowane z zespołem powodują, że całość jest realna i wynika z konkretnych potrzeb.

 

Podsumowanie

Design system traktowany jest często jako zbędny etap procesu, etap który powoduje wzrost kosztów produktu. Wynika to najczęściej z niezrozumienia zastosowania i roli tego narzędzia. W perspektywie biznesowej nieskomplikowane i niewielkie produkty rzeczywiście mogą obyć się bez takiego systemu, natomiast w przypadku dużych i długoterminowych projektów design system jest niezbędny. Jego właściwe zaprojektowanie i wdrożenie powoduje przyspieszenie prac, zachowanie spójności w obrębie produktu oraz ułatwia pracę nad jego rozwojem.

Jacek Opaluch
Lead Designer

Przeczytałeś coś wartościowego?
Podziel się z innymi.