Każda rycina ma podpis
Podpis mówi, co pokazuje obraz i kiedy powstał.
Kosztuje jedną linijkę tekstu, a pozwala zaufać obrazowi.
System projektowy
Zasady, z których zbudowany jest ten katalog.
Strona składa się z jednej siatki, dwóch krojów, jednego koloru akcentu, zestawu papierowych kształtów i bloków treści. Studio, w którym Gabriela dodaje projekty, ma te same bloki, więc nowy projekt wygląda, jakby był tu od zawsze. Studium przypadku może też wisieć w jednej z trzech sal urządzonych dla jego rodzaju pracy.
I Zasady
- 1
Metoda zamiast kostiumu
Muzeum widać w podpisach, metryczkach, porównaniach i detalach; złoceń tu nie ma.
- 2
Jeden kolor niesie znaczenie
Ultramaryna oznacza linki, numery i fokus. Reszta to papier i tusz, więc kolory w samych pracach zostają nietknięte.
- 3
Uczciwie o pracy
Ekrany, daty i role są prawdziwe, a liczba, której nie da się udokumentować, nie trafia na stronę.
- 4
Ruch potwierdza zmianę
Coś się porusza, kiedy coś się zmieniło: wchodzi nowa strona, zmienia się motyw, rycina przechodzi do swojego case study.
II Znak
III Formes
Sześć kształtów wyciętych z ultramarynowego papieru, na wzór papiers découpés Matisse’a. Każdy ma na stronie jedno zadanie. Na ciemnym papierze te same pliki są pokazane jaśniej.
Algue
Alga. Strona główna, za portretem.
Feuille
Liść. Kontakt i strona 404.
Étoile
Gwiazda. Menu na telefonie.
Corail
Koral. Strona o metodzie.
Vague
Fala. W rezerwie.
Clé
Klucz. Prośba o CV.
IV Kolor
Każdy neutralny kolor ma ślad odcienia akcentu, jak chłodna ściana muzeum. Oba motywy wynikają z jednego zestawu tokenów.
Jasny
- Papier
--color-paper#F8FAFD - Karton metryczki
--color-paper-2#EEF0F6 - Linia włosowa
--color-rule#CFD1D5 - Podpisy
--color-ink-3#5F636C · 5.7:1 - Tekst pomocniczy
--color-ink-2#3F424A · 9.6:1 - Tekst
--color-ink#11141A · 17.6:1 - Ultramaryna
--color-accent#0A37B7 · 9.0:1 - Sala wykładowa
--color-hall#0B0F18
Ciemny
- Papier
--color-paper#0C0F17 - Karton metryczki
--color-paper-2#151922 - Linia włosowa
--color-rule#2C3039 - Podpisy
--color-ink-3#989BA3 · 6.9:1 - Tekst pomocniczy
--color-ink-2#BEC1C8 · 10.6:1 - Tekst
--color-ink#EBEDF1 · 16.3:1 - Ultramaryna
--color-accent#77A2FC · 7.6:1 - Sala wykładowa
--color-hall#03050A
V Pismo
- Display
Okiem historyczki sztuki.
Libre Franklin 820 · 2.5–6rem · −0.045em
- Heading
Przed i po
Libre Franklin 800 · 2–3.25rem
- Lead
Wykształcenie z historii sztuki, praca w UX.
Newsreader 400 · 1.25–1.5rem
- Body
Każdy obraz ma podpis jak w katalogu, a każdy projekt podaje swoją rolę i status.
Newsreader 400 · 1.1875rem · 1.6
- Label
Główna projektantka · 2026
Libre Franklin 600 · 0.75rem · +0.09em
VI Siatka
Siatka ma dwanaście kolumn. Tytuły stron, wpisy katalogu i metryczki zaczynają się od krawędzi. Dłuższy tekst wisi na jednej osi, dwie kolumny w głąb. Numery i daty stoją nad tytułem, do którego należą.
- MarginesWiszące tytuły sekcji
- OśTekst, decyzje i wpisy CV, do 64 znaków w wierszu
- Wolne poleMetryczki, ryciny i wycinanki
VII Bloki
Przykłady bloków ze studia, wyrenderowane tymi samymi komponentami co case studies. Ryciny są numerowane automatycznie, w kolejności czytania.
01 Tablica · Jeden obraz z numerowanym podpisem
02 Para · Dwa obrazy obok siebie
03 Przed i po · Dwa slajdy na ciemnym pasie
04 Decyzja · Numerowana decyzja projektowa
05 Cytat · Czyjeś słowa ze źródłem
Cięcie wprost w kolorze przypomina mi bezpośrednie rzeźbienie w kamieniu.
06 Wideo · YouTube lub Vimeo, ładowane po kliknięciu
07 Figma · Prototyp lub plik, ładowany po kliknięciu
08 Paleta · Kolory projektu
- Papier
#F8FAFD - Karton metryczki
#EEF0F6 - Tekst
#11141A - Podpisy
#5F636C - Ultramaryna
#0A37B7 - Sala wykładowa
#0B0F18
09 Chronologia · Etapy w skali czasu
- sty 1943–gru 1947Jazz
- sty 1948–gru 1951Kaplica Różańcowa w Vence
- sty 1952–gru 1952Basen
10 Galeria · Od dwóch do dwunastu obrazów w siatce
Elementy interfejsu
Atlas
- Klient
- Asclepyus
- Rola
- Główna projektantka
- Status
- Online od 22 sierpnia 2026
VIII Sale
Studium przypadku może wisieć w sali urządzonej dla jego rodzaju pracy, tak jak muzeum maluje ściany na nową wystawę. Sala zmienia ściany, krój tytułów i wyposażenie strony. Krój tekstu, siatka i zasady z tej strony zostają, a każda sala ma jeden kolor akcentu.
Program teatralny
Dla wydarzeń i kultury
- Papier
- Tusz
- Akcent
- Sala wykładowa
- Kroje
- Anybody, krój zmienny z osią szerokości
- Wyposażenie
- Plakat obok okładki, metryczka jako bilet, akty numerowane rzymsko, sala wykładowa jako scena.
Tablica odjazdów
Dla podróży
- Papier
- Tusz
- Akcent
- Sala wykładowa
- Kroje
- Overpass i Overpass Mono
- Wyposażenie
- Żółty rozkład jazdy w dzień i tablica klapkowa nocą, tablice peronowe przy rozdziałach, sala jako peron nocą.
Księgarnia
Dla książek i handlu
- Papier
- Tusz
- Akcent
- Sala wykładowa
- Kroje
- Young Serif i Courier Prime
- Wyposażenie
- Otwarta książka z frontyspisem, metryczka jako karta katalogowa, spis treści, sala jako czytelnia.
IX Ruch
Ruch ma trzy czasy trwania i jedną krzywą, która rusza szybko i łagodnie się zatrzymuje, bez odbicia.
--ease-outcubic-bezier(0.16, 1, 0.3, 1)--ease-incubic-bezier(0.7, 0, 0.84, 0)--ease-in-outcubic-bezier(0.65, 0, 0.35, 1)
--dur-short160 ms--dur-medium320 ms--dur-long900 ms
- Między stronami
- Nagłówek stoi w miejscu, a strona zmienia się pod nim. Okładka case study wyrasta z ryciny na stronie głównej.
- Motyw
- Przełącznik płynnie przenika całą stronę zamiast nią mignąć.
- Przy przewijaniu
- Paski chronologii rysują się, kiedy wchodzą w widok.
Kto prosi system o mniej ruchu, nie zobaczy żadnej z tych animacji: strony zmieniają się od razu, a paski są już narysowane.
X Pisanie
Słowa też mają zasady. Teksty sprawdzono pod kątem typowych oznak pisania przez AI.
- Bez półpauz i pauz w zdaniu. Wystarczy przecinek, kropka albo nawias.
- Teksty w pierwszej osobie brzmią tak, jak mówi się na co dzień.
- Twierdzenie potrzebuje źródła: CV, dokumentacji projektu albo działającej strony.
- Podpis mówi, co pokazuje obraz i kiedy powstał.
- Polskie podpisy idą za zwyczajem katalogów: Ryc. dla ryciny, Tabl. dla tablicy, fragment dla detalu.
Przed Jestem empatyczną projektantką, która zwraca uwagę na szczegóły.
Po Do projektowania interfejsów przyszłam z historii sztuki.
XI Dostępność
- Kontrast
- Najjaśniejszy tekst na stronie, czyli podpisy, ma kontrast 5,7:1 na jasnym papierze i 6,9:1 na ciemnym. Tekst główny ma ponad 16:1 w obu motywach.
- Fokus
- Dwupikselowy ultramarynowy obrys, odsunięty od elementu. Do każdej kontrolki da się dojść klawiaturą.
- Obrazy
- Studio nie opublikuje ryciny bez opisu.
- Uczciwość
- Sprawdzone narzędziami automatycznymi i ręcznie. Narzędzia nie wychwycą wszystkiego, więc traktuj to jako zapis tych testów.