Design system portfolio, który nie krzyczy

Jak zbudować design system portfolio, który nie krzyczy?

Design system portfolio, który nie krzyczy, opiera się na ograniczeniach: jeden wyraźny akcent kolorystyczny, spokojne tło, twarda hierarchia typografii i powtarzalne odstępy zamiast chaotycznych wyjątków na każdej podstronie. Zamiast dziesięciu odcieni prawie czarnego zdefiniuj tokeny tła, powierzchni, borderów, tekstu primary i muted oraz accentu, i używaj tylko ich w komponentach. Typografia powinna mieć jeden font UI do nawigacji i etykiet, jeden display do nagłówków oraz konsekwentną skalę rozmiarów, na przykład duży H1 i czytelny lead. Karty, cienie i zaokrąglenia stosuj tylko tam, gdzie niosą interakcję; strona marki nie musi wyglądać jak panel SaaS pełen widgetów. Cel jest prosty: w pierwszym viewportcie widać markę i obietnicę, a system wizualny nie konkuruje z case studies ani z treścią bloga. Im mniej wizualnych wyjątków ad hoc, tym mocniejsza rozpoznawalność marki i tańsze kolejne landingi oraz case studies.

Jakie tokeny i reguły typografii utrzymują spójność?

Spójność utrzymują nazwane tokeny CSS oraz zakaz magicznych wartości hex wpisywanych ad hoc w pojedynczych komponentach. Każdy nowy ekran powinien składać się z istniejących przycisków, pól formularza i rytmu spacingu, na przykład siatki 8, 16, 24 i 40 pikseli, a nie z lokalnych wymysłów „tylko na tę sekcję”. Typografia wymaga stałego line-height i ograniczonej liczby wag — jeśli wszystko jest extrabold, nic nie jest naprawdę ważne. Etykiety sekcji, breadcrumbs i CTA mają te same wzorce na blogu, w usługach i w kontakcie, żeby użytkownik nie uczył się interfejsu od zera na każdej podstronie. W review designu pytaj, czy da się to zbudować z tokenów; jeśli nie, albo świadomie rozszerzasz system, albo upraszczasz makietę. Tak powstaje portfolio czytelne po roku utrzymania, nie tylko w dniu launchu. Spójność to prędkość kolejnych podstron, nie biurokracja dla samego procesu.

Jak dodać motion, żeby wspierał hierarchię, a nie hałasował?

Motion w portfolio ma prowadzić wzrok i potwierdzać interakcję, a nie wypełniać ciszy efektami dla samego efektu. Wystarczą dwa lub trzy zamierzone ruchy: delikatne wejście sekcji przy scrollu, czytelny hover na CTA lub kafelku projektu, ewentualnie płynny scroll — zawsze z obsługą prefers-reduced-motion, która wyłącza albo upraszcza animacje. Unikaj nieskończonych parallaxów, poświat i długich staggerów na każdym elemencie listy; przy wielu kartach opóźnienia sumują się do wrażenia ociężałej strony. Czas trwania trzymaj krótko, około 200 do 400 milisekund, i używaj podobnych krzywych easing w całym serwisie. Jeśli animacja nie pomaga zrozumieć, co jest klikalne albo co jest następną sekcją, usuń ją bez sentymentu. Dobry motion jest prawie niewidoczny, ale strona bez niego wydaje się martwa; zły motion jest pierwszą rzeczą, którą zapamiętuje recenzent albo klient. Mniej ruchu, więcej intencji — to reguła, która broni się na mobile i desktopie.