Design system w Squares kosztuje od 12 000 zł netto. Ta kwota obejmuje zakres podstawowy: audyt obecnego interfejsu, fundamenty, kilkanaście komponentów w Figmie i zasady ich użycia. Cena rośnie wraz z liczbą komponentów, platform i marek oraz z decyzją, czy system ma powstać także w kodzie.
Od czego zależy cena design systemu
Design system wycenia się jak projekt, a nie jak licencję. O koszcie design systemu decyduje sześć czynników, które da się ustalić przed startem prac.
- Liczba komponentów i wariantów. Przycisk z trzema rozmiarami, czterema typami i pięcioma stanami to kilkadziesiąt kombinacji do zaprojektowania i opisania. Tabela danych albo wybór daty zajmują kilka razy więcej czasu niż znacznik czy etykieta.
- Stan wyjściowy. Produkt, w którym ten sam element istnieje w kilku wersjach, wymaga najpierw decyzji, która wersja zostaje. Im więcej wariantów do uzgodnienia, tym dłuższy pierwszy etap.
- Platformy. System dla aplikacji webowej jest tańszy niż system, który ma objąć web, iOS i Androida, bo każda platforma ma własne wzorce nawigacji i własne ograniczenia.
- Motywy i marki. Tryb jasny i ciemny albo kilka marek na wspólnych komponentach wymagają warstwy tokenów semantycznych, czyli nazwanych wartości opisujących rolę koloru, a nie sam kolor.
- Kod. Biblioteka w Figmie to jedna praca, biblioteka komponentów w kodzie to druga, zwykle większa. Dochodzą testy, dokumentacja techniczna i sposób dystrybucji paczki do zespołów.
- Dokumentacja i dostępność. Zasady użycia, przykłady poprawne i błędne oraz stany wymagane przez WCAG 2.2 (fokus, kontrast, rozmiar celu dotyku) są częścią systemu, a nie dodatkiem.
Ile kosztuje design system w trzech zakresach
Poniższe zakresy opisują trzy typowe warianty. Policzyliśmy je stawką 250 zł netto za godzinę, czyli tą, w której Squares rozlicza pracę godzinową. Wiążącą wycenę podajemy po krótkim audycie obecnego stanu interfejsu.
| Zakres | Co powstaje | Nakład pracy | Koszt netto |
|---|---|---|---|
| Podstawowy | Audyt interfejsu, tokeny kolorów, typografii i odstępów, 12-15 komponentów w Figmie, krótkie zasady użycia | 48-80 godzin | 12 000-20 000 zł |
| Pełna biblioteka projektowa | 30-40 komponentów ze stanami, wzorce formularzy i tabel, tryb jasny i ciemny, dokumentacja z przykładami | 120-200 godzin | 30 000-50 000 zł |
| Projekt i kod | Pełna biblioteka projektowa oraz te same komponenty w kodzie jednej platformy, tokeny w repozytorium, dokumentacja techniczna | 280-480 godzin | 70 000-120 000 zł |
Różnica między pierwszym a trzecim wierszem wynika głównie z kodu. Jeżeli komponenty w kodzie przygotowuje zespół klienta na podstawie dokumentacji, budżet zewnętrzny zatrzymuje się na drugim wierszu.
Co zawiera cena od 12 000 zł netto
System powstaje w czterech etapach. Po każdym zespół decyduje, czy prace idą dalej.
- Audyt. Liczymy, ile wariantów tych samych elementów jest dziś w produkcie i w których miejscach interfejs traci spójność. Opis tego etapu jest w tekście o audycie design systemu.
- Fundamenty. Kolory, typografia, odstępy i design tokeny, czyli nazwane wartości, z których korzysta każdy komponent.
- Komponenty. Biblioteka gotowa do użycia w projektach. Listę, od której zaczynamy, opisuje tekst o tym, co powinien zawierać design system.
- Dokumentacja. Zasady, po których zespół wie, kiedy sięgnąć po który komponent i jak dodawać nowe.
Wycenę podajemy po rozmowie o obecnym stanie interfejsu.
Ile kosztuje utrzymanie design systemu
Design system nie kończy się w dniu oddania. Każda nowa funkcja produktu dokłada pytanie, czy wystarczą istniejące komponenty, czy potrzebny jest nowy. Ktoś musi na to pytanie odpowiadać, aktualizować bibliotekę i dokumentację. Kto powinien być właścicielem systemu, opisuje tekst o design systemie w dużym zespole.
Po zakończeniu projektu system utrzymuje zespół klienta. Gdy brakuje na to osób, rozwój przejmują Pakiety UX, od 5 000 zł netto za 20 godzin w miesiącu, albo usługa DesignOps. W budżecie rocznym utrzymanie trzeba zaplanować osobno od budowy, bo system bez opiekuna w kilka kwartałów wraca do stanu sprzed projektu.
Ile kosztuje brak design systemu
Kosztu braku systemu nie widać w żadnej pozycji budżetu, ale da się go policzyć na własnych danych. Wystarczą trzy liczby z ostatniego kwartału.
- Liczba ekranów albo funkcji, w których projektant narysował od nowa element już istniejący w produkcie.
- Liczba zgłoszeń i poprawek dotyczących niespójności interfejsu, razem z czasem ich obsługi po stronie projektu, programistów i testów.
- Czas, jaki zajęła ostatnia zmiana globalna, na przykład nowy kolor marki albo poprawa kontrastu, przemnożony przez liczbę miejsc, w których trzeba ją było wprowadzić ręcznie.
Suma tych godzin pomnożona przez koszt godziny zespołu daje kwotę, którą produkt płaci co kwartał bez systemu. Jeśli jest wyraźnie niższa niż koszt budowy i utrzymania, system jest przedwczesny. Sygnały, że moment już nadszedł, opisuje tekst o tym, kiedy wdrożyć design system.
Czy gotowa biblioteka komponentów obniża koszt
Obniża koszt kodu, nie zastępuje systemu. Otwarta biblioteka komponentów daje gotowe przyciski, pola i okna dialogowe, ale nie daje decyzji: jakie tokeny obowiązują w tym produkcie, który wariant jest dozwolony i kto zatwierdza nowe elementy. Te decyzje, zapisane w dokumentacji, stanowią właściwą wartość design systemu. Przy wycenie warto więc osobno policzyć komponenty, które można przejąć z biblioteki, i te, które są specyficzne dla produktu, jak tabele z danymi domenowymi czy kreatory wieloetapowe.
Wycena design systemu w Squares
Projektujemy design systemy dla produktów B2B i SaaS, od 12 000 zł netto. Zakres i kwotę podajemy po audycie obecnego stanu, a prace prowadzimy etapami, które można zamawiać osobno.
Najczęstsze pytania
Ile kosztuje design system?
Design system w Squares kosztuje od 12 000 zł netto za zakres podstawowy: audyt interfejsu, fundamenty, kilkanaście komponentów w Figmie i zasady użycia. Pełna biblioteka projektowa dla produktu B2B to 30 000-50 000 zł netto, a system obejmujący także kod jednej platformy 70 000-120 000 zł netto. Wiążącą wycenę podajemy po audycie.
Co najbardziej podnosi cenę design systemu?
Najbardziej podnosi ją kod. Zaprojektowanie biblioteki w Figmie to jedna praca, a zbudowanie tych samych komponentów w kodzie, z testami i dokumentacją techniczną, to druga, zwykle większa. Kolejne czynniki to liczba komponentów i wariantów, liczba platform, motywy i marki oraz stan wyjściowy interfejsu, czyli liczba wersji do uzgodnienia.
Czy design system można budować etapami?
Tak. W Squares system powstaje w czterech etapach: audyt, fundamenty, komponenty i dokumentacja. Po każdym etapie zespół decyduje, czy prace idą dalej. Taki układ pozwala zacząć od zakresu podstawowego, sprawdzić, czy biblioteka jest używana w bieżących projektach, i dopiero wtedy zamawiać kolejne komponenty albo wersję w kodzie.
Ile kosztuje utrzymanie design systemu?
Utrzymanie to stała praca: przegląd nowych potrzeb, aktualizacja biblioteki i dokumentacji. Wykonuje ją zespół klienta albo zewnętrzny projektant. W Squares służą do tego Pakiety UX, od 5 000 zł netto za 20 godzin w miesiącu, oraz usługa DesignOps. Liczba godzin zależy od tempa, w jakim produkt dostaje nowe funkcje.
