Design system - co to jest i dlaczego warto go mieć (+ atomic design)

Design system (w polskich zespołach nazywany też systemem projektowania) to wspólny język zespołu projektującego i budującego produkt cyfrowy: zestaw gotowych elementów interfejsu, reguł ich stosowania oraz wartości, które opisują wygląd marki w sposób zrozumiały zarówno dla projektanta, jak i programisty. Dzięki niemu przycisk wygląda tak samo na każdej podstronie, a nowa sekcja powstaje w godzinę zamiast w dzień.

W tym artykule wyjaśniamy, z czego składa się design system, czym różni się od księgi znaku i przewodnika po stylu, jak działa metoda atomic design, jak zbudować system krok po kroku i - co najważniejsze dla firm zamawiających stronę - kiedy taka inwestycja się zwraca, a kiedy jest przerostem formy nad treścią. Tło całego procesu projektowego opisaliśmy w artykule o projektowaniu stron internetowych.

Czym jest design system?

Design system to kompletny, udokumentowany zestaw decyzji projektowych i gotowych do użycia komponentów, który pozwala budować spójne interfejsy szybciej i taniej. To nie jest pojedynczy plik ani jeden dokument - to żywe narzędzie, rozwijane razem z produktem.

Trzy warstwy każdego systemu

• Fundamenty: kolory, typografia, odstępy, siatka, ikony, cienie - opisane jako nazwane wartości.
• Komponenty: przyciski, pola formularzy, karty, nawigacja, tabele, komunikaty - każdy w wielu stanach.
• Wzorce i zasady: jak łączyć elementy w sekcje, kiedy używać którego wariantu, jak pisać teksty w interfejsie.

Dla kogo jest design system

Dla projektantów, którzy nie muszą za każdym razem wymyślać przycisku od nowa. Dla programistów, którzy dostają gotowe komponenty w kodzie zamiast rozrysowanych ekranów do przepisania. Dla marketingu, który może samodzielnie złożyć nową podstronę z gotowych klocków. I dla właściciela firmy, który płaci mniej za każdą kolejną zmianę.

Prosty przykład

Bez systemu projektant rysuje na stronie głównej niebieski przycisk z zaokrągleniem 8 pikseli, na podstronie usługi - odrobinę inny odcień z zaokrągleniem 6 pikseli, a programista przy formularzu robi trzeci wariant. Po roku strona ma dwanaście różnych przycisków. Z systemem istnieje jeden element przycisku w trzech wariantach i czterech stanach, a każda zmiana wprowadzona w jednym miejscu pojawia się wszędzie.

Z czego składa się design system?

Design system składa się z tokenów, biblioteki komponentów, wzorców układów, zasad dostępności, wytycznych dotyczących treści oraz dokumentacji. Małe systemy zawierają tylko pierwsze dwa elementy, duże - wszystkie sześć.

Tokeny - fundament systemu

Tokeny to nazwane wartości zamiast surowych liczb. Zamiast koloru zapisanego jako kod szesnastkowy w stu miejscach, system ma token kolor-akcji. Zmiana odcienia marki to wtedy edycja jednego tokena - projekt w edytorze i kod na stronie zmieniają się jednocześnie. Tokeny obejmują kolory, rozmiary pisma, odstępy, zaokrąglenia, cienie i czasy animacji.

Komponenty i ich stany

Każdy element ma kilka stanów: spoczynku, najechania kursorem, aktywny, wyłączony, błędu, ładowania. To właśnie brak zaprojektowanych stanów jest najczęstszą przyczyną niespójności na gotowych stronach - programista musi je wymyślić sam. Dobrze opisany komponent przycisku ma też warianty: główny, drugorzędny, tekstowy, z ikoną.

Czym design system różni się od księgi znaku i style guide'u?

Księga znaku opisuje markę - logo, kolory, kroje pisma - głównie na potrzeby druku i komunikacji. Style guide opisuje wygląd interfejsu. Design system idzie dalej: zawiera gotowe, działające elementy w edytorze i w kodzie oraz zasady ich łączenia. Każde kolejne narzędzie zawiera poprzednie.

Co to oznacza w praktyce

Firma, która ma tylko księgę znaku, przy każdej nowej podstronie zaczyna projektowanie od kolorów i fontów. Firma z biblioteką komponentów zaczyna od gotowych elementów, ale programista wciąż przepisuje je na kod. Firma z pełnym systemem składa nową podstronę z klocków istniejących zarówno w projekcie, jak i w kodzie - i to jest główna różnica w koszcie rozwoju.

Na czym polega atomic design?

