Design system
Jeden design system zamiast pięciu wersji tego samego przycisku
Bez wspólnego systemu każda nowa funkcja kosztuje więcej niż poprzednia. Projektujemy komponenty i zasady, które ten koszt zatrzymują, gdy rośnie produkt i pracujący nad nim zespół.
Opracowanie: Radosław Kołacki Aktualizacja:
Zaufali nam
Kiedy warto zbudować design system?
Każda nowa funkcja wygląda trochę inaczej. Nad produktem pracuje kilka osób lub zespołów i każdy rozwiązuje te same elementy po swojemu.
Poprawka w jednym miejscu nie trafia do pozostałych, a tempo spada z każdym wydaniem.
Dla osoby, która odpowiada za budżet produktu przed zarządem, to koszt trudny do pokazania w tabeli i łatwy do odczucia w terminach.
Dla kogo jest design system?
- Kilka zespołów pracuje nad jednym produktem i każdy rysuje ten sam przycisk po swojemu
- Product Owner albo head of product chce utrzymać jakość i tempo, gdy przybywa funkcji i ludzi
- Firma ma kilka produktów lub marek, które mają działać na wspólnych komponentach
Jak to wygląda
Jak powstaje design system krok po kroku?
01
Audyt
Sprawdzamy, ile wariantów tych samych elementów jest dziś w produkcie i gdzie interfejs się rozjeżdża.
02
Fundamenty
Ustalamy z zespołem zasady: kolory, typografię, odstępy i design tokeny, czyli nazwane wartości, z których korzysta każdy komponent.
03
Komponenty
Budujemy bibliotekę komponentów gotową do użycia w projektach, a jeśli system ma objąć kod, także w kodzie.
04
Dokumentacja
Spisujemy zasady użycia, po których zespół wie, kiedy sięgnąć po który komponent i jak dodawać nowe.
Po projekcie produkt ma jeden design system z zasadami użycia. Projektowanie przyspiesza, a jakości pilnuje system, bez dodatkowego nadzoru.
Ile kosztuje design system?
od 12 000 zł netto
Wyceniamy projektowo, od 12 000 zł netto. Kwota rośnie ze skalą produktu, a zakres i wycenę ustalamy po krótkim audycie obecnego stanu.
Rozmowa o obecnym stanie interfejsu i wstępna wycena do niczego nie zobowiązują. System powstaje etapami, od audytu po dokumentację, i po każdym etapie zespół decyduje, czy idziemy dalej. Na wiadomość odpisujemy w ciągu kilku godzin.
„Bettonico Sp. z o.o. z pełnym zaufaniem rekomenduje Squares Agencję Interaktywną i Pana Radosława Kołackiego jako wartego polecenia Partnera Biznesowego. Nasza współpraca rozpoczęła się w styczniu 2021 roku i dotychczas obejmuje swym zakresem utworzenie strony internetowej oraz projekty graficzne.”
Katarzyna Nawrocka
Opinia z Google · Cała opinia
Realizacje
Jak to wygląda w praktyce
NoHo Group: cztery marki, jeden design system
Jeden design system zastąpił cztery osobne szablony: Luca, Camping, The Bird i Cocks & Cows korzystają z tych samych komponentów, a zmiana trafia do wszystkich serwisów naraz.
Opis realizacji
Daily Effect: design system oparty o zmienne
Komponenty i motywy obsługują tryb jasny i ciemny oraz dwa warianty kolorystyczne, a zmiany wizualne w aplikacji wprowadza się w jednym miejscu.
Opis realizacji
Keramzytbud: design system dla kanałów cyfrowych marki
Paleta kolorów, typografia, ikonografia i komponenty trzymają spójny wygląd konfiguratora i pozostałych kanałów cyfrowych marki, a elementy da się wykorzystać w kolejnych projektach.
Opis realizacji
Dlaczego Squares
Projektowaliśmy design systemy dla organizacji z wieloma markami i produktami. W NoHo Group jeden system zastąpił cztery osobne szablony, a zmiana trafia do wszystkich serwisów naraz. W aplikacji Daily Effect komponenty oparte o zmienne obsługują tryb jasny i ciemny oraz dwa warianty kolorystyczne.
Pytania
Najczęstsze pytania
Czym jest design system?
Design system to wspólny zestaw komponentów interfejsu i zasad ich użycia, z którego korzystają projektanci i programiści jednego produktu albo kilku produktów. 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. Dzięki niemu ten sam przycisk nie powstaje pięć razy.
Ile kosztuje design system?
Design system kosztuje od 12 000 zł netto. Kwota rośnie ze skalą produktu: zależy od liczby komponentów i od tego, czy system ma objąć także kod. Dokładną wycenę i zakres podajemy po krótkim audycie obecnego stanu interfejsu.
Ile trwa stworzenie design systemu?
Czas stworzenia design systemu zależy od liczby komponentów i od tego, czy system obejmuje kod. Termin podajemy razem z wyceną, po krótkim audycie obecnego stanu. System powstaje w czterech etapach: audyt, fundamenty, komponenty i dokumentacja, a po każdym zespół decyduje, czy prace idą dalej.
Co wchodzi w skład design systemu?
W skład design systemu wchodzą fundamenty, biblioteka komponentów i dokumentacja. Fundamenty to kolory, typografia, odstępy i design tokeny. Biblioteka jest gotowa do użycia w projektach, a jeśli system obejmuje kod, także w kodzie. Dokumentacja opisuje, kiedy sięgnąć po który komponent i jak dodawać nowe.
Kiedy firma potrzebuje design systemu?
Design system jest potrzebny, gdy każda nowa funkcja wygląda trochę inaczej, a poprawka w jednym miejscu nie trafia do pozostałych. Dotyczy to produktów, nad którymi pracuje kilka osób lub zespołów, oraz firm z kilkoma produktami lub markami. Przy jednym małym produkcie i jednym projektancie wystarcza spójny projekt UX/UI.
Czym design system różni się od projektu UX/UI i biblioteki komponentów?
Projekt UX/UI opisuje konkretny produkt, biblioteka komponentów jest zbiorem gotowych elementów, a design system łączy bibliotekę z zasadami i dokumentacją. Bez zasad biblioteka szybko traci spójność, bo każdy zespół dodaje własne warianty. Design system mówi, kiedy użyć którego komponentu i jak dodawać nowe.
Czy design system powstaje też w kodzie?
Tak, design system może objąć także kod, a nie tylko pliki projektowe. Komponenty w kodzie przygotowuje zespół Squares albo zespół klienta na podstawie naszej dokumentacji. Zakres w kodzie wpływa na cenę i termin, dlatego decyzja o nim zapada po audycie obecnego stanu, przed wyceną.
Czy design system sprawdza się przy kilku markach lub produktach?
Tak. W NoHo Group jeden design system zastąpił cztery osobne szablony: Luca, Camping, The Bird i Cocks & Cows korzystają z tych samych komponentów, każda marka ma własną warstwę wizualną, a zmiana trafia do wszystkich serwisów naraz. W aplikacji Daily Effect ten sam zestaw komponentów obsługuje dwa warianty kolorystyczne oraz tryb jasny i ciemny.
Kto utrzymuje design system po zakończeniu projektu?
Po zakończeniu projektu design system utrzymuje zespół klienta, korzystając z dokumentacji, która opisuje, jak dodawać nowe komponenty. Gdy w zespole brakuje na to osób, rozwój systemu przejmują Pakiety UX, od 5 000 zł netto za 20 godzin, albo usługa DesignOps. W procesie Diagnoza, Projekt, Wdrożenie, Optymalizacja to etap Optymalizacji.
Czego prace nad design systemem wymagają od zespołu klienta?
Potrzebny jest dostęp do obecnych plików projektowych i produktu, bo praca zaczyna się od policzenia wariantów tych samych elementów. Zasady, czyli kolory, typografię, odstępy i tokeny, ustalamy razem z zespołem. Prace prowadzimy zdalnie, lekkie NDA podpisujemy przed audytem obecnego stanu, a etapy można zamawiać w ramach umowy ramowej.
Powiązane usługi