Preskoči na sadržaj
Udruženje otorinolaringologa
Crne Gore

Analiza postojećeg sajta, nova struktura, vizuelni identitet i komponente u Next.js-u sa Framer Motion animacijama. Pripremio Zonic Design, oktobar 2026.

Šta smo zatekli i šta mijenjamo

Pregled je rađen na osnovu javno indeksiranih stranica sajta: meni, početna, O nama, Predsjedništvo, Galerija, Press, stranice simpozijuma i PDF programi.

  • Navigacija

    Stavka za simpozijum se svake godine preimenuje (Simpozijum 2022, Simpozijum 2023, 9 SIMPOZIJUM), pa prethodni skupovi gube svoju stranicu.

    Svaki skup dobija trajnu stranicu u arhivi. U meniju stoji jedna stalna stavka za aktuelni skup.

  • Početna

    Najave iz 2019, COVID-19 i čestitke stoje jedna do druge, bez datuma i bez prioriteta.

    Jedan istaknut događaj sa odbrojavanjem, vijesti sa datumom i kategorijom, arhiva sa filterom i pretragom.

  • Tekst i SEO

    Opis i naslov sajta su bez dijakritike („Udruzenje”, „Vec”, „strucne”), isti na svim stranicama.

    Ispravni nazivi i poseban naslov i opis za svaku stranicu.

  • Jezik

    Naslovi stranica su na engleskom (Home, Contact, Press), a sadržaj na crnogorskom. Engleske verzije nema, iako su učesnici skupova međunarodni.

    Dosljedan crnogorski, uz englesku verziju stranica kongresa (next-intl).

  • Galerija i programi

    Programi skupova objavljeni su kao slike, sa imenima fajlova umjesto naslova (npr. 1-KONGRES-ORL-2024-PROGRAM-21).

    Program kao čitljiva stranica sa satnicom i PDF za preuzimanje. Galerija kao albumi po skupovima.

  • Ažurnost

    Podaci o Predsjedništvu i zvanjima nisu ažurirani.

    Sadržaj iz CMS-a, tako da sekretarijat sam mijenja podatke bez programera.

  • Za pacijente

    Sekcija postoji, ali bez strukture i bez odgovora na pitanje kada se javiti ljekaru.

    Vodič po oblastima (uho, nos, grlo), znaci za hitnu pomoć i put do specijaliste.

  • Kongres

    Prijava radova, kotizacija i odbori su zasebne kratke stranice, bez jasnog poziva na akciju.

    Jedna stranica kongresa sa pod-navigacijom, odbrojavanjem i bodovima Ljekarske komore.

Nova struktura sajta

Manje stavki u meniju, jasno odvojeni sadržaji za ljekare i pacijente, kongres kao stalna stavka. Press i Arhiva su spojeni u Aktuelno, a COVID-19 prelazi u arhivu.

Postojeći meni

  • Pocetna

  • Aktuelno

    Novosti, Arhiva

  • O nama

  • Za doktore

    Nacionalni vodiči, COVID19, Stručni sastanci, Korisni linkovi, Zbornik

  • Za pacijente

  • Galerija

  • 9 SIMPOZIJUM

    Prijava radova, Kotizacija, Predavači po pozivu, Uređivački odbor, Organizacioni odbor

  • Press

  • Contact

Novi meni

  • Početna

    Aktuelni skupIstorijatVijesti

  • O nama

    IstorijatPredsjedništvoDokumenti

  • Aktuelno

    UdruženjeKongresPacijentiPress

  • Kongres 2026

    ProgramPredavačiKotizacijaPrijava radovaOdbori i smještaj

  • Za ljekare

    VodičiProgrami skupovaLiteraturaLinkovi

  • Za pacijente

    UhoNosGrloHitni znaci

  • Galerija

    Albumi po skupovima

  • Kontakt

    Učlanjenje

Novi znak

Pužnica i silueta uha u jednom potezu, koji se zadeblja od centra ka spolja. U potpisnoj varijanti potez se nastavlja u zvučni talas: sluh, glas, dah. Znak radi u jednoj boji, na bijeloj i na tamnoj podlozi, i ostaje čitljiv i kao favicon od 16 piksela.

Boje

Svijetla, hladna paleta: porculan i magla kao pozadina, jadranska plava kao glavna boja. Crvena je preuzeta sa audiograma (oznaka desnog uha) i koristi se samo za sitne detalje.

Naslovi

Aa Čć

Newsreader

Serif sa optičkim rezovima, nastao za čitanje dugih tekstova. Daje ton stručnog časopisa i zbornika, a pri velikim veličinama ostaje elegantan.

Tekst i interfejs

Aa Žđ

Instrument Sans

Mirna, savremena grotesk za tekst, navigaciju i formulare. Puna podrška za č, ć, š, ž i đ.

Motiv: audiogram

Audiogram je nalaz koji svaki otorinolaringolog čita svakog dana. Njegova mreža (frekvencija od 125 do 8000 Hz, jačina u decibelima) je tiha pozadina sajta, a talas na početnoj stoji na njegovoj x-osi. Kada pomjerite kursor preko talasa, crveni kružić, oznaka desnog uha, pokazuje frekvenciju na kojoj se nalazite.

Animacije u Framer Motionu

Jedan upečatljiv trenutak (talas na početnoj), a sve ostalo odgovara na korisnikovu radnju: otvaranje, filtriranje, prelazak između stanja. Svaka animacija ima statičku varijantu za korisnike koji su u sistemu uključili smanjeno kretanje.

  • Iscrtavanje znaka

    pathLength na maski duž centralne linije spirale

    Header, footer, kongres

  • Živi zvučni talas

    useAnimationFrame + useSpring, reaguje na kursor; marker „O” iz audiograma prati frekvenciju

    Početna

  • Naslovi red po red

    Maska + translateY sa zajedničkom krivom

    Svi naslovi stranica

  • Horizontalni istorijat

    useScroll + useTransform + useSpring na zakačenoj sekciji

    Početna, O nama

  • Odbrojavanje

    AnimatePresence (popLayout) po cifri

    Početna, kongres

  • Dijeljeni layout

    layoutId za indikatore menija, tabova i filtera; album u galeriji prelazi u lightbox

    Svuda

  • Filtriranje liste

    layout + AnimatePresence, bez skokova sadržaja

    Aktuelno, Za ljekare

  • Harmonika

    height: auto sa spring prelazom

    Za pacijente

  • Pametan header

    useMotionValueEvent na scrollY: skriva se pri skrolu nadolje

    Svuda

  • Smanjeno kretanje

    MotionConfig reducedMotion="user" i statičke varijante

    Svuda

Sljedeći koraci

  1. 1

    Potvrda sadržaja

    Predsjedništvo, istorijat, lista vodiča i podaci o kongresu (lokacija, kotizacija, program).

  2. 2

    Fotografije i dokumenti

    Fotografije sa skupova, PDF programi, statut i pristupnica.

  3. 3

    CMS i migracija

    Vijesti, skupovi, dokumenti i galerija u CMS-u (Sanity, Payload ili Supabase).

  4. 4

    Engleska verzija i lansiranje

    Prevod stranica kongresa, forma preko API rute, hosting na Vercelu.

Tehnologija: Next.js 16 (App Router), React 19, Framer Motion, Tailwind CSS 4, TypeScript.