Atomic design to metoda budowania systemu interfejsu od najmniejszych elementów do całych stron, oparta na analogii do chemii: atomy łączą się w molekuły, molekuły w organizmy, organizmy w szablony, a szablony wypełnione treścią stają się stronami. Metoda porządkuje pracę i sprawia, że każdy element ma swoje miejsce w hierarchii.

Atomy

Najmniejsze elementy, których nie da się sensownie podzielić: etykieta, pole tekstowe, przycisk, ikona, kolor, krój pisma. Same w sobie rzadko są użyteczne, ale od nich wszystko się zaczyna.

Molekuły

Proste grupy atomów działające razem: pole wyszukiwania złożone z etykiety, pola i przycisku; karta kontaktu z ikoną, tekstem i linkiem. Molekuła ma jedną funkcję i daje się łatwo powtórzyć w różnych miejscach.

Organizmy

Większe, samodzielne sekcje interfejsu złożone z molekuł: nagłówek strony z logo, menu i wyszukiwarką; sekcja z opiniami klientów; stopka. To poziom, na którym zaczyna być widać charakter strony.

Szablony

Układy stron złożone z organizmów, jeszcze bez docelowej treści - odpowiednik szkieletu układu. Szablon pokazuje strukturę podstrony usługi, wpisu blogowego czy strony kontaktowej. Więcej o tym etapie piszemy w tekście o wireframe'ach i makietach.

Strony

Szablony wypełnione prawdziwą treścią - konkretnymi tekstami, zdjęciami i danymi. Na tym poziomie sprawdza się, czy system działa w realnych warunkach: czy nagłówki się mieszczą, czy karty wyglądają dobrze z długim opisem, czy lista działa z trzema i z trzydziestoma elementami.

Czy atomic design zawsze się sprawdza

Metoda jest świetnym sposobem myślenia, ale sztywne trzymanie się pięciu poziomów bywa kłopotliwe - zespoły spierają się, czy dany element jest molekułą czy organizmem. W praktyce wiele zespołów stosuje uproszczony podział na fundamenty, elementy i wzorce. Ważniejsza od nazewnictwa jest zasada: buduj od małego do dużego i nie projektuj tego samego dwa razy.

Kiedy design system się opłaca?

Design system opłaca się wtedy, gdy koszt jego zbudowania jest niższy niż suma oszczędności przy kolejnych zmianach i podstronach. W praktyce próg opłacalności przekracza się przy serwisach z kilkunastoma unikalnymi układami, aplikacjach oraz projektach rozwijanych stale przez kilka osób.

Sytuacje, w których warto

• Rozbudowany serwis: wiele typów podstron, regularne dodawanie nowych sekcji.
• Kilka produktów jednej marki: strona, sklep, panel klienta, aplikacja mobilna.
• Zespół kilku osób: projektanci i programiści pracujący równolegle.
• Częste kampanie: landing pages budowane co miesiąc z tych samych klocków.
• Planowany rebranding: zmiana kolorów w tokenach zamiast przerabiania setek ekranów.

Sytuacje, w których to przerost formy

• Jednorazowa wizytówka: kilka podstron, które zmieniają się raz na kilka lat.
• Strona budowana na gotowym szablonie: szablon sam w sobie jest prostym systemem.
• Projekt w fazie testowania pomysłu: najpierw sprawdź, czy produkt ma sens.

Lekka wersja dla stron firmowych

Dla typowej strony firmowej rozsądnym kompromisem jest mini-system: tokeny kolorów, typografii i odstępów oraz dziesięć, piętnaście podstawowych komponentów - przyciski, pola formularzy, karty, nagłówki sekcji, bloki opinii. Taki zestaw powstaje w kilka dni i zwraca się już przy pierwszej rozbudowie serwisu.

Firmy rzadko przychodzą do nas po design system. Przychodzą, bo każda nowa podstrona kosztuje tyle samo co pierwsza, a strona po trzech latach wygląda jak zlepek pięciu różnych projektów. Wtedy okazuje się, że brakowało nie grafika, tylko systemu, który pilnowałby spójności za nich.

Krzysztof Domiński, Smartwww

Jak zbudować design system krok po kroku?

Design system buduje się od inwentaryzacji istniejących elementów, przez ustalenie tokenów i elementów, po dokumentację i wdrożenie w kodzie. Kluczowe jest zaczynanie od tego, co już jest używane, a nie od idealnej wizji oderwanej od realnego produktu.

