Czym jest design system i czemu warto go wdrożyć?

W wielu organizacjach działających online design system staje się standardem projektowania. W artykule opisuję, na czym polega fenomen design systemu i dlaczego warto go wdrożyć w organizacji.
Design System Lego

Czym jest design system?

Design system to dokument porządkujący informacje o tym, jak chcielibyśmy, aby nasza marka była postrzegana przez klientów i użytkowników. Składa się ze zbiorów graficznych, wytycznych projektowania i komunikacji, oraz materiałów źródłowych gotowych do ponownego użycia. Wszystko to ma na celu określenie spójnego języka komunikacji marki. O skuteczności design systemu mogły przekonać się już takie organizacje jak: rząd USA, IBM, Google, a także… Bank Pekao, z którym współpracowaliśmy podczas redesignu serwisu transakcyjnego Pekao24.

Korzyści z posiadania design systemu.

Największą wartością design systemu jest połączenie spójnej komunikacji wizualnej z dokumentacją techniczną, wykorzystywaną przez programistów, managerów, projektantów, copywriterów i innych specjalistów odpowiedzialnych za budowanie doświadczenia klienta. Inne plusy posiadania design systemu w swojej firmie to:

  • Przyspieszenie prac nad kolejnymi produktami i usługami (niektóre firmy oceniają, że dostarczenie stron przyspieszyło nawet 8-krotnie).
  • Szybsze wdrażanie nowych pracowników - nowi programiści, graficy, obsługa klientów i managerzy mają jasne wytyczne i niezbędne informacje, aby rozpocząć pracę.
  • Lepsza doświadczenie użytkownika - zamiast tworzyć nowe schematy, możemy skupić się na udoskonalaniu naszego design systemu.
  • Wyższa konwersja - możemy poświęcić więcej czasu na testowanie naszych projektów i ulepszanie ich co przekłada się na wyższą konwersję.
  • Poczucie porządku i kontroli - każdy ma dostęp do bazy, w której widzi informacje o marce od designu po komunikację, łatwiej znaleźć potrzebne informacje.
  • Lepsza komunikacja pomiędzy zespołami - design system jest wspólnym dokumentem. To słownik, dzięki któremu wszyscy zaangażowani w budowanie produktu porozumiewają się jednym językiem.

Jak budujemy design systemy?

Budowanie design systemu często rodzi pytania i wątpliwości naszych klientów. Projekty tego typu zawsze zaczynamy od spotkania, na którym dzielimy się naszą wiedzą i doświadczeniami, a także przedstawiamy przykładowe design systemy, tak aby każda osoba zaangażowana w projekt miała takie same podstawy. Zazwyczaj na tym wczesnym etapie stajemy przed wyborem:

  • Tworzyć design system na podstawie obecnych projektów

Czy…

  • Tworzyć design system od podstaw, a następnie dostosować do niego istniejące produkty.

Bez względu na ostatecznie podjętą decyzję, zawsze przechodzimy przez analizę marki i jej otoczenia biznesowego, co pozwala nam lepiej zrozumieć użytkowników, specyfikę branży i potrzeby naszych klientów.

Składowe design systemu.

Design system można rozłożyć na 3 mniejsze elementy:

  1. Style guide (księga stylu) - czyli dokument zawierający informacje o standardach projektowania, jest źródłem wiedzy m.in. o kolorach, fontach, logotypach i sposobie komunikacji z użytkownikiem.
  2. Pattern library (biblioteka szablonów) - czyli biblioteka graficzna zawierające konkretne przykłady interfejsu i praktyczne porady, jak z nich korzystać np. formularze występujące na stronie wraz z przykładami ich wykorzystania.
  3. Component library (biblioteka komponentów) - czyli połączenie biblioteki szablonów z kodem wykorzystywanym przez programistów do tworzenia kolejnych podstron. To główny czynnik przyśpieszający pracę nad kolejnymi produktami, ponieważ programiści nie muszą przepisywać kodu strony od nowa.
Design-system-skladowe

Praktyczne przykłady.

Zawartość design systemu zgrupowana jest w logiczne zbiory, które łatwo jest odnaleźć. Większość systemów posiada takie sekcje jak: grid, animacje, kolory, fonty, elementy UI a także zasady projektowania nowych elementów. Dla lepszego zrozumienia czym jest design system, stworzyłem krótką listę praktycznych przykładów.

Bank Pekao

Budowanie design systemu zaczynaliśmy od zdefiniowania nowego stylu graficznego. Celem było odświeżenie serwisu webowego i aplikacji mobilnej, tak aby były bardziej nowoczesne i funkcjonalne. Dzięki uporządkowaniu wszystkich elementów byliśmy w stanie szybko i systematycznie dostarczać kolejne projekty. Z efektów wspólnej pracy z Bankiem Pekao korzysta na co dzień wiele tysięcy Polaków.

Design-system-pekao24

Atlassian (JIRA, Confluence)

Link do Design Systemu: https://atlassian.design/

Firma znana z popularnego oprogramowania do zarządzania projektami - JIRA i Confluence. Z roku na rok widać coraz większy nacisk na doświadczenie użytkownika jako kluczowy aspekt produktu. Design system Atlassiana zawiera informacje o tonie wypowiedzi, materiałach marketingowych i wykorzystaniu wizerunku marki w sieci.

Google - Material Design

Link do Design Systemu: https://material.io/design/

Jeden z najbardziej znanych systemów wykorzystywanych na ogromną skalę. Zawiera informacje o projektowaniu na podstawie systemu stworzonego przez Google. Z jego pomocą co roku powstają miliony aplikacji i stron internetowych. Cały Material Design został podzielony na sekcje: design, kod, materiały do pobrania oraz komponenty. Dodatkowo Material Design daje dostęp do darmowych narzędzi umożliwiających m.in. sprawdzenie kolorystyki aplikacji na automatycznie generowanych makietach.

Material-Design-Google

Fluent Design System (Microsoft)

Link do Design Systemu: https://www.microsoft.com/design/fluent/

Microsoft znany jest z tego, że co kilka lat aktualizuje swój wygląd. Obecnie tworzy swoje produkty na podstawie Fluent Design System, sprawdzającego się na różnych systemach operacyjnych: Windows, iOS, i Android.

Powyżej wymienione zostały najpopularniejsze design systemy. Obszerniejszą listę znaleźć można pod tym linkiem: www.designsystemsrepo.com

Jak rozwijać design system?

Przede wszystkim dokładnie ;)

Rozpoczynając tak duży projekt, należy pamiętać o tym, że rozwój design systemu jest nieprzerwanym procesem, który można porównać do rozwoju organizmu. Z początku tworzy się najważniejsze dla marki struktury, a następnie rozwija kolejne obszary. W praktyce, z jednej strony chodzi tu o systematyczne testowanie i rozwijanie obecnych rozwiązań, a z drugiej strony o adaptację do zmieniających się co parę lat trendów projektowych i nowych możliwości technologicznych. Dzięki design systemom firmy mogą szybciej i skuteczniej reagować na zmiany i skupić się na budowaniu jak najlepszego doświadczenia swoich klientów.

Tworzymy produkty. 28.01.2020.
Chcesz dostawać informacje o nowych wpisach?