Sowa & Wróbel: strona kancelariiw dwóch wersjach, bez i z animacją.
To projekt pokazowy ALUK, nie zlecenie. Kancelaria „Sowa & Wróbel” nie istnieje: zbudowaliśmy ją, żeby pokazać różnicę zamiast o niej opowiadać. Ta sama strona w wersji A bez JavaScriptu i B z subtelnym ruchem działa na kancelaria.madebyaluk.pl. Taką stronę na produkcji wyceniamy w zakresie pakietu Starter.
Brief
Kancelaria radców prawnych z Poznania, dwoje partnerów. Klient trafia tu w stresie i chce w kilka sekund wiedzieć trzy rzeczy: czy zajmują się jego sprawą, ile to kosztuje i jak zadzwonić. Wszystko, co opóźnia te trzy odpowiedzi, kosztuje zapytania.
Założenie: jeden szablon, dwie wersje generowane z tej samej treści. Wersja A jako punkt odniesienia, wersja B jako maksimum ruchu, które w tej branży jeszcze pomaga. Argument dla „nudnych” nisz: pokażemy różnicę, nie opowiemy o niej.
Co pokazuje strona
- 01
Wersja A: zero JavaScriptu.
Czysty HTML i CSS. Ciemny hero na całą szerokość ze zdjęciem gabinetu, tytuł w kroju Fraunces, cztery liczby, lista specjalizacji, zespół, proces, opinie, FAQ i kontakt widoczne od razu; przejścia tylko na hoverze linków. Punkt odniesienia, nie „gorsza” wersja.
- 02
Wersja B: subtelny GSAP.
Ten sam szablon plus jeden skrypt: tytuł hero odsłania się linia po linii, a zdjęcie w tle lekko się cofa; sekcje wchodzą delikatnie przy przewijaniu (ScrollTrigger.batch, raz), liczniki lat i spraw dochodzą do wartości, zdjęcia procesu mają łagodny parallax, nawigacja twardnieje po scrollu, odpowiedź FAQ wjeżdża przy rozwinięciu.
- 03
Czego celowo nie ma.
Bez loadera, bez smooth scrolla (Lenis), bez SplitText, bez pinowanych sekcji, bez wideo w hero i bez własnego kursora. Telefon stoi w nawigacji i w hero. W tej branży każdy z tych elementów opóźnia to, po co klient przyszedł: numer i zakres spraw.
- 04
Jedna treść, dwa wyjścia.
Obie wersje powstają z jednego szablonu, więc różnią się wyłącznie warstwą ruchu. Strona wejściowa daje wybór A albo B; prefers-reduced-motion wyłącza wszystko także w B.
Na produkcję
Prezentacja to czysty HTML z GSAP z CDN. U klienta ten sam efekt budujemy na stacku, który da się utrzymać.
Astro, czasem WordPress
Dla kancelarii, gabinetu czy biura rachunkowego statyczny Astro albo, gdy klient tego potrzebuje, WordPress bez page buildera. Ruch jak w wersji B: CSS transition i jeden lekki skrypt, GSAP przez npm tylko jeśli faktycznie coś wnosi.
Zaufanie przed ruchem
Telefon i zakres spraw w pierwszych trzech sekundach, zespół z twarzami, honorarium na stronie. Animacja nie może przesunąć żadnego z tych elementów pod ekran.
Ruch z wyłącznikiem
prefers-reduced-motion wyłącza wszystko, treść jest identyczna z wersją A. Formularz i linki działają bez JavaScriptu.
Pomiar zamiast opinii
U klienta obie wersje można wystawić pod tym samym adresem i porównać zapytania. Prezentacja pokazuje różnicę; liczby przychodzą z jego ruchu, nie z naszych deklaracji.
Dla kogo
Test A/B jest argumentem dla branż, w których liczy się zaufanie i szybka decyzja. Tam mocna animacja obniża konwersję, a subtelna bywa niewidoczna, i to dobrze.
Ten styl pasuje
- kancelarie, biura rachunkowe, notariusze
- kliniki, gabinety, praktyki lekarskie
- usługi lokalne, gdzie strona ma dowieźć telefon, nie seans
Tu radzimy inaczej
- marki D2C i eventy: tam ruch sprzedaje, zobacz Haldę albo ZGIEŁK
- portfolio pracowni i studiów: tam klient ogląda, zobacz Osnowę
- produkty cyfrowe, które tłumaczą się ekranem w ruchu: zobacz Nurt
Fakty
Wyłącznie to, co zmierzyliśmy. Bez wyników biznesowych, bo prezentacja nie ma klientów.
- Pierwsze załadowanie, wersja B (1600×1000)
- 0,61 MB
- Skrypty w wersji A
- 0
Wersja B z GSAP ładuje 0,61 MB; wersja A jest lżejsza o bibliotekę, ale jej osobno nie mierzyliśmy, więc nie podajemy liczby. Wyników Lighthouse ani danych o konwersji nie ma: to prezentacja, nie strona z ruchem.
Prezentacja na żywo
Strona jest publiczna i działa w przeglądarce, z pełnym ruchem na komputerze i lżejszą wersją na telefonie. Marka jest fikcyjna, stopka strony to mówi.
Taka strona dla Twojej kancelarii?
Zacznijmy od konkretów.
Napisz, czym zajmuje się Twoja kancelaria albo gabinet. Zaproponujemy zakres w pakiecie Starter, termin i cenę, a o animacji powiemy tyle, ile naprawdę ma sens.