Kako smo napravili Tišinu

Tišina znači mir, odsutnost buke. Prije nego što smo napisali ijedan redak koda, ta riječ bila je cijeli brief.

Većina web stranica restorana rješava uži problem nego što misle. Pokažu vam radno vrijeme, galeriju, PDF jelovnik ako imate sreće, i gumb za poziv restorana. To je sasvim dobra stranica za mjesto koje želi da već znate u što ulazite. Pogrešna je za koncept izgrađen oko ritma — gdje je poanta da se ne žurite, a ni kuhinja.

Brief koji smo si sami zadali

Tišina je jedan od naših vlastitih koncepata: restoran sporog objedovanja izgrađen oko regionalnih namirnica i blagovaonice koja prima 28 ljudi, namjerno. Dovoljno malo da je svaki stol bitan, dovoljno malo da proces rezervacije nije mogao biti samo generički widget nalijepljen na predložak.

Izazov nije bio tehničke prirode u uobičajenom smislu. Bio je u tome što su "tišina" i "strpljenje" osjećaji, ne značajke, a web stranica ima otprilike četiri sekunde da prenese osjećaj prije nego netko odluči hoće li nastaviti skrolati.

Što smo zapravo napravili

Struktura je namjerno jednostavna. Jedan scroll, četiri pokreta: prostor, hrana, ljudi iza svega, stol. Bez labirinta navigacije, jer web stranica restorana ne treba informacijsku arhitekturu — treba razlog da ostanete na stranici još trideset sekundi.

Tranzicije nose ton. Stranicu smo izgradili na Next.js okviru s Framer Motion bibliotekom, konkretno zato što nam same CSS tranzicije nisu mogle dati vrstu cross-fade ritma koju smo htjeli između sekcija. Većina scroll efekata koristi linearnu ili ease-out krivulju jer je to zadano — mi nismo. Ručno smo podesili prilagođenu kubičnu Bézierovu krivulju koja pokret opterećuje na početku pa ga pušta da se polako smiri, isti oblik kakav biste koristili za filmski rack-focus, ne za UI obavijest. Dovoljno sporo da se osjeća neužurbano, dovoljno brzo da nitko ne pomisli da je stranica pokvarena. Ta razlika zvuči sitno. Na stranici sporog objedovanja to je cijela poanta: ako pokret djeluje požurano, restoran djeluje požurano, i koncept se raspada prije nego itko pročita ijednu riječ teksta.

Jelovnik je tipografija, ne PDF. Izgradili smo interaktivni jelovnik usmjeren isključivo na tipografiju i razmak — bez fotografija hrane koje odvlače pažnju, bez ikona. Sezonske namirnice i regionalna baština postaju sadržaj umjesto dekoracije oko sadržaja.

Rezervacija je kratka jer je prostor malen. S 28 mjesta nema razloga tjerati nekoga kroz pet ekrana da zatraži stol. Proces rezervacije izgrađen je oko tog točnog broja — ne generičkog widgeta treće strane kojemu nije stalo koliko je prostor zapravo velik.

Odluka koja je najviše značila

Slike smo namjerno stavili na Vercelovu edge mrežu, ne kao naknadnu misao. Fotografija hrane najteži je element na stranici restorana, a ljudi koji najvjerojatnije dolaze — skrolajući mobitelom, odlučujući gdje večerati večeras — imaju najmanje strpljenja za spor učitavanje. Largest Contentful Paint metrika je koja to stvarno hvata: mjeri kada se najveći, najznačajniji element na ekranu dovrši renderirati, a na stranici restorana to je gotovo uvijek fotografija, ne naslov. Lijepa fotografija koja se učitava tri sekunde već je izgubila — i posjetitelja i rezultat. Posluživanje unaprijed dimenzioniranog WebP formata s ruba mreže, blizu mjesta gdje se posjetitelj zapravo nalazi, dosadna je odluka. Ujedno je i ona koju većina web stranica restorana preskače, zato je upravo ona bitna.

Što bih rekao nekome tko gradi nešto slično

Ako je vaš proizvod prije osjećaj nego popis značajki, ne počinjite sa strukturom stranice. Počnite s riječju koja opisuje osjećaj, i neka svaka odluka — tempo tranzicije, debljina fonta, koliko praznog prostora okružuje jelovnik — odgovara toj riječi. "Brzo i moderno" piše u svakom briefu. Nije pisalo u našem, i stranica je zbog toga bolja.

Tišina je konceptualna izvedba — ne stvarni klijentski restoran — što znači da smo svaku od ovih odluka mogli donijeti bez dioničara koji traži glasniju naslovnu fotografiju. To je prednost izgradnje nečega što pokazuje što je moguće, umjesto prilagodbe tuđeg postojećeg brenda. Sljedeća verzija ovoga, za pravu kuhinju, polazi od svega što smo ovdje naučili.