Design system w praktyce

Design system zyskuje w ostatnich latach rosnącą popularność, ponieważ okazuje się bardzo skutecznym rozwiązaniem, a jego liczne korzyści dostrzega coraz więcej firm. Głównym profitem jest możliwość szybszego wypuszczenia produktów na rynek.

Właściwy dla systemów podział projektu na komponenty oraz atomy sprawia bowiem, że proces projektowy jest dużo efektywniejszy. Kolejnymi korzyściami, o których warto wspomnieć, są lepszy UX oraz większe zadowolenie klienta. Narzędzia design system pozwalają śledzić i trafniej odgadywać preferencje użytkowników oraz optymalizować i udoskonalać pod względem użyteczności te obszary, które z perspektywy odbiorców wymagają poprawek. Istotnym profitem związanym z korzystaniem z ustandaryzowanego systemu jest ponadto poprawa komunikacji wewnętrznej i minimalizacja ryzyka możliwych błędów i nieporozumień w zespole.

Co to design system?

Mówiąc najogólniej, design system to zbiór kluczowych oraz ustandaryzowanych elementów sporządzonych w formie dokumentacji. 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.

Prawdziwa użyteczność design systemu polega jednak na tym, że wszystkie komponenty w tych obszarach są już zoptymalizowane i zakodowane. Oznacza to, że za każdym razem, gdy tworzysz nowy projekt lub aktualizujesz stary, wszystkie potrzebne elementy są już gotowe – musisz je tylko umieścić na swoim miejscu.

Jak zacząć tworzyć design system?

Budowanie design systemu rodzi dużo pytań oraz wątpliwości u klientów. Dlatego, jako specjaliści w tej dziedzinie, chcemy podzielić się naszym doświadczeniem, jakie zebraliśmy w trakcie dotychczasowej współpracy z naszym klientami, i przedstawić plusy takiego rozwiązania. Są jednak dwa kluczowe pytania, które należy przemyśleć już na samym początku:

• tworzyć design system, opierając się na dotychczasowych projektach?
• czy może budować design system od podstaw i w następnych krokach starać się dostosowywać do niego dotychczas prowadzone projekty?

Niezależnie od tego, jaką drogę postępowania wybierzemy, w pierwszym kroku musimy dokładnie zapoznać się z branżą klienta oraz jego potrzebami biznesowymi. Pomoże nam to lepiej zrozumieć użytkowników oraz ich podejście do marki.

Proces tworzenia design systemu

Aby stworzyć efektywny design system, polecamy opierać się na pięciu kluczowych krokach:

1. analiza obecnie posiadanych komponentów;
2. research oraz analiza istniejących design systemów;
3. lista komponentów oraz konsultacja z zespołem;
4. projektowanie design systemu:

• paleta kolorów,
• system typografii,
• grid and spacing,
• biblioteka icon,
• biblioteka zdjęć oraz ilustracji;

5. stworzenie komponentów oraz przykładów użycia. Jeśli jesteś nowym startupem i nie posiadasz obecnie żadnych komponentów do analizy, zastanów się nad najważniejszymi elementami, które będą kluczowe również z punktu widzenia odbiorców Twojego produktu oraz Twojej marki.

1. Analiza obecnie posiadanych komponentów

Pierwszy krok w tym procesie to zgromadzenie komponentów w jednym miejscu, ich kategoryzacja oraz rozbicie na atomy. Dzięki temu możliwe jest trafne wyselekcjonowanie elementów, które są ważne i powinny zostać, oraz tych części, które warto zmodyfikować lub nawet całkowicie usunąć. Do zbioru komponentów można użyć właściwie dowolnego narzędzia – ważne jest jedynie to, by gwarantowało sprawne przeprowadzenie tego rodzaju analizy. W naszym przypadku świetnie sprawdza się program Figma, dzięki któremu zarówno członkowie zespołu, jak i klient mogą w łatwy i szybki sposób przeanalizować wszystkie komponenty.

2. Badanie i analiza istniejących design systemów

Na rynku aktualnie można znaleźć wiele design systemów, którymi projektanci mogą się zainspirować, czerpiąc z nich dobre wzorce projektowe. Jako przykładowe design systemy dostępne na rynku wymienić można:

