Co to jest design system? Pokazujemy nasz

Kiedy przenosiliśmy blog na naszą stronę, coś było nie tak. Akapit od zdjęcia dzieliło 40 px, ramkę od nagłówka 72 px, a obraz od tekstu 88 px. Nikt by tego nie nazwał błędem. Ale strona przestała oddychać równo.

Poprawiliśmy to jedną regułą, a nie w kilkudziesięciu miejscach osobno. Dało się, bo mamy design system. Pokazujemy, jak wygląda, jak działa na co dzień i jak zbudować własny.

Co to jest design system?

To zasady marki zamienione w gotowe klocki. Kolory mają nazwy. Odstępy biorą się ze skali, a nie z wyczucia. Przycisk jest zaprojektowany raz i wszędzie wygląda tak samo.

Nowa strona, post czy ulotka nie powstaje więc od zera. Składa się z elementów, które już są. Projektant nie wymyśla ich za każdym razem od nowa, tylko układa.

Czym design system różni się od księgi znaku?

Księga znaku mówi, jaki jest kolor marki i jak wygląda logo. Design system daje gotowe elementy w tym kolorze: przycisk, kartę wpisu, ramkę z wyróżnieniem.

Księga to zasady. System to zasady zamienione w klocki, z których buduje się kolejne strony. Jedno nie zastępuje drugiego: system stoi na księdze znaku.

Co powinno być w księdze znaku ↗

Z czego składa się nasz system?

1. 01

   Kolory

   Dwanaście nazwanych kolorów, w tym jeden akcent: żółty. Domyślną paletę narzędzia wyłączyliśmy, więc spośród gotowych kolorów nie da się sięgnąć po żaden spoza listy.

2. 02

   Odstępy

   Siedem wartości: 8, 16, 24, 32, 64, 96 i 160 px. Każdy margines na stronie to jedna z nich. Na telefonie sekcje dzieli 80 px zamiast 160.

3. 03

   Pismo

   Dwa kroje: Bricolage Grotesque w nagłówkach i PP Neue Montreal w tekście. Do tego osiem rozmiarów, od drobnego podpisu po nagłówek strony.

4. 04

   Rogi i ruch

   Trzy promienie zaokrąglenia: 32 px dla dużych zdjęć, 24 px dla ramek w tekście i 16 px dla małych elementów i na telefonie. Do tego dwie krzywe animacji, jedna dla tekstu i jedna dla reszty, i trzy czasy: 0,4, 0,8 i 1,4 s.

5. 05

   Komponenty

   Około trzydziestu gotowych elementów: od nagłówka sekcji, przez kartę projektu, po ramkę i kroki, z których składa się ten wpis.

6. 06

   Strona wzorcowa

   Wszystkie elementy w jednym miejscu, na ukrytej podstronie. Tam sprawdzamy zmianę, zanim trafi na stronę.

Od koloru do całej strony

System ma piętra. Na dole są pojedyncze wartości, na górze gotowe strony. Każde piętro korzysta tylko z tego, co jest pod nim. Zobacz, jak nasz żółty wędruje w górę.

1. 1
   #f0ce4e

   Wartość

   Sam odcień żółtego. Na tym poziomie nikt go jeszcze nie używa.

2. 2
   brand

   Nazwa

   Odcień dostaje nazwę według roli: akcent marki. Od teraz w kodzie pojawia się tylko nazwa.

3. 3
   link ze strzałką

   Element

   Z nazwy powstają klocki: żółty link ze strzałką, wyróżnione słowo w nagłówku.

4. 4
   blok kontaktu

   Sekcja

   Klocki składają się w większą całość: ciemny blok z hasłem, wyróżnionym słowem i linkiem „Napisz do nas”.

5. 5
   strona

   Strona

   Bloki kontaktu zamykają kolejne podstrony. Żółty wygląda w nich wszędzie tak samo, bo pochodzi z jednego miejsca.

Dlatego zmiana na dole działa aż do góry. Wystarczy poprawić wartość, a poprawią się wszystkie strony, które z niej korzystają.

Dlaczego kolor ma nazwę, a nie numer?

