Usluga · 3D i interaktivno

3D web stranica koja se i dalje brzo učitava

3D web stranica sa WebGL scenama u stvarnom vremenu, ručno napravljenim u Three.js: proizvod koji se okreće dok skrolate, brend koji se slaže iz čestica, galerija kroz koju letite. Dizajnirana oko vašeg brenda — s prvom verzijom za nekoliko dana, ne za nekoliko mjeseci.

Šta 3D web stranica može uraditi za vas

3D web stranica nije trik kad ima zadatak. Može objasniti proizvod brže od fotografije, dati brendu fizički osjećaj ili pretvoriti listu projekata u nešto što ljudi zaista istražuju. Sve na ovoj stranici napravljeno je tako — skrolajte početnu stranicu i vidjet ćete.

Priče koje prate skrolanje

Stranica se kreće zajedno s čitaocem. Objekti se slažu, raspadaju i mijenjaju dok skrolate — laptop na vrhu ove stranice raspada se u čestice i ponovo se sklapa kao logo, mobitel i globus.

Vaš proizvod u 3D-u

Proizvod koji se na ekranu okreće, otvara ili sam objašnjava. Korisno svuda gdje ravna fotografija nije dovoljna: građevinski sistemi, materijali, uređaji, sve što ima slojeve.

Galerije kroz koje se prolazi

Umjesto mreže sličica, posjetioci se kreću kroz vaše radove. Sekcija Radovi na ovoj stranici je let kamere kroz dvanaest ekrana projekata koje možete otvoriti uživo.

Brend u pokretu

Vaši oblici i boje prikazani kao tečni metal, svjetlost ili čestice — pokret koji pripada vašem brendu, a ne gotov efekat.

3D laptop u stvarnom vremenu koji na ekranu prikazuje web stranicu Class’Mat — Uvodna scena ove stranice: 3D laptop u stvarnom vremenu s klijentskom web stranicom. Skrolajte i pretvara se u čestice.

Interaktivna, ne samo animirana

Animacija se posjetiocu samo prikazuje. Interakcija mu odgovara. Na WebGL web stranici scena može reagovati na kursor ili prst, tačno pratiti poziciju skrolanja i na klik otvoriti stvarni sadržaj.

Čestice koje se sklanjaju pred kursorom.
Globus koji prati pokazivač, s lukovima nacrtanim iz stvarne lokacije.
Ekrani projekata koji na klik ili dodir otvaraju živu web stranicu.
Tečni hrom koji se zatalasa kad se kartica stopi s njim.

Oblik od tečnog hroma u kojem se ogledaju snimci web stranica, s karticom web stranice koja se stapa s njim — Tečni hrom u koji se stapaju kartice web stranica (sekcija Usluge na ovoj stranici).

3D Zemlja noću sa svjetlima gradova i svijetlećim lukovima koji kreću iz Sarajeva — Zemlja u stvarnom vremenu s lukovima iz Sarajeva, prvo sastavljena od čestica.

Napravljena tako da se i dalje brzo učitava

Uobičajena briga kod 3D web stranice su brzina i SEO. Oboje je dio izrade od prvog dana, a ne nešto što se popravlja na kraju:

Sav tekst ostaje u običnom HTML-u. Pretraživači čitaju svaku riječ, a stranica radi i s isključenim JavaScriptom.
Prvo sadržaj, onda 3D. Tekst je vidljiv odmah; zahtjevnije scene se pripremaju u pozadini.
Bez trzanja pri skrolanju. Shaderi i teksture pripremaju se unaprijed, a ne u trenutku kad se pojave.
Prilagođava se uređaju. Rezolucija se automatski smanjuje kad je uređaj spor, a mobiteli dobijaju lakše verzije istih scena.
Rezervna verzija za svakog posjetioca. Ako uređaj ne može pokrenuti WebGL, prikazuje se čista statična verzija. Postavka „smanji pokrete” se poštuje.

Ova web stranica, izmjerena alatom Google Lighthouse prije objave: 100 za performanse na desktopu i 87–88 na mobitelu, te 100 za pristupačnost, najbolje prakse i SEO na oba.

Kome je namijenjena

Proizvođačima i brendovima proizvoda koji trebaju pokazati kako je nešto napravljeno ili kako radi.
Građevinskim, inženjerskim i arhitektonskim firmama čiji projekti zaslužuju više od mreže fotografija — vidi web stranice za građevinu i inženjering.
Lansiranjima i kampanjama — landing stranica koju ljudi pamte i dijele.
Kreativnim studijima i agencijama kojima za klijentski projekat treba WebGL i Three.js developer, uključujući white-label rad pod vašim imenom.

Stvarni radovi

Pokazujem samo ono što postoji. Koncepti su označeni kao koncepti.