1. Inwentaryzacja: zrób zrzuty wszystkich przycisków, pól, kart i nagłówków z obecnej strony - zwykle okazuje się, że jest ich trzy razy więcej, niż powinno.
2. Ujednolicenie fundamentów: wybierz paletę, skalę typograficzną i skalę odstępów, zapisz je jako tokeny.
3. Podstawowe komponenty: zaprojektuj przycisk, pole formularza, kartę, nagłówek sekcji i link - każdy we wszystkich stanach.
4. Wzorce: złóż z elementów najczęściej używane sekcje - opinie, cennik, formularz, lista usług.
5. Dostępność: sprawdź kontrast, rozmiary, fokus i etykiety na poziomie komponentów, nie ekranów.
6. Dokumentacja: dla każdego elementu krótko opisz, kiedy go używać, a kiedy nie.
7. Wdrożenie w kodzie: programista odwzorowuje tokeny i elementy, najlepiej jako wspólną bibliotekę.
8. Zasady rozwoju: ustal, kto może dodać nowy komponent i jak się to zgłasza.

Zacznij od małego

Najczęstszy błąd to próba zbudowania kompletnego systemu przed pierwszym wdrożeniem. Lepiej wystartować z dziesięcioma elementami, które faktycznie są używane, i rozbudowywać bibliotekę przy każdej nowej potrzebie. System, który powstaje obok produktu, zamiast dla niego, zwykle trafia do szuflady.

Nazewnictwo, które rozumie cały zespół

Nazwy tokenów i komponentów powinny opisywać funkcję, a nie wygląd. Kolor-akcji zamiast niebieski-500, przycisk-glowny zamiast duzy-niebieski-przycisk. Dzięki temu przy zmianie koloru marki nazwy nadal mają sens, a projektant i programista mówią tym samym językiem.

Jakich narzędzi używa się do budowy design systemu?

Większość zespołów buduje system w edytorze projektowym pracującym w przeglądarce, który obsługuje zmienne, elementy z wariantami i współdzielone biblioteki. Po stronie kodu system trafia do biblioteki komponentów, często z osobną stroną dokumentacji.

Najpopularniejszy dziś edytor, w którym powstaje większość systemów projektowych, opisaliśmy w tekście o tym, czym jest Figma.

Jakie korzyści daje design system firmie?

Design system obniża koszt i czas każdej kolejnej zmiany, poprawia spójność marki, ułatwia wdrażanie nowych osób do zespołu i sprawia, że spójny wygląd, dostępność oraz jakość są wbudowane w każdy element, a nie sprawdzane po fakcie.

• Szybsza praca: nowa podstrona powstaje z gotowych klocków.
• Niższy koszt zmian: jedna poprawka w komponencie działa w całym serwisie.
• Spójność marki: strona, sklep i aplikacja wyglądają jak jeden produkt.
• Mniej błędów: stany i warianty są zaprojektowane, a nie wymyślane przez programistę.
• Łatwiejsze wdrożenie nowych osób: dokumentacja zastępuje godziny tłumaczenia.
• Dostępność z automatu: kontrast i etykiety pilnowane na poziomie elementu.

Jak zmierzyć efekt

Porównaj czas potrzebny na przygotowanie nowej podstrony przed wdrożeniem systemu i po nim, policz liczbę wariantów przycisków i kolorów na stronie oraz liczbę zgłaszanych niespójności. W dobrze wdrożonym systemie czas budowy nowej sekcji spada zwykle kilkukrotnie, a liczba wariantów tych samych elementów - do kilku.

Jak design system wspiera dostępność?

Design system przenosi dostępność z poziomu pojedynczych ekranów na poziom komponentów: jeśli przycisk ma poprawny kontrast, widoczny fokus i czytelną etykietę, każde jego użycie na stronie spełnia wymagania bez dodatkowej pracy.

To szczególnie ważne dziś, gdy dla części firm dostępność cyfrowa jest obowiązkiem prawnym, a nie tylko dobrą praktyką. Wytyczne, które warto wbudować w elementy, omawiamy w artykule o WCAG i dostępności cyfrowej. Zasady dopasowania komponentów do różnych ekranów opisaliśmy w tekście o responsywności strony.

Jakie są znane przykłady design systemów?

Najbardziej znane design systems publikują duże firmy technologiczne, udostępniając je publicznie jako wzór dla innych zespołów. Warto je przejrzeć, żeby zobaczyć, jak dojrzały system projektowania wygląda w praktyce - choć dla strony firmowej żaden z nich nie powinien być kopiowany wprost.

Material Design

