Layout, siatka i kolory
System siatki, spacing, hierarchia wizualna i kolory semantyczne. Fundamenty spójnego layoutu.
Wszystkie zasady
System siatki Grid System
Siatka (grid) to niewidzialna struktura, która organizuje elementy na stronie w spójny, przewidywalny sposób. 12-kolumnowa siatka pozwala dzielić szerokość na 2, 3, 4 i 6 równych części. Bez siatki elementy są umieszczone przypadkowo i interfejs wygląda chaotycznie.
Spacing i padding Spacing and Padding
Spójny spacing (odstępy) między elementami tworzy porządek i czytelność. Używaj skali spacingowej (np. 4, 8, 12, 16, 24, 32, 48px) zamiast losowych wartości. Padding wewnętrzny elementu powinien być proporcjonalny do jego wielkości i znaczenia.
Hierarchia wizualna Visual Hierarchy
Hierarchia wizualna kieruje wzrokiem użytkownika od najważniejszych elementów do mniej istotnych. Rozmiar, kolor, kontrast, pozycja i white space to narzędzia budowania hierarchii. Najważniejszy element (CTA, nagłówek) powinien być największy i najbardziej kontrastowy.
Wizualna separacja sekcji Visual Section Separation
Sekcje strony powinny być wizualnie odseparowane, żeby użytkownik widział, gdzie jedna się kończy, a druga zaczyna. Separatory to nie tylko linie. Zmiana tła, duży spacing, nagłówek sekcji lub zmiana layoutu skutecznie oddzielają bloki treści.
Równowaga wizualna Visual Balance
Strona powinna wyglądać na zbalansowaną, nawet jeśli nie jest symetryczna. Duży obrazek po lewej stronie potrzebuje odpowiedniego tekstu lub elementu po prawej. Niezbalansowany layout sprawia, że strona wygląda na niedokończoną lub uszkodzoną.
Modularność komponentów Component Modularity
Interfejs powinien być zbudowany z powtarzalnych, niezależnych komponentów (przycisk, karta, modal, input). Każdy komponent powinien działać samodzielnie i być reużywalny w różnych kontekstach. Modularność przyspiesza projektowanie i zapewnia spójność.
Kolory semantyczne Semantic Colors
Kolory w interfejsie powinny nieść znaczenie: zielony to sukces, czerwony to błąd, żółty to ostrzeżenie, niebieski to informacja. Konsekwentne stosowanie kolorów semantycznych sprawia, że użytkownik rozumie status bez czytania tekstu.
Ograniczenie palety kolorów Color Palette Limitation
Interfejs powinien używać ograniczonej palety: 1-2 kolory marki, 1-2 kolory akcentowe, skala szarości i kolory semantyczne. Zbyt wiele kolorów sprawia, że nic się nie wyróżnia, a interfejs wygląda jak choinka. Kolory powinny pełnić funkcję, nie dekorację.
Neutralne tło i kontrast Neutral Background and Contrast
Tło interfejsu powinno być neutralne (biały, jasny szary), żeby treść i interaktywne elementy wyróżniały się na nim. Kolorowe tło rywalizuje z przyciskami, tekstem i obrazami o uwagę użytkownika. Neutralne tło to cichy fundament, na którym treść jest bohaterem.