// Realizacja 04 / 08 · projekt koncepcyjny
Fasonbarber, Poznań
Metamorfozy zamiast cennika na ścianie: klient widzi efekt, zanim usiądzie.
Projekt koncepcyjny — jak zrobiłbym stronę dla firmy z branży: barber. Firma i jej dane są fikcyjne.
- Branża
- barber
- Miasto
- Poznań
- Języki
- PL / EN
- Rodzaj
- projekt koncepcyjny
- Rok
- 2026
01 — Problem
Barber sprzedaje różnicę między „przed” a „po”, a klient szuka kogoś blisko, na telefonie. Tak zrobiłbym stronę dla barbera: efekt widać od razu, a cena i telefon są o jedno kliknięcie.
02 — Decyzje
-
Suwak przed/po
Zrobiony na clip-path, bez WebGL. Działa z klawiatury, a bez JavaScriptu oba kadry stoją obok siebie.
-
Cena na pierwszym ekranie
Cena i „Umów wizytę” widać od razu, a na telefonie przy dolnej krawędzi trzyma się pasek „Zadzwoń”.
-
Cennik z czasem
Usługi od 30 do 130 zł i od 15 do 75 minut — klient wie, ile zapłaci i ile posiedzi.
-
Kino i mosiądz
Ciemne, kinowe sekcje, mosiądz i Playfair Display. Jeden motyw ruchu — ostrze przechodzi przez stronę — i słupek barberski w SVG.
-
Uczciwie, bez liczników
Mapa jako własna ilustracja SVG, bez zmyślonych ocen i liczby opinii. Wszystkie zdjęcia z AI — kadr „po” to edycja kadru „przed” — i stopka to mówi.
03 — Efekt
Strona po polsku i angielsku z budżetem JavaScriptu około 45 KB (gzip). Wydajność na telefonie 95, na komputerze 100.
95telefon
100komputer
pomiar:
04 — Karta DNA
Z czego zbudowane jest wykończenie
Kliknij token, żeby zdjąć go z podglądu. Zostaje sam szkielet — ten sam, na którym stoi każda moja strona.
Kolory
Krój nagłówków
Zaokrąglenia
05 — Google widzi
Co ta strona mówi wyszukiwarkom i AI
- Tytuł „Fason - barber shop w Poznaniu” i opis z usługami: strzyżenie, broda, golenie brzytwą.
- Dane strukturalne HairSalon z adresem i godzinami otwarcia.
- hreflang pl/en z x-default i canonical.
- Demo z noindex (meta i X-Robots-Tag); robots.txt wpuszcza Googlebota i Bingbota tylko po to, żeby to odczytały.
06 — Na telefonie
Ta sama strona w 390 pikselach
Zrzut 390 × 844 z żywej strony. Wynik wydajności na telefonie:
95/ 100
