Istnieje wiele definicji tego, czym jest Design System. Najprościej rzecz ujmując, to zespół powiązanych ze sobą narzędzi, które łączą elementy designu i język programowania, by ułatwić tworzenie projektów cyfrowych, jakimi są strony www i aplikacje. Aby mówić o systemie, wszystkie elementy, takie jak: biblioteka komponentów, wiedza na temat rozwijania projektów UX/UI oraz design są od siebie zależne i tworzą spójną całość. W tym artykule dowiesz się: czym jest Design System, do czego się go wykorzystuje, czy UX/UI Designer musi się orientować w DS, aby rozwijać swoje umiejętności i kompetencje.

Kiedy warto wprowadzić w swojej organizacji DS?

Design System jest nie tylko narzędziem, które służy do projektowania, ale także porządkowania wszystkich działań związanych z tworzeniem stron internetowych, dostosowanych do użytkownika. Kiedy warto wprowadzić Design System w swojej organizacji? Jest kilka opcji, które świadczą o tym, że w konkretnej firmie brakuje odpowiednich rozwiązań w zakresie projektów cyfrowych, a są to m.in.:

– brak spójności wizualnej na firmowych stronach www, chaos informacyjny i słaby UX;

– wysokie koszty wytwarzania tych samych rozwiązań;

– brak spójności w komunikacji wizualnej marki;

– skargi od klientów na nieprzejrzystą i chaotyczną stronę www czy aplikację.

To są zdecydowane sygnały, by rozważyć wprowadzenie DS do swoich codziennych działań i je usprawnić. Design System umożliwia spójność pomiędzy poszczególnymi produktami – ich interfejsem oraz działaniem. Jak już wspomnieliśmy, oszczędza czas i minimalizuje niepotrzebne koszty związane z wytwarzaniem konkretnych rozwiązań. Dobrze zarządzany DS stanie się zbiorem skalowalnych elementów, które będzie można łatwo przenieść także na inne funkcje.

Zalety korzystania z Design Systems

Jeśli Twoja organizacja rozwija różne projekty IT, a projektanci UX i developerzy nie zawsze potrafią ustalić wspólną strategię działań, Design Systems może znacznie wpłynąć na efektywność ich pracy. Jakie są inne zalety korzystania z DS?

– zmniejszenie kosztów związanych z tworzeniem nowych projektów dzięki wzrostowi wydajności UX Designerów i programistów;

– efektywniejsze prototypowanie dzięki możliwości wielokrotnego używania tego samego kodu;

– spójna komunikacja wizualna firmowych stron www i aplikacji;

– promocja dobrych praktyk UX oraz dbanie i komfort użytkowników;

– szybsze wdrożenie nowych pracowników pracujących nad projektami (UX/UI designerów, programistów, product menedżerów, grafików, content writerów);

– ciągła możliwość optymalizacji i testowania rozwiązań;

– znaczna spójność w komunikacji pomiędzy osobami zaangażowanymi w prace projektowe dzięki ujednoliconej terminologii;

– rozwój iteracyjny (przez optymalizację);

– większa wydajność i efektywność projektów

– poczucie kontroli, porządku i ładu, w którym łatwo się odnaleźć zarówno projektantom UX/UI, jak i użytkownikom aplikacji;

– skalowalność nowych elementów

– oszczędność czasu pracy.

Korzyści, jakie zauważy Twój klient po wdrożeniu DS

Jakie zauważalne korzyści DS zauważy Twój klient? Przede wszystkim ujednolicenie komunikacji wizualnej marki, spójny graficznie interfejs, fonty, infografiki – DS powoduje poprawę jakości wizualnej i funkcjonalnej strony czy aplikacji, właśnie dzięki wymuszeniu dobrych praktyk UX/UI. Kolejną korzyścią będzie oczywiście powtarzalna identyfikacja produktu, przez co klienci nabiorą większego zaufania do firmy. Budowanie zaufania wśród klientów opiera się na psychologicznej zasadzie: „Mózg łatwo zapamiętuje i rozpoznaje znane schematy i kolory”. Spójność wizualna to podstawa zaufania, jaką marki budują sieci. Znane i lubiane marki cieszą się popularnością, warto więc do nich dołączyć!

