Większość polskich stron firmowych wygląda, jakby walczyła o uwagę. Każda sekcja czymś krzyczy, prawie wszystko ma animację, nagłówki są pogrubione, a w jednej linii potrafią się spotkać trzy gradienty. Założenie „im więcej, tym lepiej" działa dokładnie odwrotnie. Klient zalany sygnałami nie czyta w końcu niczego.
Japoński design idzie w drugą stronę: mniej elementów, za to każdy ma miejsce i powód, żeby tam być. Opiszę trzy koncepcje, których używam w projektach SoraWeb, i pokażę, co dokładnie z nich wynika na ekranie.
間 Ma: przestrzeń jako część projektu
Ma to przestrzeń, ale nie taka rozumiana jako pustka. To świadoma odległość między elementami, która sama jest częścią kompozycji. W ogrodzie zen liczy się kamień, ale przerwa między kamieniami liczy się co najmniej tak samo.
Na stronie wygląda to tak. Whitespace nie jest miejscem, gdzie zabrakło treści. To rytm, który daje oko przerwę między jedną informacją a drugą. Sekcja z trzema akapitami i porządnym odstępem czyta się lepiej niż pięć akapitów upchanych ciasno, nawet jeśli ta pierwsza mówi mniej. Same odstępy między sekcjami też nie muszą być wszędzie identyczne. Sekcja „o nas" może być ciaśniejsza, a kontakt dostać więcej powietrza, bo domyka całość.
W praktyce na typowej stronie firmowej tnę liczbę sekcji mniej więcej o jedną trzecią, czasem o połowę, względem tego, co klient miał wcześniej. To, co zostaje, dostaje dwa razy więcej miejsca. Strona zaczyna wyglądać na droższą, choć rzeczy jest na niej mniej.
侘寂 Wabi-sabi: piękno w niedoskonałości
Wabi-sabi szuka piękna tam, gdzie jest asymetria, ślad zużycia, niedoskonałość. Najlepszy przykład to kintsugi, czyli pęknięta ceramika sklejona złotem, gdzie naprawa jest najładniejszą częścią naczynia. Tak samo działa drewniana miska z widocznymi słojami albo stara czarka z lekkim odkształceniem. U nas przyzwyczailiśmy się cenić symetrię i wykończenie idealne pod linijkę. W wabi-sabi taka idealność jest po prostu martwa, bo nic żywego nie jest symetryczne.
Na stronie przekłada się to na kilka konkretnych decyzji. Zamiast wszystko centrować, łamię układ: tekst po lewej, obraz po prawej, lekko przesunięty z osi. Typografia dostaje charakter zamiast jednego krój-do-wszystkiego, więc gdzieś pojawia się italik na podtytule, lżejszy stopień na metadanych, mocniejszy na nagłówku. I dochodzą drobiazgi, których nie ma w szablonie: własna numeracja sekcji, cienka kreska zamiast pełnego tła, subtelny szum na hero zamiast plastikowego gradientu.
Z praktyki: klient z budowlanki prosi o stronę „symetryczną i profesjonalną". Pokazuję mu dwie wersje, wycentrowaną i asymetryczną. Prawie zawsze wybiera tę drugą, choć wcześniej nie potrafił tego nazwać. Wabi-sabi to nie ozdoba, tylko założenie, że trochę dynamiki jest warte więcej niż sterylny porządek.
幽玄 Yūgen: subtelność i głębia
Yūgen jest z tych pojęć najtrudniejsze do złapania. Tłumaczy się je jako „tajemnicze piękno", ale chodzi po prostu o głębię schowaną pod prostą powierzchnią. Coś, co czuć, choć trudno wskazać palcem, co to właściwie jest. Efekt, który kosztował kilka godzin roboty, a wygląda, jakby zawsze tam był. W japońskiej estetyce yūgen to mgła nad górą albo długa pauza w rozmowie. Ważne rzeczy mówi się cicho.
Na stronie wychodzi z tego głównie sposób, w jaki coś się rusza. Tekst nie ma „wjeżdżać" na ekran z impetem, ma się spokojnie pojawiać. Hover na przycisku to nie skok na krzykliwy kolor, tylko delikatne przesunięcie i zmiana ciężaru tła, więc czujesz, że coś zareagowało, ale nic nie odciąga uwagi. Sporo zależy od easingu. Zamiast domyślnego ease-in-out sięgam po cubic-bezier(0.16, 1, 0.3, 1), przy którym animacja rusza szybko i naturalnie wyhamowuje. Czuć ją, a jednocześnie jej nie widać.
I przykład z życia: przewijanie na moich stronach obsługuje Lenis. Nikt nie patrzy na to jako na „efekt smooth scroll", po prostu strona przewija się jakoś przyjemniej niż inne. To jest właśnie yūgen.
Jak to się składa w całość
Te trzy rzeczy załatwiają trochę inne sprawy. Ma odpowiada za to, że strona ma czym oddychać. Wabi-sabi nadaje jej charakter, dzięki któremu nie wygląda jak setka innych. Yūgen dokłada tę warstwę, której nie widać wprost, a która sprawia, że całość czuć jako dopracowaną. Razem dają efekt, którego nie wyciśniesz z gotowego szablonu: stronę, którą faktycznie się czyta, która wygląda na konkretną markę, a nie na template, i która gdzieś z tyłu głowy buduje zaufanie, choć klient nie umie powiedzieć, skąd to ma.
Nie ma w tym żadnej ezoteryki. Pod spodem są zwykłe decyzje projektowe: ile marginesu dostaje sekcja, czy łamać symetrię układu, jakim easingiem ruszyć hover. Każda kosztuje pięć minut myślenia. Wszystkie razem dają stronę, której nie da się podrobić przez skopiowanie cudzego motywu.
Po co to klientowi małej firmy
Jeśli masz teraz typową stronę i zastanawiasz się, czy „japońska estetyka" to nie zbędny dodatek, to krótkie wyjaśnienie jest dla Ciebie.
Stronę projektuje się tak naprawdę dla trzech odbiorców naraz:
- Klient, który szuka usługi. Chce kupić, a nie czytać esej o filozofii.
- Klient, który sprawdza, czy można Ci zaufać. Musi poczuć, że stoi za tym dobra robota.
- Google. Patrzy na to, czy strona jest szybka, semantyczna i sensownie zbudowana.
Cała ta estetyka pracuje głównie na punkt drugi. Ktoś, kto klika po trzydziestu podobnych stronach lokalnych firm na tym samym motywie WordPressa, podświadomie zatrzyma się na tej jednej, która wygląda inaczej. Nie wytłumaczy dlaczego. Po prostu w nią wejdzie.
Na tym stoi całe SoraWeb Studio: japońskie koncepcje są fundamentem projektu, a nie naklejką na wierzchu. Każda strona, którą robię, ma w sobie to samo DNA, od firmy budowlanej po sklep z kosmetykami konopnymi.
Jeśli chcesz zobaczyć, jak to wygląda w działaniu, zajrzyj w realizacje. A jak masz konkretny projekt do obgadania, napisz.