Ocularia Vision Center — web stranica za progresivne naočale i pregled vida
Za Optiku Ocularia i njihov Vision Center u zagrebačkoj Ilici izradio sam redizajn web stranice visioncenter.hr, s pozicioniranjem koje se osjeti u prvoj sekundi — vrhunski opremljen centar za progresivne naočale. Cijela je stranica namjerno posložena tako da vodi prema jednoj jedinoj akciji: naručivanju na detaljan pregled vida koji traje 60 do 90 minuta i za klijente je potpuno besplatan. Nema webshopa i nema raspršivanja pažnje, jer ovaj web ne prodaje proizvod online, nego prodaje povjerenje i stručnost — trideset dvije godine poslovanja, obiteljsku tradiciju i ordinaciju u koju se dolazi po preporuci. Sve je izgrađeno kao vlastita WordPress tema od nule, bez page buildera, tako da klijent dobije lagan i brz web koji sam ureduje.
Dizajnerski jezik je editorijalan, topao i namjerno drukčiji od hladnijeg, tehničkog Optopharma, iako oba weba dijele isti Leica svijet. Osnova je čista bijela s ink crnom za tekst, mekim off-white pojasevima koji razdvajaju ritam stranice i dubokom tamnom bojom koja nosi hero, tehnološke sekcije i footer, dok je Leica crvena rezervirana za kickere, naglašene riječi u naslovima i glavni poziv na akciju. Tipografija je Outfit, self-hostana u četiri reza bez ijednog poziva prema Googleu, s naslovima u laganom rezu i negativnim razmakom slova za onaj mirni, premium editorijalni dojam, te kickerima u verzalu široko razmaknutima iznad svakog naslova. Sadržaj živi u kontejneru od 1320 piksela s fluidnim rubovima, a stranicu drže tanke hairline crte koje uvijek najavljuju sljedeći korak, istaknuti crveni gumb sa strelicom koji posjetitelja kroz cijeli web zove na pregled, te oznaka Leica Authorized Partnera koja stalno stoji u donjem kutu.
Naslovnica se otvara video prikazom same ordinacije preko cijele visine ekrana, s gradijentnim scrimom koji tekstu jamči čitljivost i sadržajem pinanim dolje lijevo, točno poravnatim s logotipom. Slijedi sekcija „Pregled o kojem se priča" koja objašnjava zašto pregled traje 60 do 90 minuta umjesto uobičajenih pet, s pet numeriranih razloga — besplatan pregled, vrhunski opremljena ordinacija, garancija na dioptriju, plaćanje do dvanaest rata i vlastito parkirno mjesto — zatim „Što su to progresivi?" sa šest Leica leća, od Monovida i Variovida do Digivida, Monovid Digitala, Duovida i Monovid Myopie, uz istaknutu 1+1 akciju dogovorenu s Leica Eyecareom. Ostatak weba nose stranice O nama, Naša ordinacija s tamnom iEXAM sekcijom i dvadeset godina radnog iskustva, Iskustva gdje stoji podatak da oko 80 posto novih klijenata dolazi po preporuci, te Kontakt. Fiksni header počinje proziran preko videa i pri skrolanju prelazi u bijeli, uz zamjenu logotipa izvedenu čistim CSS-om, a na mobitelu i tabletu pretvara se u hamburger izbornik s ispravnim aria stanjima.
Najzanimljiviji dio projekta je interaktivni prikaz leća pod naslovom „Pogledajte svijet kroz premium progresivnu leću", u kojem posjetitelj sam bira kategoriju leće i jačinu dodatka te odmah vidi kako progresiv drži oštrinu od centra do rubova. Izgrađen je kao samostalna Svelte komponenta s dva klizača, gdje su oznake kategorija izvedene kao Leica točke koje iz sive prelaze u crvenu kad se na njih dođe, a prikaz se u stvarnom vremenu slaže od četiri sloja: zamućene minijature koja služi kao trenutni placeholder dok se učitava prava fotografija, same scene, jednog od šesnaest prikaza koji odgovaraju kombinaciji četiri kategorije i četiri jačine, te statičnog sloja leće na vrhu. Da prebacivanje ne bi nikad zapinjalo, napisao sam logiku pametnog predučitavanja koja unaprijed dohvaća prvu varijantu svake kategorije, zatim preostale varijante trenutne kategorije, pamti što je već učitano i nikad ne dohvaća istu sliku dvaput, a cijeli je modul upravljiv i tipkovnicom.
Na tehničkoj strani sve je svedeno na bitno: nikakav framework ne opterećuje samu stranicu, a sav interaktivni JavaScript je vanilla i stane u dvadesetak linija — ljepljivi header, mobilni izbornik i suptilno otkrivanje sadržaja pri skrolanju izvedeno modernim IntersectionObserverom koji se sam isključi nakon prve animacije. Sve su slike u WebP formatu, fontovi su self-hostani, a prostor za slike je unaprijed rezerviran omjerima kako stranica ne bi poskakivala pri učitavanju. Jezik dokumenta je hrvatski, naslov stranice i opisi pisani su za pretragu progresivnih naočala i pregleda vida u Zagrebu, navigacija i logotipi imaju ispravne aria oznake, dekorativne slike su skrivene od čitača ekrana dok sadržajne nose opisne opise, telefon je klikabilan, a forma za naručivanje koristi skriveno honeypot polje umjesto vanjskog captcha servisa. Rezultat je topla, ljudska i vrlo brza stranica koja Ocularijin pristup vidu — bez žurbe, s punom pažnjom — prevodi u digitalni doživljaj.
