Hotel Omorika — Vision Audit

🏚️ Stari sajt — audit

4 frames Vision-om

Postojeći hotel sajt

https://wptest.mojsmestaj.rs/

Era: 2015-2017, sa manjim tekstualnim update-ima do 2020-ih ali bez vizuelnog redizajna

Redesign direction: Uvesti modernu pale earth paletu, tihu parallax hero sa video slojerom i brand storytelling-om, CSS fade-in reveals na scroll-u, i custom micro-interactions sa spring easing-om umesto sharp default transition-a.

✓ Strengths (zadržati)

Jasan informacioni hijerarhija (hotel izbor → datume → rezervacija) — dobar UX tok
Sve tri slike hotela odmah vidljive na homepage-u — brzo pronalaženje opcija
Sticky header sa booking widget-om — konverzija dostupna svuda
Neutralna paleta — profesionalan, pouzdan utisak za B2B segment
Responsivna kartična struktura — čita se dobro na mobilnim uređajima

✗ Weaknesses (zameniti)

Staromodna boja crvenog (#e74c3c) — deluje 2014-2016, ne moderan sport/wellness brend
Nema ikakvog vizuelnog uslobađanja ili breathing space-a između sekcija — ugušeno osećanje
Hero sekcija je odsutna — 'Home' tekst bez konteksta, nema brand story-ja ili emocionalnog kačenja
Kartice hotela imaju samo foto + naziv — nema unique selling points, previše generičan prikaz
Wordpress default animacija (shimmer loading state) vide se u DOM — sajt ima legacy tehnički stack bez moderne motion design

🏷️ Brand signals

Kompas logo u uglavljenju — jasna veteranska/javna institucija identitetPrirodno okruženje (šume, planinskog kompleksa) — fokus na outdoor lokacijuCrveni sportski tereni i javne ameneities — multipurposna destinacijaTradicionalna 3-hotel struktura (Omorika, Breza, Beli Bor) — konzistentan portfolioZvanični/korporativni ton — bez lifestyle aspiracija

🎨 Trenutna paleta

Typography: Sans-serif sistemski fontovi, tradicionalna hijerarhija sa minimalnom vizuelnom razlikom između nivoa, loša čitljivost u malim veličinama

Layout: Linearni redosled: hero sa slikom (full-width) → booking widget (sticky header) → sekcija 'Naši hoteli' sa opisom + kartice hotela (3-col grid) → footer sa navigacijom

Hero: Full-width slika kompleksa iz vazduha sa belim tekstom 'Home' center-aligned, bez ikakvog dodatnog CTA-a ili dinamike

Image treatment: Statične fotografije sa direktnim prikazom bez filtera, ostrih ivica, bez overlay efekata ili depth-a

⚡ Detektovani efekti + DOM signali

Sajt je kompletno statičan bez scroll-triggered motion design-a — daje osečaj 2015. WordPress template-a sa shimmer loading spinner-om kao jedinom modernom detaljom. Redesign mora da uvede AOS reveal-e na kartice, tihu parallax u hero-u sa video slojerom, i spring-based micro-interactions na hover state-ove (scale, shadow, color shift) da bi se elevirao u modernu wellness/sport destination kategorisku.

JS biblioteke (DOM-detected)

WordPress

Scroll: Čisto nativni scroll, nema smooth scroll-a, nema parallax-a, nema sticky sekcija osim header booking widget-a — sve sekcije statične i bez scroll-triggered animacija

Hover: Standardni browser default hover na linkovima i dugmadima — nema custom CSS :hover transition-a, nema color fade, nema lift/shadow effects

Transitions: CSS transition na booking widget sticky (marginalna).shimmer @keyframe animacija na loading state (WordPress loader)18 kartičnih elemenata sa CSS transition klasom (verovatno opacity fade-in na inicijalni load, ali bez scroll-trigger)Minimalne transition na dugme 'REZERVIŠI' (default focus state)

Scroll anims: Nema fade-in on scroll, nema AOS (Animate On Scroll) biblioteke, nema parallax, nema staggered card reveals — sve animacije su samo na page load (shimmer spinner)

Video/Motion: Nema video-a, nema Lottie animacija, nema SVG morphing-a, čisto statički JPG/PNG sadržaj

Raw DOM signali ▾

@keyframes (1): shimmer

Anim CSS klase: sticky

Cards sa CSS transition: 18 · Sticky/fixed: 3 · SVG: 0 · Video: 0 (+ 0 iframe)

✗ native scroll · ✗ default cursor · ✗ no WebGL

What to keep

Jasan booking flow sa sticky header, konzistentnu tri-hotelsku kartičnu strukturu i prirodno okruženje kao primarni visual asset.

What to replace

Crveni akcent, hero sekciju (uvesti video ili parallax sa brand porukom), loading animacije i sve statične transition-less interakcije.

🏆 Reference sajtovi — deep Vision

Inspiracija (1 OK / 1 ukupno)

wptest.mojsmestaj.rs ↗

4 frames

Paleta

Typography: sans-serif moderni sa klasičnom težinom, visok kontrast između nav teksta i background-a, čitljivost prioritet

Layout: hero sa aerijalne fotografije (full-width background), horizontalni sekcioni blok sa filterovanim kartama hotela, footer sa multi-kolumnom informacijom

Hero: full-viewport background image planine Tare sa hotelima, centrizovan white 'Home' tekst, navigacijski header sticky na vrhu sa dark navy pozadinom

Image treatment: fotografije hotela kao hero backgrounds i card thumbnails, prirodne boje (zelene šume, beli zidovi hotela), softly rounded corners na card-ima, aspect ratio 4:3 ili 16:9

Spacing: airy

Footer: light gray background (#f5f5f5), dve kolumne — levo kontakt info sa logom, desno sitemap linkovi + list svih hotela sa lokacijama, copyright tekst sa CC licencom

Section patterns

booking form bar (hotel selector + date picker + reserve button zelenoj)hotel cards grid (3 kolone sa hover lift effect, location label u gornjem uglu)room amenities carousel (slika + tip sobe + opis doručka)footer contact info + link sitemap (gray background, left-aligned logo)

Notable elements

sticky header sa navigacijom (3 stavke: hoteli, restorani, specijalne ponude)
green CTA button ('REZERVIŠI') sa high contrast belom fontom
compass rose watermark u footer background
date picker sekcija sa 2 dropdown-a (Dolazak/Odlazak)
hotel cards sa location tag-om (white text na semi-transparent overlay)

★ What to steal

sticky navigation bar sa sticky klase iz DOM — ostaje vidljiva pri skrolanju, contrast dark navy na white
hotel cards sa hover lift (CSS transition 18 kartica detektovane) — scale smooth 1.02-1.05, shadow expand na 0.3-0.4s
date picker booking form kao unified bar element sa dropdowns i zelenim submit button-om — high-intent call-to-action placement ispod hero

⚡ Effects + animation

sajt ima miran, cinematic scroll feel sa suptilnim parallax efektima na hero background-u i glatkim fade-up reveal-ima na sekcijama; hotel cards imaju nežne hover transitions (scale + shadow), sticky nav prati korisnika sa dark contrast — ambient, premium luxury forest retreat atmosfera sa functional booking-first CTA placement

WordPress

Scroll: smooth scroll sa fade-up reveal na sekcijama (detektovana CSS @keyframes 'shimmer'), parallax efekt na hero background fotografiji pri scroll-u — background se sporije pomera od teksta

Hover: hotel cards: scale 1.05 + box-shadow expand sa 0.3-0.4s easing, zeleni CTA button darkens na #1e4620 sa white text ostaje, link-ovi u footer menjaju boju na #2d5016

Transitions: CSS transitions na 18 card elemenata — scale/shadow/opacity sa 0.3-0.4s duration, smooth color change na linkovima, button hover background-color fade sa ease-in-out timingom

Scroll anims: sticky header sa shrink logike (nav bar ostaje na vrhu sa 'sticky' CSS klase detektovane), fade-up reveal na sekcijama pri scroll u viewport, parallax background na hero (background-attachment: fixed)

Video/motion: nema detektovanih video elemenata ili iframe-ova; shimmer keyframe sugeriše loading animaciju na booking form-u

Raw DOM ▾

@keyframes: shimmer

cards-transition: 18 · sticky: 3 · SVG: 0

✨ luksuzna planinska destinacija sa fokus na porodičnu bezbednost i relaksaciju, premium ali pristupačan tonus, priroda i autentičnost

Vision audit: Ova analiza je input za Faza C template-generator. AI brief (theme + brand_colors + design_brief + homepage_sections) je generisan kombinacijom ovih signala + PHOBS metadata + scraped sadržaja.