Hogyan építettük fel a Tišinát

A Tišina horvátul csendet jelent. Mielőtt egyetlen sornyi kódot is megírtunk volna, ez a szó volt a teljes brief.

A legtöbb étterem weboldala szűkebb problémát old meg, mint hinné. Megmutatja a nyitvatartást, egy galériát, ha szerencséd van egy PDF étlapot, és egy gombot, amivel felhívhatod az éttermet. Ez tökéletes oldal egy helynek, amely azt akarja, hogy már tudd, mibe mész bele. Rossz megoldás viszont egy tempóra épülő koncepciónak — ahol a lényeg éppen az, hogy nincs sietség, sem a konyhában.

A brief, amit magunknak adtunk

A Tišina a saját koncepcióink egyike: regionális alapanyagokra épülő, lassú étkezést kínáló étterem, amelynek étterme szándékosan mindössze 28 főt fogad. Elég kicsi ahhoz, hogy minden asztal számítson, elég kicsi ahhoz, hogy a foglalási folyamat ne lehessen egy sablonra applikált, általános widget.

A kihívás nem a szokásos értelemben volt technikai jellegű. Abban rejlett, hogy a "csend" és a "türelem" érzések, nem funkciók, egy weboldalnak pedig körülbelül négy másodperce van arra, hogy átadjon egy érzést, mielőtt valaki eldönti, görget-e tovább.

Amit valójában felépítettünk

A szerkezet szándékosan egyszerű. Egyetlen görgetés, négy mozdulat: a tér, az étel, az emberek mögötte, az asztal. Semmi navigációs labirintus, mert egy étterem weboldalának nincs szüksége információs architektúrára — arra van szüksége, hogy legyen ok még harminc másodpercig az oldalon maradni.

Az átmenetek hordozzák a hangulatot. Az oldalt Next.js alapokra építettük Framer Motion könyvtárral, kifejezetten azért, mert a sima CSS-átmenetek nem adták meg azt a kereszthalványodó ritmust, amit a szekciók között szerettünk volna. A legtöbb görgetési effekt lineáris vagy ease-out görbét használ, mert ez az alapértelmezett — mi nem ezt választottuk. Kézzel hangoltunk egy egyedi köbös Bézier-görbét, amely a mozgás elején pörget rá, majd lassan hagyja megnyugodni — ugyanaz a forma, amit egy filmes rack-focusnál használnál, nem egy UI-értesítésnél. Elég lassú ahhoz, hogy nyugodtnak hasson, elég gyors ahhoz, hogy senki ne gondolja, elromlott az oldal. Ez a különbség apróságnak hangzik. Egy lassú étkezésre épülő oldalon ez az egész lényeg: ha a mozgás kapkodottnak hat, az étterem is kapkodottnak hat, és a koncepció szétesik, mielőtt bárki elolvasna egyetlen szót is.

Az étlap tipográfia, nem PDF. Egy kizárólag tipográfiára és térközre épülő, interaktív étlapot építettünk — étel-fotók nélkül, amelyek elvonnák a figyelmet, ikonok nélkül. A szezonális alapanyagok és a regionális örökség maga lesz a tartalom, nem a tartalom körüli díszítés.

A foglalás rövid, mert a tér kicsi. 28 hellyel nincs értelme valakit öt képernyőn át végigvezetni egy asztal kéréséhez. A foglalási folyamatot pontosan erre a fix létszámra építettük — nem egy általános, külső widgetre, amelynek fogalma sincs, mekkora valójában a tér.

A döntés, ami a legtöbbet számított

A képeket tudatosan tettük a Vercel edge hálózatára, nem utólagos ötletként. Az étel-fotózás a legnehezebb elem egy étterem oldalán, és azok, akik a legvalószínűbben látogatnak el — telefonon görgetve, eldöntve, hol vacsorázzanak ma este —, azok, akiknek a legkevesebb türelmük van egy lassú betöltéshez. A Largest Contentful Paint az a mutató, amely ezt valójában megragadja: azt méri, mikor fejeződik be a képernyő legnagyobb, legjelentősebb elemének renderelése, egy étterem oldalán pedig ez szinte mindig a hero-fotó, nem a címsor. Egy gyönyörű fotó, ami három másodpercig töltődik, már elvesztette — mind a látogatót, mind a pontszámot. Az előre méretezett WebP kiszolgálása az edge-ről, minél közelebb ahhoz, ahol a látogató ténylegesen van, unalmas döntés. Ez egyben az a döntés is, amit a legtöbb étterem weboldala kihagy — pontosan ezért számít.

Amit annak mondanék, aki hasonlót épít

Ha a terméked előbb érzés, mint funkciólista, ne az oldalszerkezettel kezdd. Kezdd azzal a szóval, amely az érzést leírja, és minden döntés — az átmenet időzítése, a betűvastagság, mennyi üres tér veszi körül az étlapot — feleljen meg annak a szónak. "Gyors és modern" — ezt írja minden brief. A miénk nem ezt írta, és az oldal ettől jobb.

A Tišina koncepciós projekt — nem élő ügyfélétterem —, ami azt jelenti, hogy minden egyes döntést úgy hozhattunk meg, hogy senki nem kért hangosabb hero-képet. Ez annak az előnye, ha olyasmit építesz, ami megmutatja, mi lehetséges, ahelyett hogy valaki más már létező márkáját igazítanád. Ennek következő változata, egy valódi konyhának, mindabból indul ki, amit itt megtanultunk.