Penge Barber.
Prémium férfi fodrászat, ahol az időpontfoglalás sosincs egy görgetésnél messzebb.
Élő oldal megnyitása
01 — A kiindulás
Mi volt a feladat?
Egy barbershopnál a weboldalnak egyetlen dolga van: elvinni a látogatót a foglalásig. A feladat, amit kitűztem magam elé: úgy megépíteni egy prémium hangulatú, sötét oldalt, hogy közben a foglalás soha ne kerüljön két kattintásnál távolabb — se a nyitóképen, se a galéria kellős közepén.
- Iparág
- Borbély
- Technológia
- HTMLCSSJavaScript
02 — A megoldás
Mit építettem?
Az oldal éles, kondenzált tipográfiára és erős kontrasztra épül, ez adja a „barber” karaktert. A tartalom görgetésre bomlik ki: a csapat- és a galériaszekció kitűzött (pinned) állapotban marad, miközben a tartalom vízszintesen mozog mellette — így egy hosszú oldal is tagolt marad.
Foglalás végig kéznél
A „Foglalj most” gomb a fejlécben marad, a nyitóképen pedig külön hangsúlyt kap. Bárhol jár a látogató, a következő lépés egy kattintás.
Scroll-vezérelt szekciók, JavaScript nélkül
A kitűzött csapat- és galériaszekció tiszta CSS-ből (sticky pozíció + view-timeline) működik, nem animációs könyvtárból — így semmit nem kell letölteni hozzá.
Átlátható árlista
Minden szolgáltatás mellett ott az időtartam és az ár. A kérdés, hogy „mennyibe kerül és mennyi ideig tart”, megválaszolódik, mielőtt feltennék.
03 — Galéria
Hogyan néz ki?
Éles vonalak a galériában is: a képek plakátként, kemény vetett árnyékkal ülnek a falon — átlósan, ahogy a borbélytükrök.
04 — Mit mutat meg
Mi a tanulság?
Ez egy koncepció, nem ügyfélmunka — így látogatottsági vagy bevételi számok nem tartoznak hozzá. Ami viszont látszik belőle:
- 01
Kitűzött (pinned), görgetésre vezérelt szekciók külső animációs könyvtár nélkül.
- 02
Sötét felület, ahol a szöveg kontrasztja végig olvasható marad.
- 03
Egyetlen, végig jelen lévő cselekvésre hívás köré rendezett oldalfelépítés.
