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 swoje miejsce i powód, żeby tam być. Opisuję trzy koncepcje, których używam w projektach SoraWeb, i pokazuję, co dokładnie z nich wynika na ekranie.
間 Ma: przestrzeń jako część projektu
Ma to przestrzeń, ale nie 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 następująco. Whitespace nie jest miejscem, w którym zabrakło treści. To rytm, który daje oku przerwę między jedną informacją a drugą. Sekcja z trzema akapitami i wyraźnym odstępem czyta się lepiej niż pięć akapitów ułożonych ciasno, nawet jeśli ta pierwsza mówi mniej. 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 redukuję liczbę sekcji 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ć elementów jest na niej mniej.
侘寂 Wabi-sabi: piękno w niedoskonałości
Wabi-sabi szuka piękna tam, gdzie jest asymetria, ślad użytkowania, niedoskonałość. Najlepszy przykład to kintsugi, czyli pęknięta ceramika sklejona złotem, gdzie naprawa jest najpiękniejszą częścią naczynia. Tak samo działa drewniana miska z widocznymi słojami albo stara czarka z lekkim odkształceniem. W Europie przyzwyczailiśmy się cenić symetrię i wykończenie idealne pod linijkę. W wabi-sabi taka idealność jest 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 kroju do wszystkiego: italik na podtytule, lżejszy stopień na metadanych, mocniejszy na nagłówku. Do tego detale, 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 branży budowlanej 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 odrobina dynamiki jest warta więcej niż sterylny porządek.
幽玄 Yūgen: subtelność i głębia
Yūgen jest z tych pojęć najtrudniejsze do uchwycenia. Tłumaczy się je jako „tajemnicze piękno", ale chodzi o głębię ukrytą pod prostą powierzchnią. Coś, co się czuje, choć trudno wskazać, co to właściwie jest. Efekt, który kosztował kilka godzin pracy, 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 wynika z tego głównie sposób, w jaki coś się porusza. 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. Czujesz, że coś zareagowało, ale nic nie odciąga uwagi. Wiele zależy od easingu. Zamiast domyślnego ease-in-out używam cubic-bezier(0.16, 1, 0.3, 1), przy którym animacja startuje szybko i naturalnie wyhamowuje. Czuć ją, a jednocześnie jej nie widać.
Przykład z życia: przewijanie na moich stronach obsługuje Lenis. Nikt nie odbiera tego jako „efekt smooth scroll". Strona po prostu przewija się przyjemniej niż inne. To jest właśnie yūgen.
Jak to się składa w całość
Każda z tych trzech koncepcji odpowiada za coś innego. Ma sprawia, że strona ma czym oddychać. Wabi-sabi nadaje jej charakter, dzięki któremu nie wygląda jak setka innych. Yūgen dokłada warstwę, której nie widać wprost, a która sprawia, że całość odbiera się jako dopracowaną. Razem dają efekt nieosiągalny w gotowym szablonie: stronę, którą faktycznie się czyta, która wygląda na konkretną markę, a nie na template, i która buduje zaufanie, choć klient nie umie powiedzieć, skąd ono się bierze.
Nie ma w tym ezoteryki. Pod spodem są zwykłe decyzje projektowe: ile marginesu dostaje sekcja, czy łamać symetrię układu, jakim easingiem uruchomić 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 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ę 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 solidna praca.
- Google. Ocenia, czy strona jest szybka, semantyczna i sensownie zbudowana.
Cała ta estetyka pracuje głównie na punkt drugi. Ktoś, kto przegląda trzydzieści podobnych stron 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 do realizacji. Jeśli masz konkretny projekt do omówienia, napisz.