Design system warto wdrożyć wtedy, gdy koszt powtarzania tych samych decyzji projektowych przewyższa koszt ich spisania. W praktyce dzieje się to, gdy nad produktem pracuje więcej niż jeden zespół, te same elementy istnieją w kilku wersjach, a zmiana globalna wymaga ręcznych poprawek w wielu miejscach. Przy jednym projektancie i jednym małym produkcie jest na to za wcześnie.
Czym jest design system i czym nie jest
Design system to wspólny zestaw komponentów interfejsu i zasad ich użycia, z którego korzystają projektanci i programiści. Składa się z fundamentów (kolory, typografia, odstępy i design tokeny, czyli nazwane wartości używane przez każdy komponent), biblioteki komponentów i dokumentacji. Sama biblioteka w Figmie nie jest systemem, bo bez zasad każdy zespół dopisuje do niej własne warianty.
Uwaga o nazwie: poprawny termin to „design system”. Wyrażenie „system design” oznacza w branży projektowanie architektury systemów informatycznych i dotyczy innego tematu.
Pięć sygnałów, że produkt potrzebuje design systemu
1. Ten sam element istnieje w kilku wersjach
Najprostszy test: zebrać zrzuty wszystkich przycisków, pól formularzy i okien dialogowych z produktu i policzyć wersje. Jeżeli przycisk główny ma kilka wysokości, a komunikat o błędzie wygląda inaczej w każdym module, każda nowa funkcja dokłada kolejną wersję. Tego samego liczenia używa się w audycie design systemu.
2. Nad produktem pracuje kilka zespołów albo wykonawców
Jeden projektant trzyma spójność w głowie. Dwa zespoły już nie, bo każdy rozwiązuje te same problemy w swoim tempie i po swojemu. Sygnałem jest też wymiana wykonawcy, plan zatrudnienia kolejnych projektantów albo programistów i praca kilku firm zewnętrznych nad jednym interfejsem. Korzyści przy większej skali opisuje wpis o design systemie w dużym zespole.
3. Zmiana globalna trwa tygodnie
Nowy kolor marki, poprawa kontrastu albo zmiana kroju pisma powinny być zmianą jednej wartości. Jeśli wymagają przeglądu wszystkich ekranów i osobnych zadań dla każdego modułu, produkt nie ma wspólnej warstwy tokenów. Koszt tego braku wraca przy każdej kolejnej zmianie.
4. Produkt wchodzi na nową platformę, markę albo motyw
Aplikacja mobilna obok webowej, druga marka na tym samym silniku, tryb ciemny: każda z tych decyzji mnoży liczbę ekranów do utrzymania. Bez systemu mnoży ją dosłownie. Z systemem nowy motyw albo marka to nowy zestaw wartości tokenów na tych samych komponentach.
5. Dostępność trzeba zapewnić w całym produkcie naraz
Wymagania WCAG 2.2 na poziomie AA dotyczą między innymi kontrastu tekstu (co najmniej 4,5:1), widocznego fokusu i rozmiaru celu (co najmniej 24 na 24 piksele CSS). Poprawianie ich ekran po ekranie jest drogie i nietrwałe. Poprawione raz w komponencie, trafiają wszędzie tam, gdzie komponent jest użyty, i nie wracają przy następnej funkcji.
Kiedy na design system jest za wcześnie
System nie zwróci się w trzech sytuacjach.
- Produkt szuka jeszcze kształtu. Jeśli główne ścieżki zmieniają się co kilka tygodni, komponenty spisane dziś będą nieaktualne za kwartał. Na tym etapie wystarcza spójny projekt UX/UI i kilka wspólnych stylów.
- Jeden projektant, jeden produkt, jedna platforma. Koszt koordynacji, który system ma usunąć, jeszcze nie istnieje.
- Nikt nie będzie systemu utrzymywał. Biblioteka bez właściciela traci aktualność po kilku wydaniach. Bez decyzji, kto zatwierdza nowe komponenty i kto aktualizuje dokumentację, lepiej nie zaczynać.
W takich przypadkach rozsądnym krokiem pośrednim jest uporządkowanie fundamentów: jedna paleta kolorów, jedna skala typografii i odstępów. Ten zakres później staje się pierwszą warstwą systemu.
Ile kosztuje zwłoka
Każdy ekran zaprojektowany bez systemu trzeba będzie kiedyś na system przenieść. Im później zapada decyzja, tym większa migracja: więcej wersji do scalenia, więcej kodu do podmiany, więcej zespołów do przekonania. Zwłoka nie jest więc darmowa, nawet gdy produkt działa.
Decyzję ułatwia prosty rachunek z ostatniego kwartału: ile elementów narysowano i zakodowano od nowa, choć istniały, ile zgłoszeń dotyczyło niespójności i ile trwała ostatnia zmiana globalna. Suma tych godzin, pomnożona przez koszt godziny zespołu, pokazuje, ile produkt płaci bez systemu. Drugą stronę rachunku opisuje tekst o tym, ile kosztuje design system.
Od czego zacząć wdrożenie design systemu
- Policzyć stan obecny. Inwentaryzacja interfejsu pokazuje, ile wersji tych samych elementów jest w produkcie i które z nich zostają.
- Ustalić fundamenty. Kolory, typografia, odstępy i tokeny. Bez nich komponenty nie mają z czego korzystać.
- Zbudować najczęściej używane komponenty. Kilkanaście elementów pokrywa większość ekranów. Ich listę zawiera tekst o tym, co powinien zawierać design system.
- Wskazać właściciela. Jedna osoba albo mały zespół, który zatwierdza zmiany i publikuje je pozostałym.
- Wdrażać przy okazji bieżących prac. Nowe funkcje powstają już z komponentów systemu, a stare ekrany migrują wtedy, gdy i tak są zmieniane. Osobny projekt „przepisania wszystkiego” rzadko dostaje budżet.
Design system w Squares
Projektujemy design systemy dla produktów, nad którymi pracuje kilka zespołów albo które działają pod kilkoma markami, od 12 000 zł netto. Zaczynamy od audytu obecnego stanu, po którym zespół dostaje zakres i wycenę. Gdy na system jest za wcześnie, mówimy to wprost i proponujemy projekt UX/UI z uporządkowanymi fundamentami.
Najczęstsze pytania
Kiedy firma potrzebuje design systemu?
Design system jest potrzebny, gdy nad produktem pracuje kilka osób lub zespołów, te same elementy istnieją w kilku wersjach, a poprawka w jednym miejscu nie trafia do pozostałych. Dotyczy to także firm z kilkoma produktami lub markami. Przy jednym małym produkcie i jednym projektancie wystarcza spójny projekt UX/UI z uporządkowanymi kolorami, typografią i odstępami.
Czy design system można wdrożyć w istniejącym produkcie?
Tak, i tak dzieje się najczęściej. Prace zaczynają się od inwentaryzacji obecnego interfejsu i decyzji, które wersje elementów zostają. Nowe funkcje powstają już z komponentów systemu, a starsze ekrany migrują przy okazji zmian, które i tak są zaplanowane. Dzięki temu wdrożenie nie wymaga zatrzymania roadmapy ani osobnego projektu przebudowy całego produktu.
Kto powinien utrzymywać design system?
System potrzebuje właściciela: jednej osoby albo małego zespołu, który zatwierdza nowe komponenty, aktualizuje bibliotekę i dokumentację oraz informuje pozostałe zespoły o zmianach. Zwykle jest to projektant i programista frontendu po stronie firmy. Gdy brakuje na to osób, utrzymanie przejmuje zewnętrzny zespół w modelu godzinowym, na przykład w ramach Pakietów UX.
Czym design system różni się od biblioteki komponentów?
Biblioteka komponentów jest zbiorem gotowych elementów interfejsu. Design system łączy bibliotekę z fundamentami, zasadami użycia i dokumentacją, czyli mówi, kiedy użyć którego komponentu i jak dodawać nowe. Bez zasad biblioteka szybko traci spójność, bo każdy zespół dopisuje własne warianty, a liczba wersji tego samego elementu znów rośnie.
