Design system po ludzku.

DefinicjaDesign system to uporządkowany zbiór decyzji projektowych i gotowych elementów interfejsu: kolorów, czcionek, odstępów, ikon i komponentów, takich jak przyciski, karty czy formularze, razem z zasadami ich użycia. Zarówno projektanci, jak i programiści korzystają z tego samego zestawu, więc wszystkie ekrany są spójne.

Z czego składa się design system?

Najłatwiej wyobrazić go sobie jako warstwy: od najmniejszych decyzji do gotowych stron.

Tokeny

Podstawowe decyzje zapisane pod nazwami: „kolor główny”, „odstęp duży”, „czcionka nagłówków”. Zamiast wpisywać kolor w stu miejscach, używa się nazwy.

Komponenty

Gotowe elementy: przycisk, karta, pole formularza, menu. Każdy ma kilka wariantów i stanów (np. przycisk główny i drugorzędny, zwykły i wyłączony).

Wzorce

Sprawdzone połączenia komponentów, np. formularz kontaktowy z potwierdzeniem albo sekcja opinii.

Dokumentacja

Opis, kiedy i jak czego używać. Bez niej design system szybko staje się zbiorem przypadkowych plików.

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

Księga znaku (brand book) opisuje markę: logo, kolory, czcionki, ton komunikacji, użycie na papierze i w reklamie. Design system idzie dalej i dotyczy ekranów: jak wygląda przycisk w każdym stanie, jak zachowuje się formularz z błędem, jak układają się elementy na telefonie. Dobrze, gdy design system wyrasta z księgi znaku, wtedy strona i materiały firmowe mówią jednym głosem.

Jakie są przykłady design systemów?

Najbardziej znane są publiczne systemy dużych firm: Material Design od Google i Human Interface Guidelines od Apple. Pokazują, jak daleko można to rozwinąć, ale firma nie potrzebuje systemu tej skali. Wystarczy wersja dopasowana do jednej strony albo jednej aplikacji.

Co daje design system firmie?

• Spójność. Każda podstrona wygląda jak część tej samej firmy, nawet gdy powstaje po roku.
• Szybsze zmiany. Nowy kolor marki albo inny kształt przycisków zmienia się w jednym miejscu, a nie na każdej stronie osobno.
• Szybsze nowe podstrony. Zamiast projektować od zera, składa się je z gotowych, sprawdzonych elementów.
• Mniej błędów. Komponent sprawdzony raz (na telefonie, z klawiatury, w trybie błędu) działa dobrze wszędzie.

Kiedy firma potrzebuje design systemu?

Pełny design system z dokumentacją opłaca się, gdy masz aplikację z wieloma ekranami, kilka produktów albo kilka zespołów pracujących nad tym samym. Przy stronie firmowej wystarczy wersja lekka: kilka kolorów, dwie czcionki, skala odstępów i kilkanaście komponentów zapisanych w kodzie tak, żeby każdy element istniał w jednym miejscu. Taka baza sprawia, że strona nie „rozjeżdża się” przy kolejnych zmianach, co jest typowym problemem stron rozbudowywanych przez lata.

Czy design system ma znaczenie dla Google?

Pośrednio tak. Spójne komponenty to zwykle mniej zbędnego kodu, szybsza strona i poprawna struktura nagłówków i formularzy. Pomaga też w dostępności, bo komponent zrobiony dobrze raz jest dobry wszędzie. A uporządkowana struktura strony to temat bliski architekturze informacji.