W naszym kodzie jasne tło strony nie nazywa się „#faf9f5”, tylko „paper”, czyli papier. Kolor pisma to „text”, a nie „#1a1a1a”. Każdy kolor nazywa się według roli, a nie według wartości. Takie nazwane wartości to w żargonie projektantów tokeny.

Daje to coś, co wygląda jak sztuczka. Nasza strona ma tryb ciemny. Nie projektowaliśmy jej od nowa. W trybie ciemnym zmienia się tylko to, co kryje się pod nazwą: papier robi się ciemny, a tekst jasny. Elementy przełączają się same!

Jedna zmiana, cała strona

Niedawno uznaliśmy, że szare sekcje na stronie są za ciężkie. Rozjaśniliśmy szary. Zmieniliśmy jedną linijkę.

Razem z nią zmieniły się wszystkie szare sekcje i panel, który przesuwa się przy przejściu między stronami. Nikt nie szukał ich po kolei.

Jedna rzecz miała zostać po staremu: cienkie linie oddzielające bloki. Na jaśniejszym tle zniknęłyby. Ale linia ma w systemie własną nazwę, „line”, więc zachowała dawny odcień. To jest właśnie zysk z nazw według roli: zmieniasz tło, a nie wszystko, co przypadkiem miało ten sam kolor.

System wie, na jakim ekranie jest

Nagłówek, który na komputerze ma 96 px, na telefonie ma 48. Sekcje dzieli 160 px na dużym ekranie i 80 na małym. Nie ustawiamy tego przy każdym nagłówku. Zmienia się wartość w systemie, a nagłówki idą za nią.

Raz nas to uratowało. Telefon obrócony poziomo jest szeroki jak tablet, ale ma niecałe 400 px wysokości. Strona brała go za duży ekran i wielki nagłówek nie mieścił się w kadrze. Wystarczyła jedna dodatkowa reguła w systemie i poprawiło się to na wszystkich podstronach naraz.

Kontrast sprawdzasz raz

Czy tekst będzie czytelny? Przy nazwanych kolorach odpowiadasz na to pytanie raz, a nie przy każdej grafice.

Nasz tekst na jasnym tle ma kontrast 16,5 do 1. Szary podpis ma 6,6 do 1, więc też jest czytelny. Za to żółty na jasnym tle ma tylko 1,5 do 1, czyli prawie go nie widać. Dlatego żółtym piszemy tylko na ciemnym tle, gdzie kontrast rośnie do 11,6 do 1. Na żółtym tle tekst jest zawsze czarny.

To jedna zasada zamiast setek decyzji. I nikt nie postawi przypadkiem żółtego napisu na białym.

Co system daje na co dzień?

Mniej decyzji. Nikt nie zastanawia się, czy odstęp ma mieć 30, czy 35 px, bo takich wartości po prostu nie ma.

Szybsze nowe strony. Nowy wpis na blogu nie wymaga projektanta. Składa się z gotowych klocków: ramki, kroków, zdjęcia na pełną szerokość.

Jeden wygląd niezależnie od tego, kto pracuje. Kiedy stronę zmieniają dwie osoby albo asystent AI, efekt i tak trzyma się tych samych zasad.

Kto z niego korzysta?

Nie tylko projektant. Programista bierze z systemu gotowe wartości, zamiast przepisywać je ze zrzutu ekranu. Osoba od marketingu składa post z szablonu. Drukarnia dostaje kolory w swoim zapisie. Asystent AI dostaje zasady, których ma się trzymać.

Im więcej osób dotyka marki, tym bardziej system się opłaca. Każda z nich podejmuje mniej decyzji, a efekt wygląda, jakby zrobiła go jedna ręka.

Design system poza ekranem

Marka nie kończy się na stronie. Jest na wizytówce, ulotce, kubku i smyczy. A tam system musi mówić innym językiem.

Ekran rozumie HEX, drukarnia CMYK, a producent gadżetów Pantone. Dlatego każdy kolor marki warto zapisać w trzech wersjach. Kiedy zamawiasz notes czy torbę, nikt nie dobiera wtedy koloru na oko.

Pamiętaj też, że ten sam odcień wychodzi inaczej na papierze, porcelanie i tkaninie. Przy kolorze, który musi się zgadzać, poproś o próbkę przed całym nakładem.