• https://atlassian.design/
• https://ant.design/
• https://www.carbondesignsystem.com/
• https://garden.zendesk.com/
• https://material.io/design/introduction#principles
• https://www.microsoft.com/design/fluent/
• https://developer.apple.com/design/human-interface-guidelines/
• https://polaris.shopify.com/
  

3. Lista komponentów oraz konsultacja z zespołem

Wynikową dwóch poprzednich kroków powinna być lista komponentów w naszym design systemie, czyli swoisty szkielet struktury systemu. Ważne jest, aby na tym etapie przeanalizować tę listę z całym zespołem projektowym w celu dokonania walidacji poprzednich działań i upewnienia się, że wszystkie komponenty wraz z ich poszczególnymi elementami zostały dokładnie omówione.

4. Projektowanie design systemu

Po analizie i przygotowaniu listy komponentów można przejść do podstawowych elementów naszego design systemu. Utworzenie tych składowych systemu okazuje się niezwykle istotne, ponieważ wyznaczy nam hierarchię, którą wykorzystamy w następnych krokach.

Paleta kolorów Paleta kolorów to dobre miejsce do rozpoczęcia prac nad naszym design systemem. W tym celu zidentyfikuj wybrane odcienie dla każdego koloru oraz napisz wytyczne na temat tego, w jaki sposób ich używać. Przykładowo: jakiego koloru są wasze buttony, linki, paragrafy. Pamiętaj również, aby dołączyć kolory HEX, RGBA lub HLS.

System typografii Niezależnie od systemu, pod jaki projektujesz, warto zastanowić się, jakiej typografii warto użyć na każdym systemie. Typografia z Weba będzie się w oczywisty sposób różnić od systemów mobilnych, dlatego należy zawczasu skrupulatnie przemyśleć nasz system. Znaczące różnice będą bowiem zauważalne nawet między typografią przygotowaną pod zwykłą stronę a blog.

Design system może być bardziej techniczny niż standardowy style guide. Zanotuj preferowane rozmiary tekstu, odstępy, czcionki itp. oraz wszelkie zasady dotyczące tego, gdzie i kiedy należy ich używać.

Grid i spacing Najczęściej używaną cechą stylu w prawie każdym projekcie jest whitespace. Niezależnie od tego, czy chodzi o odstępy między linkami w nagłówku, odstępy między elementami w gridzie, dodanie dystansu między awatarem a linkiem czy też wypełnienie elementu rozwijanego – żaden biały obszar w naszym produkcie nie powinien być przypadkowy lub niezamierzony.

Biblioteka ikon Biblioteka ikon zawiera wszystkie ikony, których używają Twoje produkty, aplikacje lub strony. Posiadanie ustandaryzowanej biblioteki ikon zapewnia spójność całej marki.

Biblioteka zdjęć oraz ilustracji Dobrym rozwiązaniem jest także jedna biblioteka wszystkich fotografii firmowych zarówno własnych, jak i zakupionych zdjęć stockowych. Taka biblioteka nie tylko ułatwia pobieranie zdjęć z systemu projektowania, ale także pozwala pracownikom na swobodne przeglądanie ich w poszukiwaniu pomysłów i inspiracji. Aby ją utworzyć, warto zebrać wszystkie niestandardowe ilustracje, które zleciłeś lub stworzyłeś, wraz z elementami dekoracyjnymi strony czy projektami obramowań.

5. Stworzenie komponentów oraz przykładów użycia

Gdy już zdefiniowaliśmy naszą globalną paletę stylów, możemy już z pomocą tych elementów rozpocząć tworzenie biblioteki komponentów. W większości przypadków projektowanie komponentów nie jest procesem twórczym, a polega na mapowaniu predefiniowanych stylów na komponenty.

Dlatego na tym etapie nie powinniśmy potrzebować żadnego stylu, który nie został jeszcze zdefiniowany w naszej palecie stylów – proces twórczy miał bowiem miejsce w fazie jej projektowania. Od tego momentu, niezależnie od tego, czy chodzi o kolor, rozmiar czcionki, wartość marginesu/wypełnienia, szerokość/wysokość czy inne elementy, każdy styl, którego używamy do projektowania komponentów i układów, powinien pochodzić z naszej palety stylów. Tym samym prawie nic nowego nie powinno być wprowadzane. Może to zabrzmieć ekstremalnie lub nierozsądnie, ale przeciwnie: to jest właśnie to, gdzie – naszym zdaniem – wielu ludzi popełnia błąd.