Projektowanie

Design system

Design system to zestaw powtarzalnych elementów, z których zbudowana jest strona: skala typografii, odstępy, kolory, komponenty i reguły ich łączenia. To on sprawia, że pięćdziesiąta podstrona jest spójna z pierwszą.

Bez systemu każda nowa podstrona jest projektowana od zera i odjeżdża od poprzedniej. Przyciski nabierają sześciu nieco różnych wysokości. Nagłówki zmieniają rozmiar bez powodu. Serwis z każdym miesiącem wygląda mniej spójnie i nikt nie umie wskazać momentu, w którym poszło źle. System zapobiega temu dryfowi, czyniąc spójny wybór tym najłatwiejszym.

W Webflow design system jest konkretny, nie dokumentowy: zmienne dla kolorów i odstępów, skala typografii nakładana klasami, komponenty z właściwościami ujawniającymi dokładnie tyle wariantów, ile wolno redaktorowi. Redaktor dodający podstronę składa ją z tych części i nie jest w stanie przypadkiem wymyślić siódmego przycisku.

System nie musi być duży. Kilka rozmiarów tekstu, skala odstępów, dwa lub trzy warianty przycisku i kilkanaście komponentów pokrywają większość stron firmowych. Musi być używany, a to jest część wymagająca dyscypliny, nie narzędzi.

Projektowanie i wdrażanie w Webflow