Jak utrzymać kolor marki na kubku, smyczy i worku ↗

A social media?

Post na Facebooku czy LinkedInie to ta sama marka, więc te same kolory, kroje i zaokrąglenia. Wystarczą trzy, cztery szablony, do których wracasz przy każdym poście: z pytaniem, z realizacją, z liczbą, z zapowiedzią wpisu.

Przyznajemy: sami dopiero zaczynamy tak publikować. Tak powinny wyglądać nasze szablony.

Każdy z nich składa się z tych samych elementów. Sygnet stoi zawsze w tym samym rogu. Czarna etykieta mówi, jaki to post. Kształt z sygnetu, wycięty krawędzią kadru, zmienia tylko miejsce i kolor. Dzięki temu cztery różne posty wyglądają jak jedna rodzina.

Najważniejsze nie jest to, żeby system mieć. Ważne, żeby go używać, i to regularnie. Szablon, który leży w folderze, niczego nie buduje. Rozpoznawalność buduje dwudziesty post w tym samym stylu, a nie pierwszy!

Jak zbudować design system krok po kroku?

Nie zaczynaj od pustej kartki. Kiedy przebudowywaliśmy stronę, nie wymyślaliśmy systemu od nowa. Spisaliśmy wartości, które już na niej były, i sprawdziliśmy każdą z osobna. Ty też zacznij od tego, co masz.

1. 01

   Zbierz wszystko w jednym miejscu

   Zrzuty ekranu strony, ostatnie posty, ulotki, prezentacje, oferty. Połóż je obok siebie. Ile widzisz odcieni szarości? Ile rozmiarów nagłówków? Zwykle o wiele więcej, niż się wydaje.

2. 02

   Wybierz i nazwij kolory

   Z kilkunastu podobnych odcieni zostaw jeden. Nazwij go według roli: tło, tekst, akcent, linia. Od razu zapisz go w HEX, CMYK i Pantone.

3. 03

   Ustal skalę odstępów i pisma

   Pięć do siedmiu odstępów, najlepiej wielokrotności ośmiu. Dwa kroje i kilka rozmiarów. Wszystko spoza skali po prostu znika.

4. 04

   Zrób klocki, które się powtarzają

   Zacznij od tych, których używasz najczęściej: przycisk, karta, nagłówek sekcji, szablon posta. Rzadkie elementy mogą poczekać.

5. 05

   Pokaż wszystko na jednej stronie

   Jedno miejsce, w którym widać kolory, pismo i klocki razem. To jest punkt odniesienia dla każdego, kto pracuje przy marce.

6. 06

   Wyznacz osobę, która pilnuje zmian

   Nowy element trafia najpierw do systemu, a dopiero potem do materiałów. Bez tej zasady system rozjedzie się w kilka miesięcy.

Najczęstsze błędy

System tylko w pliku projektanta. Wygląda świetnie w prezentacji, ale strona i posty żyją własnym życiem. System działa dopiero wtedy, gdy jest tam, gdzie powstają materiały: w kodzie strony, w Canvie, u drukarni.

Wyjątek „tylko ten jeden raz”. Jeden odstęp 35 px, jeden kolor spoza listy. Po roku wyjątków jest więcej niż zasad. Jeśli czegoś brakuje, dodaj to do systemu, a nie obok niego.

Za dużo na start. Sto komponentów, z których połowy nikt nie użyje. Lepiej sześć klocków, które naprawdę się powtarzają.

Zrobiony raz i zapomniany. Marka się zmienia, więc system też. Raz na kwartał przejrzyj, czego używasz, a czego nie.

Czy mała firma potrzebuje design systemu?

Nie takiego jak Google czy Apple. Ich systemy mają setki stron dokumentacji, bo obsługują tysiące projektantów. Małej firmie wystarczy kilka rzeczy, które da się przygotować w jedno popołudnie.

Pracujesz w Canvie? Zasada jest ta sama. Zestaw marki z kolorami i krojami plus kilka szablonów to już mały design system.

Design system nie jest dla wielkich firm. Jest dla każdej, która nie chce za każdym razem zaczynać od zera. Ile decyzji podejmujesz dziś od nowa przy każdej grafice?

Napisz do nas ↗