Koncepcyjny schemat architektury informacji i zachowania komponentów

Systemy

Systemy

Tekst, media, powierzchnie i responsive działają jako jeden mechanizm, dlatego projektujemy je razem.

System

Geometria tekstu

Manifest, instrukcja, proces i ledger wymagają innej długości linii. Kontrolujemy szerokość nagłówka i body oddzielnie, aby zachować czytelność i rytm. Zmiana kilku procent width nie jest traktowana jako nowa kompozycja, jeśli neutralna sylwetka pozostaje identyczna. Dla zwykłego czytania pilnujemy naturalnego measure, a dla manifestu, ledgeru czy adnotacji świadomie korzystamy z innych relacji szerokości.

Geometria mediów

Obraz może być środowiskiem, dominantą, wsparciem, panoramą, mozaiką albo częścią adnotowanego stage. Jego udział w sekcji wynika z roli informacyjnej. Nie ograniczamy media do powtarzalnego prostokąta po prawej stronie tekstu. Proporcje obrazu są porównywane między sąsiednimi sekcjami, aby nie powstał ciąg identycznych landscape-cardów różniących się wyłącznie treścią zdjęcia.

Rytm stronySekwencja sekcji zmienia gęstość i sposób prowadzenia wzroku: po dużym stage może pojawić się ledger, potem proces, następnie spokojniejszy blok czytania. Dzięki temu strona nie wygląda jak lista tego samego komponentu w różnych kolorach. Rytm strony kontroluje również wysokość sekcji: duży moment wizualny powinien być przełamany gęstszym blokiem, procesem albo krótszym proof momentem.
Powierzchnie i offsetSekcje różnią się nie tylko tłem. Używamy pełnej szerokości, contained paneli, warstw, breakoutów, przesunięć i świadomej negatywnej przestrzeni. Każdy zabieg musi mieć funkcję i nie może tworzyć pustych pól tylko dla efektu. Offset i overlap są używane tylko wtedy, gdy pomagają hierarchii; nie dokładamy warstw, które utrudniają czytanie albo tworzą sztuczną dekoracyjność.

Ciągłość

Transformacja responsive

Mobile nie jest pomniejszonym desktopem. Kolejność media/copy, grupowanie, wielkość tekstu i rytm mogą się zmienić, o ile zachowana zostaje semantyka i poprawny focus order. Każda kluczowa strona ma własny mobile rhythm zamiast jednego globalnego stacku. Transformacja jest testowana na rzeczywistym viewportcie, dlatego decyzje o kolejności, gallery/reel i sticky fallbackzie wynikają z browser renderu.

Pusta przestrzeń ma funkcję, ale nie może zastępować treści. Jeżeli blok wygląda jak mała wyspa w ogromnym polu, zmniejszamy padding, zmieniamy geometrię albo dokładamy potrzebny element informacyjny. Celem jest kontrolowana gęstość, nie maksymalna liczba kart. Gęstość jest oceniana w neutralnym wireframe: po usunięciu koloru i fotografii nadal musi być widać sensowną relację bloków, a nie przypadkowe puste pola.