Czym jest Design System?

Czym jest Design System?

Opublikowano 25.08.2019 10:26 -


Design System to zbiór componentów, które mogą być użyte wiele razy w różnych kombinacjach. Design systemy pozwalają zarządzać projektowaniem w przypadku, gdzie w grę wchodzi skala.

W teorii pojęcie nie jest wcale nowe. W rozwoju oprogramowaniu pojawiało się już w zeszłym tysiącleciu. Zmieniło się jednak to, w jaki sposób go używamy. Design systemy są związane z rozwojem produktów cyfrowych takich jak strony czy aplikacje, ale nie tylko. Mogą wykraczać w obszary związane z brandingiem czy komunikacją. Skupmy się jednak na stronach i aplikacjach ponieważ to tu najczęściej da się je aktualnie spotkać.

Istnieje wysokie prawdopodobieństwo, że z pojęciem Design Systemu spotkałeś się właśnie przy okazji zgłębiania tematów związanych z grafiką/UI, projektowaniem interakcji, user/customer experiance lub nawet fronendem.

Taki prosty design system składa się z kilku elementów. Zdefiniowanych kolorów, fontów (oraz ich wielkości), komponentów (buttony, inputy, labelki). Im bardziej rozbudowany system tworzymy tym więcej elementów dochodzi. Marginesy, przykłady użycia. Zaczynamy ze sobą łączyć komponenty tworząc wzorce (patterny), które potem możemy powielać.
Najlepszym wizualnie przedstawieniem design systemu mogą być klocki. Na przykład Lego. Dlaczego?

Mam ograniczony zbiór elementów w różnych kolorach, z którego możemy budować na przykład wszystko co sobie wymyślimy. Oczywiście mocno upraszczam, ale zapewne wiesz do czego dążę.

Słyszałem już wiele razy argument o tym, że design system może ograniczać kreatywność. No bo przecież musimy przestrzegać zasad. No tak jakby nie do końca. Wróćmy do przykładu klocków lego.
Czy wiesz na ile sposobów można ze sobą połączyć 6 klocków (2x4) lego?
915,104,765 (dowód).

Z drugiej strony muszę się z tym zgodzić. Jeśli będziemy używać w kółko jednego UI Kita (taki prosty design system jakby nie patrzeć) i stworzymy z niego parędziesiąt stron będą one do siebie podobne wizualnie. Analogicznie, jeśli wytworzymy pewną ilość aplikacji mobilnych przy użyciu wytycznych Material Design od Google to apki te również będą podobne. W drugim przypadku właśnie o taki efekt chodziło, aby użytkownik znał interfejs aplikacji, nie bał się jej używać, wiedział, czego się spodziewać w całym uniwersum Androida.

Odłożymy jednak na bok wytwarzanie stron (głównie tych marketingowych), ponieważ w tym przypadku design system nie sprawdzi się najlepiej. Nie będę ukrywał, że jest to lek na wszelkie zło i problemy związane z designem.
Skupmy się właśnie na przykładach analogicznych do Androida. Przykładach, gdzie w grę wchodzi skala. Tutaj design system okaże się bardzo przydatnym narzędziem. Na podparcie mojej tezy mogę przytoczyć fakt, że większość popularnych narzędzi do projektowania (Adobe XD, Sketch, Figma, UXPin itd.) posiada funkcje przydatne przy budowaniu i korzystaniu z Design Systemów. Przypadek? Nie sądzę. Projektowanie już jakiś czas temu przestało być tylko domeną webmasterów i coraz więcej firm przykłada wagę do tego, aby ich produkty oraz całe portfolia były spójne. Idą za tym oczywiście oszczędności czasu oraz pieniędzy, ale o tym później.

Jeżeli coraz większe firmy, a co za tym idzie zespoły zaczynają projektować na serio swoje rozwiązania to znaczy że w grę wchodzi skala. A jak ze skalą mamy do czynienia, to podobnie jak cały development musi to być jakoś ustandaryzowane.

Im większa organizacja tym większe prawdopodobieństwo tego, że kilka osób będzie rozwiązywać ten sam, bądź bardzo podobny problem. To nie jest zbyt optymalne podejście. Dodatkowo bardzo możliwe jest, że te osoby wpadną na rozwiązania, które będą się od siebie różnić. A gdzie wtedy jest spójność produktu, gdzie jest przewidywalność, aby użytkownik mógł w prosty sposób używać produktu. Problem dobrze przedstawili ludzie pracujący w Allegro na Element Talks w 2017 roku

Dlaczego poruszam temat design systemu? Jest mi on całkiem bliski ponieważ staramy się mocno na nim skupić w Diebold Nixdorf. Skalujemy zespół projektantów i ludzie z różnych kontynentów będą mieli pracować nad wspólną wizją. Skoro mamy sytuację, gdy proces projektowania nie jest ujednolicony w jednym produkcie i prowadzi do błędu, to co może się stać, gdy dodamy do tego więcej produktów wytwarzanych w różnych lokalizacjach w różnych strefach czasowych np. Polska + Indie + Kanada. Nic dobrego. Aż się prosi, o brak spójności. Nawet nie prosi. To na pewno się pojawi.

Dolewając oliwy do ognia realnym scenariuszem jest, że jakiś mały produkt zostanie powierzony agencji zewnętrznej. No cóż, życie. Dlatego uważam, że design system w przypadku skali ma spore znaczenie aby portfolio firmy nie wyglądało jak kolorowa wycinanka z kiepsko spasowanych elementów. Posiadając dobry i żywy DS.(Design System) jesteśmy w stanie sporo z tych problemów rozwiązać. Należy jednak budować go we współpracy z każdym, kto ma z nim styczność aby nie był po prostu zbiorem martwych zasad, które są umyślnie przez wszystkich ignorowane.

Design system sam w sobie jest produktem, który jest używany do budowy innych produktów. Jak każdy dobry produkt cyfrowy powinien mieć swój backlog, być budowany w sposób iteracyjny, powinien nadążać za potrzebami swoich użytkowników. Są nimi w tym wypadku programiści, projektanci, analitycy biznesowi, product ownerzy oraz product managerowie.
Wydaje mi się, że design systemy w najbliższej przyszłości znacznie się rozwiną ponieważ powstaje coraz więcej narzędzi, dzięki którym praca z nimi oraz ich utrzymanie staje się łatwiejsze. To pozwoli zaoszczędzony czas przeznaczyć na dopieszczenie istniejących komponentów oraz dodanie kolejnych elementów do systemu. Takich jak na przykład UX writing.

Wieści z Rozładowani.pl