System stworzony przez Google, stosowany w aplikacjach na Androida i wielu usługach internetowych. Zawiera rozbudowany design language - zasady ruchu, głębi i kolorów - oraz bibliotekę elementów dostępną zarówno dla projektantów, jak i w postaci gotowych fragmentów kodu. To jeden z najlepiej udokumentowanych systemów na rynku.

Wytyczne Apple

Apple publikuje wytyczne dotyczące projektowania interfejsu użytkownika dla swoich platform. Nie jest to pełny system w sensie bibliotek do pobrania, lecz zbiór zasad i wzorców, które decydują o spójności wszystkich aplikacji na urządzeniach tej marki. Dobry przykład tego, jak design language wpływa na całe środowisko produktów cyfrowych.

Atlassian Design System

Atlassian design to system obsługujący kilka dużych produktów jednej firmy. Pokazuje, jak jedna biblioteka components i jedna pattern library mogą zapewnić spójny interfejs w wielu narzędziach rozwijanych przez różne zespoły. To przykład systemu, który rozwiązuje problem skali, a nie tylko wyglądu.

Czego się z nich nauczyć

• Jedno źródło prawdy: w angielskiej literaturze single source of truth - wszystkie wartości pochodzą z jednego miejsca.
• Dokumentacja jest częścią produktu: każdy element ma opis, przykłady użycia i zakazy.
• System żyje: ma wersje, historię zmian i proces zgłaszania nowych potrzeb.
• Dostępność jest wbudowana: a nie dopisywana po fakcie.

Co wymaga wdrożenie design systemu w organizacji?

Wdrożenie design systemu wymaga nie tylko pracy projektanta, ale też zmiany sposobu pracy zespołu: zgody, że nowe ekrany powstają z istniejących elementów, osoby odpowiedzialnej za rozwój biblioteki i czasu na migrację starych widoków. Bez tych trzech warunków nawet najlepiej zaprojektowany system pozostanie plikiem w archiwum.

Rola UX w systemie

System nie jest wyłącznie domeną grafiki. Decyzje UX - kolejność pól w formularzu, treść komunikatów, zachowanie nawigacji - są zapisywane jako wzorce i stają się częścią biblioteki. Dzięki temu dobre rozwiązania z zakresu UX design nie giną przy kolejnym projekcie, tylko są powtarzane automatycznie. Różnice między warstwą doświadczenia a warstwą interfejsu opisaliśmy w artykule UI/UX design - czym UX różni się od UI.

Rola projektanta i programisty

Designer odpowiada za spójność i jakość elementów, programista za ich odwzorowanie w kodzie i wydajność. Najlepiej działają systemy, w których obie osoby wspólnie decydują o dodaniu nowego elementu, a zmiany w projekcie i w kodzie są wprowadzane równolegle. To właśnie ta współpraca sprawia, że the design system realnie skraca pracę, zamiast ją komplikować.

Jakie błędy najczęściej popełnia się przy budowie design systemu?

Najczęstsze błędy to budowanie systemu w oderwaniu od produktu, brak właściciela odpowiedzialnego za jego rozwój i rozjazd między wersją w edytorze a wersją w kodzie. Każdy z nich sprawia, że po kilku miesiącach system przestaje być używany.

System zbudowany na zapas

Setki elementów, z których połowy nikt nie potrzebuje. Budowa trwa miesiącami, a produkt w tym czasie rozwija się bez systemu. Lepiej zacząć od tego, co realnie jest na stronie.

Brak właściciela

Gdy nikt nie odpowiada za system, każdy dodaje własne warianty i po roku jest tak samo niespójnie jak przed wdrożeniem. Potrzebna jest jedna osoba lub mały zespół, który akceptuje zmiany.

Projekt i kod żyją osobno

Projektant zmienia kolor w edytorze, programista nie wie o zmianie. Tokeny i komponenty muszą mieć jedno źródło prawdy i proces synchronizacji - inaczej system staje się tylko ładnym plikiem.

Brak dokumentacji

Komponent bez opisu, kiedy go używać, prowadzi do nadużyć: przycisk drugorzędny w roli głównego, karta produktu w roli bloku opinii. Kilka zdań przy każdym elemencie oszczędza wiele nieporozumień.

Sztywność ponad potrzeby

System, który nie pozwala na żadne wyjątki, jest omijany. Dobry system przewiduje sposób zgłaszania nowych potrzeb i ścieżkę dodania elementu, gdy istniejące naprawdę nie wystarczają.

Ile kosztuje zbudowanie design systemu?