Wady stosowania DS w organizacji

Decydując się na wdrożenie DS w swojej firmie, pamiętaj, że nie jest to skończony produkt, który będzie wymagał ciągłych aktualizacji i optymalizacji, by pracować w 100% efektywnie i wydajnie. Design System powinno się rozwijać równocześnie z projektami, które są w nim umieszczone, dlatego może być tworzony przez miesiące, a nawet lata, zanim dojdzie do poziomu, w którym będzie w 100% wydajny. Design System nie może być rozwijany przez jedną osobę. Powinien nad nim pracować cały sztab osób powiązanych z projektami: programiści front-endowi, UX/UI designerzy, graficy, product ownerzy. Niestety, nie wszystkie firmy mają takie zasoby, by poświęcić rok lub więcej na samą pracę nad rozwojem DS. To właśnie dlatego Design System zdecydowanie nie jest dobrym rozwiązaniem dla każdej organizacji. Można zlecić wykonania DS na zewnątrz, jednak opłaca się to tylko i wyłącznie wtedy, gdy będą nad tym pracowali specjaliści razem z wewnątrz firmowym zespołem developerskim.

Jak zbudować skuteczny Design System?

Zanim przejdziemy do budowy skutecznego Design Systemu, pokrótce omówmy te elementy, które się na niego składają, a są to:

– interfejs, czyli kolory, gradienty, odcienie;

– logotypy i trustmarki;

– elementy graficzne np. infografiki;

– szablon menu, podstron, nawigacji (wraz z kodem);

– typografia (fonty, odstępy pomiędzy poszczególnymi literami, akapity)

– proporcjonalne elementy np. buttony;

– biblioteka szablonów (pattern library);

– bibioteka komponentów (component library), zawierająca elementy szablonu wraz z kodem;

– treści na stronę www.

DS-y są tworzone zarówno na potrzeby wewnętrzne firmy, jak i zewnętrzne. Aby zbudować skuteczny Design System, trzeba skrupulatnie zebrać najważniejsze komponenty, które będą powtarzalne. W następnej kolejności dobrze jest sprawdzić, czy są spójne, ustalić reguły ich powtarzania oraz wyjątki. DS trzeba dostosować do możliwości firmy, dla której się go tworzy, nie odwrotnie. W jaki sposób skutecznie wykorzystać możliwości DS? Może być narzędziem czysto wizualnym (visual guide), może być także narzędziem czysto technicznym, który może pełnić funkcję bazy gotowych kodów.

DS często jest mylnie utożsamiany ze Style Guide, czyli bazą elementów, składających się na obszar wizualny strony www czy aplikacji. Oczywiście, jak wspomnieliśmy powyżej, DS może pełnić taką funkcję, ale jest narzędziem, które można wykorzystać na wiele różnych sposobów, dopasowując je do indywidualnych potrzeb.

Najbardziej znany Design System

Do najbardziej znanego istniejącego Design Systemu należy Material Design Google, który zawiera bardzo szeroko opisane zasady tworzenia stron www i aplikacji. Stworzono go z myślą o projektowaniu aplikacji na system Android, ale jak się okazało, to konkretne narzędzie można z powodzeniem wykorzystać także w projektach desktopowych, jak Google Maps lub Youtube.

Innym przykładem skutecznego Design Systemu jest IBM Design System, który został zaprojektowany, by pokazać użytkownikom, w jaki sposób efektywnie komunikować się z klientami oraz jak powinny wyglądać nowe produkty czy usługi. Oczywiście, każda organizacja może zbudować swój własny DS, w zależności od tego, jakie projekty rozwija i jaką technologią dysponuje.

Czy UX/UI Designer powinien mieć doświadczenie w pracy z DS?

