Design system: kiedy firma go potrzebuje i co powinien zawierać

Design system to uporządkowany zestaw zasad, kolorów, typografii i gotowych elementów interfejsu, z których buduje się strony i aplikacje firmy. Dzięki niemu każdy nowy ekran wygląda i działa spójnie, a projektanci i programiści nie wymyślają tych samych przycisków od nowa. Nie każda firma go potrzebuje. Poniżej wyjaśniamy, kiedy design system się opłaca, co powinien zawierać i jak zacząć w rozsądnej skali.

Czym jest design system, a czym nie jest

Design system to wspólny język zespołu, który tworzy produkty cyfrowe. Składa się z trzech warstw:

• fundamentów: kolory, typografia, odstępy, siatka, zaokrąglenia, cienie, ikony,
• komponentów: przyciski, pola formularzy, karty, tabele, komunikaty, menu, okna dialogowe,
• zasad: kiedy użyć którego elementu, jak pisać komunikaty, jak zapewnić dostępność.

Design system to nie to samo co:

• księga znaku, która opisuje markę w ogóle, także na papierze, szyldach i w mediach społecznościowych; więcej o niej piszemy w tekście o tym, co zawiera księga znaku,
• szablon strony kupiony w sklepie z motywami, który ma swój wygląd, ale nie jest dopasowany do Twojej marki i potrzeb,
• plik z projektem graficznym, w którym każdy ekran zaprojektowano osobno i bez wspólnych elementów.

Kiedy firma potrzebuje design systemu

Design system zaczyna się opłacać, gdy rośnie liczba ekranów, produktów lub osób, które nad nimi pracują. Typowe sygnały:

• masz kilka produktów cyfrowych: stronę, sklep, panel klienta, aplikację, i każdy wygląda trochę inaczej,
• aplikacja rośnie, a każdy nowy ekran wymaga projektowania od zera,
• pracuje nad nią kilku projektantów lub programistów, czasem z różnych firm,
• w interfejsie jest pięć odcieni niebieskiego i siedem rodzajów przycisków, choć nikt tego nie planował,
• zmiana koloru marki oznaczałaby ręczne poprawianie setek miejsc,
• klienci zgłaszają, że ta sama czynność działa inaczej w różnych częściach systemu.

Design system nie jest potrzebny przy prostej stronie firmowej z kilkoma podstronami. Tam wystarczy spójny projekt graficzny z opisanymi kolorami i stylami tekstu. Zbudowanie pełnego systemu dla pięciu podstron to praca, która się nie zwróci.

Co powinien zawierać design system

Fundamenty, czyli zmienne

Wszystkie podstawowe wartości zapisane jako nazwane zmienne (często nazywane tokenami): kolor główny, kolor tła, kolor błędu, rozmiary tekstu, odstępy. Dzięki temu zmiana koloru marki to zmiana jednej wartości, a nie setek. Zmienne powinny mieć nazwy według przeznaczenia, na przykład „kolor-akcji” zamiast „niebieski-500”.

Typografia

Kroje pisma, skala rozmiarów, wysokość wierszy, style nagłówków i tekstu, zasady na telefon i komputer. Dobrze opisana typografia sama robi połowę porządku w interfejsie.

Komponenty

Każdy komponent ma opisane warianty i stany. Przycisk to nie jeden element, tylko zestaw: główny, drugorzędny, tekstowy, w stanie zwykłym, po najechaniu, wciśnięty, nieaktywny, w trakcie ładowania. Podobnie pola formularzy: puste, wypełnione, z błędem, z podpowiedzią.

Na start zwykle wystarczy kilkanaście komponentów:

Grupa	Przykładowe komponenty
Akcje	przycisk, link, ikona z akcją
Formularze	pole tekstowe, lista wyboru, pole wyboru, przełącznik, wybór daty
Prezentacja	karta, tabela, lista, znacznik statusu
Komunikaty	powiadomienie, komunikat błędu, pusty stan
Nawigacja	menu, zakładki, ścieżka okruszków, stronicowanie
Nakładki	okno dialogowe, panel boczny, podpowiedź

Zasady treści i dostępności

Jak piszemy komunikaty błędów, przyciski i potwierdzenia. Minimalny kontrast kolorów, wielkość elementów klikalnych, obsługa klawiaturą. Dostępność wbudowana w komponenty sprawia, że każdy nowy ekran ma ją automatycznie.

Dokumentacja i kod

Design system żyje w dwóch miejscach: w bibliotece projektowej (na przykład w Figmie) i w bibliotece komponentów w kodzie. Obie powinny być zgodne. Dokumentacja pokazuje każdy komponent, jego warianty i przykłady użycia, tak żeby nowa osoba w zespole mogła z niego skorzystać bez długiego wdrażania.

Jak zacząć bez budowania wszystkiego naraz