Lekki system dla strony firmowej to zwykle kilka dni pracy projektanta i koszt rzędu 2000-6000 zł netto. Pełny system dla rozbudowanego serwisu lub aplikacji, z wersją w kodzie i dokumentacją, to wydatek od kilkunastu do kilkudziesięciu tysięcy złotych.

Dla porównania kosztów całych projektów zajrzyj do artykułu o tym, ile kosztuje strona internetowa. Przy przebudowie istniejącego serwisu system warto wprowadzić przy okazji - więcej w tekście o redesignie strony.

Jak podchodzimy do systemów projektowych?

W każdym projekcie strony tworzymy przynajmniej lekki system: tokeny kolorów, typografii i odstępów oraz bibliotekę podstawowych komponentów, z których składamy wszystkie podstrony. Przy rozbudowanych serwisach i sklepach system obejmuje także wzorce sekcji i wersję w kodzie.

• Tokeny zapisane funkcjonalnie: łatwa zmiana kolorów marki w przyszłości.
• Komponenty we wszystkich stanach: także błędu, ładowania i wyłączenia.
• Dostępność na poziomie elementu: kontrast i fokus sprawdzone raz, działają wszędzie.
• Pliki zostają u klienta: biblioteka jest częścią projektu, nie naszym zapleczem.

Jeśli planujesz nowy serwis albo porządkujesz istniejący, zajrzyj na stronę tworzenia stron internetowych lub napisz przez formularz kontaktowy.

Słownik pojęć

• Design system: zbiór tokenów, komponentów, wzorców i zasad do budowy spójnego interfejsu.
• Token: nazwana wartość wizualna, na przykład kolor-akcji.
• Komponent: gotowy element interfejsu, na przykład przycisk czy karta.
• Wariant: odmiana elementu, na przykład przycisk główny i drugorzędny.
• Stan: wygląd komponentu w danej sytuacji - spoczynek, najechanie, błąd.
• Wzorzec: sprawdzone połączenie elementów w sekcję.
• Atomic design: metoda budowy interfejsu od atomów do stron.
• Atom, molekuła, organizm: kolejne poziomy złożoności w atomic design.
• Style guide: opis wyglądu elementów interfejsu.
• Księga znaku: zasady stosowania logo i identyfikacji marki.
• Biblioteka komponentów: zbiór gotowych elementów w edytorze lub kodzie.
• Źródło prawdy: jedno miejsce, z którego pochodzą aktualne wartości systemu.

Najczęstsze pytania

Co to jest design system w prostych słowach?

To zestaw gotowych klocków i instrukcji, z których buduje się kolejne ekrany strony lub aplikacji. Dzięki niemu każdy przycisk, formularz i nagłówek wygląda tak samo, a nowe podstrony powstają szybciej.

Czym różni się design system od UI kitu?

UI kit to zestaw gotowych elementów graficznych, często kupowany jako szablon. Design system to UI kit powiązany z zasadami użycia, tokenami, wersją w kodzie i dokumentacją, rozwijany razem z produktem.

Czy mała firma potrzebuje design systemu?

Pełnego - zwykle nie. Lekki zestaw tokenów i kilkunastu elementów przydaje się jednak przy każdej stronie, która będzie rozbudowywana, i powstaje w kilka dni.

Czym jest atomic design?

To metoda budowania interfejsu od najmniejszych elementów - atomów, takich jak przycisk czy pole - przez molekuły i organizmy, po szablony i gotowe strony. Porządkuje pracę i ułatwia ponowne wykorzystanie elementów.

Ile trwa zbudowanie design systemu?

Lekki system dla strony firmowej - kilka dni. System dla rozbudowanego serwisu z wersją w kodzie - od kilku tygodni do kilku miesięcy, przy czym warto go budować etapami, równolegle z produktem.

Czy design system ogranicza kreatywność?

Ogranicza powtarzanie tych samych decyzji, a nie kreatywność. Zespół nie traci czasu na projektowanie kolejnej wersji przycisku i może skupić się na rozwiązywaniu realnych problemów użytkowników.

Kto powinien zarządzać systemem?

Najlepiej jedna osoba lub mały zespół łączący projektowanie i programowanie. W mniejszych firmach rolę tę często pełni agencja, która prowadzi stronę, pod warunkiem że pliki i dokumentacja zostają u klienta.

Czy mogę wdrożyć design system na istniejącej stronie?

Tak. Zaczyna się od inwentaryzacji obecnych elementów i ujednolicenia ich w tokeny i komponenty, a następnie stopniowo podmienia się stare elementy na nowe. Najrozsądniej zrobić to przy okazji przebudowy lub większej rozbudowy serwisu.