Portfolio agencji wygląda zwykle tak samo. Siatka zrzutów ekranu, nazwa klienta, trzy słowa o branży. Ładnie, schludnie i kompletnie nieinformacyjnie — bo z obrazka nie wynika, dlaczego ta strona wygląda właśnie tak, ani czy ktokolwiek się nad tym zastanawiał.
Zrzut ekranu pokazuje efekt. Nie pokazuje myślenia.
Dlatego obok normalnych prezentacji realizacji wprowadziliśmy iFOX Editions - krótkie zapiski z procesu projektowania. Format jest prosty i zawsze taki sam: jedno wydanie to jedna decyzja projektowa, jeden dowód, który można sprawdzić samemu, i żadnych obietnic.
Jak to wygląda w praktyce
W wydaniu 001 rozbieramy stronę Agencji Szabłowski i pokazujemy, co stało za konkretnymi wyborami — dlaczego ładna to za mało i które decyzje faktycznie robiły różnicę.
W 002 pokazujemy, że jedna strona może być obsługiwana na kilka sposobów, w zależności od tego, ile pracy klient chce wziąć na siebie.
A w 003 postawiliśmy sobie zupełnie inne pytanie.
Scroll ma koniec. A jeśli historia go nie ma?
Stron nauczyliśmy się czytać od góry do dołu. Nagłówek, sekcje, na samym dole stopka. Ten układ jest tak oczywisty, że przestaliśmy go zauważać — i działa świetnie, dopóki opowieść naprawdę gdzieś się kończy.
Ale nie każda się kończy.
Wybraliśmy temat, który jest tego najczystszym przykładem: cykl życia pomidora. Nasiono, kiełkowanie, korzenie, wzrost, kwitnienie, owoc, dojrzewanie, starzenie, rozkład — i znowu nasiono. Dziesięć etapów, które domykają się w pętlę.
I wtedy pojawiła się jedyna decyzja projektowa tego wydania. Skoro historia jest cyklem, interfejs nie powinien udawać prostej linii. Strona o czymś, co nie ma końca, nie może kończyć się stopką z prawami autorskimi.
Więc się nie kończy. Ostatnia scena nie mówi „koniec". Nasiono wraca pod ziemię, a dalszy ruch prowadzi czytelnika z powrotem na początek. Nawigacja przestaje być obudową opowieści i staje się jej częścią.
Zacznij od nasiona, przewijaj dalej i nie szukaj końca. Zajmuje to dwie minuty i jest jedynym sensownym sposobem, żeby ocenić, czy ten pomysł działa. Opis nie zastąpi przewinięcia.
Co z tego wynikło w robocie
Najciekawsze okazało się to, czego nie widać.
Efekt złożony ze scrollu i dwudziestu klatek jest bardzo łatwo zrobić źle. Wystarczy, że użytkownik nie może z niego wyjść, że czytnik ekranu widzi dwadzieścia bezimiennych obrazków, albo że przeglądarka dusi się od utrzymywania wszystkiego naraz w pamięci.
Dlatego pod spodem pomidora siedzą trzy warstwy, nie jedna.
Pierwsza to doświadczenie wizualne — to, co widzisz po przewinięciu. Druga to pełna wersja tekstowa całej historii, obecna w kodzie przez cały czas; bez JavaScriptu staje się po prostu normalnym artykułem, a dla czytnika ekranu jest jedyną warstwą, jaka się liczy. Klatki są w niej oznaczone jako dekoracja, żeby nikt nie słuchał tej samej opowieści dwa razy.
Trzecia warstwa to dane strukturalne i pliki dla maszyn — opis każdego etapu w formacie, który agent AI może przeczytać bez zgadywania z obrazu. Ta sama zasada, którą stosujemy u klientów: strona ma być zrozumiała także wtedy, gdy po drugiej stronie nie ma człowieka z przeglądarką - agent-readiness.
Jest też czwarta rzecz, bardziej ludzka. Osoba, która w systemie ma włączoną redukcję ruchu — bo od animacji dostaje mdłości albo migreny — dostaje wersję bez zoomu, bez rozmyć i bez automatycznego powrotu na górę. Zamiast tego widzi zdanie mówiące wprost, że historia zaczyna się od nowa. Obietnica ostatniego ekranu musi się zgadzać z tym, co strona faktycznie robi.
Żadna z tych warstw nie jest widoczna dla przeciętnego odwiedzającego. Wszystkie są powodem, dla którego to jest projekt, a nie sztuczka.
Po co nam to
Editions nie jest ofertą. Nie ma tam cennika, pakietów ani przycisku „zamów". To miejsce, w którym sprawdzamy pomysły na własnych projektach, zanim trafią do czyjejś strony — i pokazujemy proces zamiast deklaracji.
Pomidor jest eksperymentem i niczym więcej. Większość firm potrzebuje czegoś prostszego: czytelnej oferty, dobrej ścieżki do kontaktu, strony, którą da się wygodnie edytować. To jest w porządku i to robimy na co dzień.
Ale jeśli masz do opowiedzenia coś, co naprawdę jest procesem, drogą albo cyklem — historię marki, przebieg produkcji, etapy leczenia, drogę produktu od surowca do półki — to warto wiedzieć, że da się to opowiedzieć inaczej niż listą sekcji jedna pod drugą. Że forma może nieść znaczenie, zamiast tylko je obudowywać.
Na razie sprawdzamy, jak daleko da się z tym pójść.
Kolejne wydanie w przygotowaniu. Zobacz wszystkie Editions →