Najczęstszy błąd to próba zbudowania pełnego systemu przed pierwszym ekranem. Lepiej zacząć od tego, co już istnieje:

1. Inwentaryzacja. Zrób zrzuty ekranu wszystkich przycisków, pól, kolorów i nagłówków w obecnych produktach. Zobaczysz, ile jest wariantów tej samej rzeczy.
2. Fundamenty. Ustal kolory, typografię i odstępy jako zmienne. To najmniej pracy i największy efekt.
3. Najczęstsze komponenty. Przycisk, pole formularza, karta, komunikat. Zaprojektuj je ze wszystkimi stanami i zakoduj.
4. Zastosowanie przy nowej pracy. Każdy nowy ekran budowany jest z systemu. Brakujący element dodaje się do systemu, a nie projektuje jednorazowo.
5. Stopniowa wymiana starych elementów przy okazji kolejnych zmian.

Punktem wyjścia często jest istniejąca identyfikacja wizualna. Jeśli marka nie ma jeszcze uporządkowanych kolorów i krojów pisma, warto zacząć od tego, o czym piszemy w tekście o identyfikacji wizualnej małej firmy.

Co design system daje w praktyce

• Spójność: klient rozpoznaje markę na stronie, w sklepie i w panelu, a ta sama czynność działa wszędzie tak samo.
• Szybkość: nowe ekrany powstają z gotowych elementów, więc projekt i programowanie zajmują mniej czasu.
• Mniej błędów: komponent przetestowany raz działa poprawnie wszędzie, gdzie jest użyty.
• Łatwiejsze zmiany: odświeżenie wyglądu marki to w dużej mierze zmiana zmiennych, a nie przebudowa wszystkich ekranów.
• Prostsze wdrażanie ludzi: nowy projektant lub programista szybciej rozumie, jak budować interfejs.
• Lepsza dostępność: zasady wbudowane w komponenty nie zależą od pamięci każdej osoby w zespole.

Kto go tworzy i jak go utrzymać

Design system to wspólna praca projektanta UX/UI i programisty. Projektant odpowiada za fundamenty, komponenty i zasady w bibliotece projektowej. Programista przekłada je na bibliotekę komponentów w kodzie i pilnuje, żeby działały tak samo w każdym miejscu. Po stronie firmy przydaje się osoba, która decyduje o zmianach, na przykład właściciel produktu lub osoba odpowiedzialna za markę.

Koszt zależy od skali. W mniejszym projekcie system powstaje przy okazji budowy aplikacji czy sklepu i jest po prostu dobrze zorganizowaną częścią projektu. W większej organizacji, z kilkoma produktami i zespołami, bywa osobnym projektem z własnym budżetem.

Utrzymanie wymaga kilku prostych zasad:

• jedna osoba lub mały zespół zatwierdza nowe komponenty i zmiany,
• każda zmiana ma krótką notatkę: co się zmieniło i gdzie to widać,
• raz na jakiś czas warto przejrzeć, które elementy są używane, a które można usunąć.

Najczęstsze błędy

• System, z którego nikt nie korzysta. Piękna dokumentacja, a w kodzie nadal powstają jednorazowe przyciski. System musi być łatwiejszy w użyciu niż obejście go.
• Rozjazd projektu i kodu. W Figmie jest jedna wersja przycisku, w kodzie inna. Potrzebna jest osoba odpowiedzialna za zgodność.
• Za dużo na start. Sto komponentów zaprojektowanych „na zapas” starzeje się, zanim zostaną użyte.
• Brak zasad użycia. Sam zestaw elementów bez wskazówek, kiedy którego użyć, szybko prowadzi do chaosu.
• Projektowanie w oderwaniu od użytkowników. Komponenty warto sprawdzać w prawdziwych scenariuszach. Problemy z użytecznością dobrze wychwytuje audyt UX, który przy okazji pokazuje, gdzie interfejs jest niespójny.

Dobrym sposobem na uniknięcie części tych błędów jest budowanie systemu równolegle z prawdziwym projektem: od makiet, przez prototyp, po gotowy interfejs. Różnice między tymi etapami opisujemy w tekście o makiecie, prototypie i projekcie graficznym.

Podsumowanie

Design system porządkuje fundamenty, komponenty i zasady, z których budujesz strony i aplikacje. Opłaca się, gdy masz kilka produktów cyfrowych, rosnącą aplikację albo kilka osób pracujących nad interfejsem. Przy prostej stronie firmowej wystarczy spójny projekt graficzny. Najlepiej zaczynać od inwentaryzacji, fundamentów i kilku najczęściej używanych komponentów, a system rozwijać razem z produktem.

Jeśli Twoje strony i aplikacje zaczynają się rozjeżdżać wizualnie, zobacz, jak pracujemy przy projektowaniu UX/UI, albo napisz do nas i pokaż, od czego chcesz zacząć.