Przeglądając ogłoszenia o pracę na stanowiska UX/UI Designer, można się natknąć na wymaganie znajomości praktycznej przynajmniej jednego systemu DS. Oczywiście, jako początkujący UX/UI nie musisz mieć za sobą styczności z żadnym Design Systemem, choć to narzędzie zdecydowanie warto wdrożyć tam, gdzie usprawni pracę osób w zespole projektowym.

Design System otwiera nowe możliwości dla UX/UI Designera, który staje się jego współtwórcą. Coraz więcej globalnych korporacji, takich jak Shopify lub Airbnb decydują się na zatrudnienie UX designerów, którzy będą oddelegowanie do pracy nad rozwijaniem i optymalizacją Design Systemów. Być może właśnie w efektywnym DS tkwi przyszłość spójnych wizualnie marek, które wybiją się ponad konkurencję właśnie dzięki zoptymalizowanym działaniom zespołów projektowych w Design Systemie.

5 najlepszych Design Systemów na rynku

Oprócz DS-ów zaprojektowanych i rozwijanych przez Google i IBM istnieje jeszcze kilka z nich, o których warto wspomnieć w kontekście inspiracji. Są to m.in.:

1. Apple Human Interface Guidelines

To zewnętrzny system projektowania Apple’a. Zawiera najlepsze praktyki, wytyczne i zasoby dla programistów, projektantów i dystrybutorów systemów: macOS, iOS, watchOS, vOS.

Można go pobrać darmowo i bezpośrednio korzystać z różnych zasobów i narzędzi dla programistów i projektantów, takich jak: pliki projektowe, makiety urządzeń, kod Swift, a także zapoznać się z ich wytycznymi, aby wprowadzić część z nich w swojej organizacji lub projekcie.

2. Microsoft Fluent Design System

To ekosystem narzędzi do projektowania i komponentów, na darmowej licencji open source. Praca z tym systemem pomoże Ci stworzyć spójną wizję na platformach internetowych, takich jak: Windows, iOS i Android oraz zrozumieć koncepcję spójności wizualnej rmy Microsoft. Ten Design System może być świetną inspiracją dla UX/UI designerów, która pozwoli im tworzyć własne, inkluzywne projekty.

3. Atlassian Design System

DS od Atlassian, podobnie jak Jira i Trello, jest świetnie funkcjonującym i chętnie używanym narzędziem do zarządzania projektami i współpracy w metodologii Agile. Głównym celem wykorzystania tego narzędzia jest zwiększenie efektywności zespołowej dzięki spójnemu podziałowi zadań i wspólnej komunikacji. Odpowiednie uporządkowanie zadań pozwala na znacznie szybsza i wydajną pracę.

4. Uber Design System

Kto nie dzwonił po Ubera w środku nocy, ten nie wie, ile wysiłku wymaga odpowiednia koordynacja kierowców, którzy pracują niemal 24/h, rozwożąc ludzi (a w ramach Uber Eats także posiłki) z miejsca na miejsce. Uber Design System udowadnia, że da się zbudować skuteczne narzędzie do zarządzania logistyką i transportem na dowolnym obszarze. Jest dobrym przykładem tego, w jaki sposób można łatwo rozwiązać problem z dostaniem się z jednego miejsca w inne.

5. Mailchimp Design Ssystem

To narzędzie jest rewolucją w obszarze e-mail marketingu. Mailchimp uosabia takie wartości jak: rzemiosło, kreatywność i najwyższą jakość świadczonych usług. Mailchimp przyda się wszystkim, którzy pracują w branży marketingowej, reklamowej i wdrażają strategie e-mailowe, by zwiększyć rozpoznawalność marki. W Mailchimp istnieje wiele innowacyjnych pomysłów projektowych (z intuicyjnym UX), z których można czerpać inspirację oraz wiele sposobów wykonywania złożonych zadań np. tworzenie efektywnych automatycznych kampanii e-mailowych i biuletynów.