Ova web stranica — čestice, tečni hrom, 3D galerija i globus u stvarnom vremenu, napravljeni u Three.js. Proskrolajte je.
PPG — koncept redizajna, nije klijentski projekat: web stranica inženjerske firme s tunelom od čestica i scenama koje prate skrolanje. Pročitajte o konceptu.
Class’Mat® — klijentski projekat u Luksemburgu: višejezična web stranica (francuski, njemački, engleski) koju vidite na 3D laptopu na vrhu ove stranice. Pročitajte studiju slučaja.

PPG koncept redizajna: zeleni tunel od čestica pored teksta „31 km of tunnels driven” — PPG — koncept redizajna (nije plaćeni projekat): tunel nacrtan česticama.

Rok, cijena i šta je uključeno

Prva verzija za nekoliko dana, ne za nekoliko mjeseci. 3D ili interaktivna web stranica okvirno traje do 7 dana kad su vaši tekstovi i slike spremni; landing stranica 2–4 dana. Veće projekte i web shopove planiramo zajedno. Ovo je procjena, ne garancija.

Cijena po dogovoru — besplatna procjena u roku od 24 sata.

Uključeno u svaki projekat:

Dizajn po mjeri i ručno pisan kod — bez šablona i bez page buildera.
Pravljeno prvo za mobitele, podešeno za brzinu.
Osnovna SEO optimizacija: čist HTML, naslovi i opisi, sitemap, strukturirani podaci.
Više jezika ako vam trebaju, svaki sa svojom adresom za Google.
Pomoć oko domene i hostinga.
30 dana ispravki nakon objave.

Tekstove i slike dostavljate vi — i fotografije proizvoda ili 3D modele, ako ih imate.

Kako radimo

01
Razgovor
Šta 3D treba uraditi — objasniti proizvod, stvoriti atmosferu, voditi priču? Oko toga se dogovorimo prije ijedne linije koda.
02
Prva scena
Prvo se pravi jedna scena, da pokret vidite i osjetite rano, na svom ekranu.
03
Izrada
Cijela stranica, uz preglede koje usput otvarate na svom mobitelu.
04
Objava
Domena, hosting, provjera brzine i SEO-a — onda stranica ide uživo, a slijedi 30 dana ispravki.

Česta pitanja

Koliko traje izrada 3D web stranice?

Okvirno do 7 dana kad su vaši tekstovi i slike spremni, a prvu verziju za pregled dobijate u roku od nekoliko dana. Jednostavnija landing stranica traje 2–4 dana. Veće projekte planiramo zajedno. Ovo je procjena, ne garancija.

Koliko košta 3D web stranica?

Cijena zavisi od scena i broja stranica, pa se dogovara za svaki projekat posebno. Pošaljite kratak opis i dobijate besplatnu procjenu u roku od 24 sata.

Hoće li 3D usporiti moju web stranicu?

Neće, ako je od početka pravljena za brzinu. Tekst se učitava prvi, 3D se priprema u pozadini, a rezolucija se prilagođava uređaju. Ova stranica u Google Lighthouseu ima 100 za performanse na desktopu.

Je li 3D web stranica loša za SEO?

Nije. Sav tekst je u običnom HTML-u koji pretraživači čitaju direktno, s pravim naslovima, opisima i strukturiranim podacima. 3D stoji iznad sadržaja; nikad ga ne zamjenjuje.

Radi li na mobitelima?

Radi. Mobiteli dobijaju lakše verzije istih scena, raspored se dizajnira prvo za male ekrane, a dodir radi tamo gdje desktop koristi prelazak mišem.

Šta se dešava na uređajima koji ne mogu prikazati 3D?

Posjetioci vide čistu statičnu verziju sa svim sadržajem. Ako neko ima uključeno „smanji pokrete”, pozadinski pokret se usporava.

Trebaju li mi 3D modeli?

Ne. Mnogi efekti — čestice, tečni oblici, tipografija, apstraktni objekti — generišu se u kodu. Ako već imate 3D modele svojih proizvoda, javite mi pa ćemo pogledati kako ih iskoristiti.

Koju tehnologiju koristite?

Three.js na WebGL-u, vlastite shadere i čisti JavaScript, bez teškog frameworka. Rezultat je standardni HTML, CSS i JavaScript koji radi na svakom dobrom hostingu.

Mogu li nakon objave samostalno mijenjati tekstove?

Stranica je pisana ručno, a ne u page builderu, pa izmjene teksta radim ja. Ispravke su uključene 30 dana nakon objave; nakon toga se izmjene dogovaraju po potrebi ili idu kroz mjesečno održavanje.

Kako sarađujemo?

Na bosanskom ili engleskom, putem e-maila i online video poziva. Uživo u Sarajevu po dogovoru. Odgovor dobijate u roku od 24 sata.

Ostale usluge

Kontakt

Napravimo nešto
što se pamti.

Napišite mi šta vam treba. U roku od 24 sata dobijate odgovor sa sljedećim koracima i ponudom za vaš projekat.

Započni projekat

Ili pišite direktno: hello@edweblab.com