O klijentu i izazovu
MP-PRO d.o.o. je renomirani hrvatski projektni ured specijaliziran za hidrotehniku, niskogradnju i visokogradnju, koji vodi ovlašteni inženjer građevinarstva Marko Pešić [1, 2].
Kao klijent u građevinskom sektoru, MP-PRO je trebao digitalno rješenje koje nadilazi klasične, statične korporativne stranice. Izazov je bio pretočiti njihovu inženjersku preciznost, pedantnost i bogate reference u tehnički naprednu i vizualno besprijekornu web prezentaciju koja će odmah privući investitore i partnere.
Fokus je bio na kreiranju interaktivne sekcije za osobne i stručne reference na adresi mp-projekt.biz/osobne-i-strucne-reference/ [1].
Moja uloga i tehnička rješenja
Kao samostalni web developer, preuzeo sam cjelokupni proces dizajna i programiranja frontend funkcionalnosti, s posebnim naglaskom na napredne performanse i prilagođene (custom) animacije rađene od nule.
Implementirao sam sljedeće ključne značajke:
1. Full-page layout i optimizacija fotografija
Web stranica koristi hrabri, “full-page” slikovni raspored koji odmah usmjerava pažnju posjetitelja na referentne objekte visokogradnje i niskogradnje [2]. Veliki vizualni elementi optimizirani su za brzo učitavanje (lazy-loading, WebP format) kako bi se osigurale vrhunske performanse unatoč visokoj rezoluciji.
2. Custom animacije kod scrollanja (Scroll-triggered Transitions)
Kako bi pregledavanje projekata bilo intuitivno i fluidno, isprogramirao sam animacije koje reagiraju na scrollanje korisnika. Elementi se ne pojavljuju naglo, već se elegantno pozicioniraju i transformiraju prateći prirodan tijek čitanja. To stvara osjećaj “živog” dokumenta koji komunicira s korisnikom.
3. Animirani izbornik projekata
Tradicionalni izbornici zamijenjeni su modernim, dinamičnim izbornikom koji se prilagođava korisničkim akcijama. Animacije izbornika su brze, responzivne (bez laga) i pružaju jasan vizualni feedback prilikom prelaska mišem (hover efekti) i prebacivanja između kategorija projekata (niskogradnja, visokogradnja, hidrotehnika) [2].
4. Animirani interaktivni dijalog (Sliding Panel s desne strane)
Najveći tehnički detalj projekta je animirani dijalog o pojedinom projektu koji se pojavljuje s desne strane ekrana.
- Kako radi: Umjesto otvaranja novih stranica ili klasičnih, dosadnih skočnih prozora (pop-up), klik na projekt aktivira glatki bočni panel koji klizi s desnog ruba.
- Sadržaj: Panel dinamički povlači tehničke podatke o projektu, nacrte i specifikacije, omogućujući korisniku da sazna sve detalje bez napuštanja glavnog konteksta stranice.
- Tehnička izvedba: Sve tranzicije su hardverski ubrzane kroz CSS transformacije (
translate3d), što osigurava stabilnih 60 FPS-a čak i na mobilnim uređajima nižeg ranga.
Rezultat i vrijednost za klijenta
Rezultat je vrhunski web portfelj koji spaja kreativni dizajn i besprijekornu programsku arhitekturu.
- Web stranica radi nevjerojatno glatko, stvarajući premium dojam koji izdvaja klijenta od konkurencije.
- Posjetitelji se zadržavaju dulje na stranici zahvaljujući interaktivnim elementima i glatkom UX-u.
- Prezentiranje stručnih i osobnih referenci projektnog ureda sada odražava istu ravnini modernosti i preciznosti koju MP-PRO d.o.o. ulaže u svoje inženjerske projekte [1].
Ovaj projekt izvrstan je primjer kako prilagođeni razvoj (custom development) i fokus na animacije mogu transformirati klasičnu poslovnu prezentaciju u snažan prodajni alat.
