Kamengrad — kuća koja se gradi skrolom.

• Tip — sajt građevinske kompanije koja gradi „ključ u ruke”, za kupca koji tek bira kome će poveriti kuću.
• Obim — pet strana (početna, o nama, usluge, projekti, kontakt) i politika privatnosti. Film gradnje na skrol, 3D model kuće, devet projekata koji se otvaraju i forma u dva koraka na dodir.
• Tehnologije — HTML5, CSS i čist JavaScript, pisani od nule. Bez framework-a, bez bundler-a i bez CSS biblioteke. Jedini tuđi kod je three.js, self-hostovan, i učitava se samo na strani usluga.
• Jezik — srpski, latinica. Pisan na srpskom, ne preveden.
• Pristupačnost — kontrast teksta preko fotografija izmeren nad čisto belom slikom, najgorim slučajem, i pun prefers-reduced-motion.

Zamislili smo klijenta kakav se stalno javlja: ozbiljna beogradska građevinska firma, tridesetak godina iskustva, radi „ključ u ruke”. Posao dobija preko preporuke i oglasa na direktorijumima, a sopstveni sajt joj je zaglavio negde oko 2012. Spor je, pretrpan i nema nijednu rečenicu koja bi ikoga u bilo šta ubedila.

Zadatak je lako izgovoriti, a teško izvesti: sajt treba da deluje kao firma kojoj biste bez dvoumljenja poverili da vam sazida kuću. To ne radi pridev. To radi dokaz koji posetilac vidi sam.

Svaka građevinska firma tvrdi da ima jasan proces. Skoro nijedna ga ne pokazuje. Na početnoj strani Kamengrada, u sekciji o načinu rada, snimak gradilišta iz vazduha stoji zakačen na ekranu, a kadar određuje skrol, ne sat. Skrolujete napred i kuća raste, od iskopa preko temelja, konstrukcije i krova do predaje ključeva. Skrolujete nazad i rastavlja se. Pet faza se pali uz film, a svaka dobija isti deo skrola, koliko god trajala u snimku.

Ovo nije niz slika, nego jedan video sa ključnim frejmom na svakih pola sekunde, pa premotavanje nikad nema daleko. Isti snimak kao niz WebP slika bio bi oko 11 MB; kao video je 2,98 MB na desktopu i 1,10 MB na telefonu. Ne preuzima se pri učitavanju strane, nego tek ekran pre sekcije. Bez JavaScripta, sa uključenim smanjenjem pokreta ili uštedom podataka, umesto filma stoji fotografija završene kuće i cela lista faza.

Snimak koji sada stoji je tuđ, tu kao zamena. Na pravom projektu dron preleti istu sačuvanu putanju jednom nedeljno, sa istog mesta, i ti preleti postanu film. Tek tada tekst ispod sme da kaže da snimak stiže uz nedeljni izveštaj.

Na strani usluga, u tamnoj traci „Vaša kuća, pre prve lopate”, stoji model porodične kuće koji se okreće mišem ili prstom. Ima tri prikaza: maketu sa klizačem za istih pet faza kao film, crtež sa linijama i kotama i osnovu, presek na 1,2 metra, sa nazivom i kvadraturom svake prostorije.

Kuća nije preuzeti 3D fajl, nego podatak u kodu: zidovi sa otvorima, ploče i prostorije. Zato iz istog opisa izlaze i maketa, i crtež, i osnova, i faze gradnje, a promena zida menja sva tri prikaza odjednom.

three.js je self-hostovan i učitava se tek kad je sekcija ekran daleko: oko 200 KB komprimovano, i nula bajtova na svakoj drugoj strani. Točkić miša ne zumira, nego skroluje stranu kao i svuda drugde; zum je na dugmadima. Na telefonu vodoravni prevlačak okreće model, a uspravni skroluje.

Svaki ekran odgovara na sledeće pitanje koje kupac ima pre nego što pozove: šta tačno radite, da li vam mogu verovati, koliko košta i šta ako nešto krene naopako. Na početnoj su to redom obećanje, brojke, ljudi iza firme, šest usluga, četiri faze sa stvarnim rokovima, projekti, šest obaveza iz ugovora i tri glasa klijenata. Sve se završava istim malim korakom.

• Jedan natpis svuda. „Zakažite konsultaciju” u zaglavlju, u herou, u svakoj traci, u mobilnom meniju i na formi. Proverava se automatski: drugi natpis obara proveru.
• „Saznajte više” otvara stranu tačno na usluzi, bez klizanja preko cele strane, a svaka usluga se završava primerom iz prakse i pozivom koji u formi unapred bira o čemu je reč.
• Projekti se otvaraju. Devet projekata, svaki sa podacima i kratkom pričom. Isti prikaz otvara se direktnim linkom, iz preporuka klijenata i sa strane usluga.
• Forma koja kvalifikuje. Obavezni su samo ime, jedan kontakt i saglasnost. Dva pitanja na dodir, šta gradite i u kojoj ste fazi, kažu prodaji koga prvo da zove. Posle slanja, zahvalnica sa imenom i terminom poziva izračunatim iz radnog vremena.

Krenuli smo namerno mračno: kinematografski, tamna podloga, dramatično. Na prvom ekranu je izgledalo skupo, a posle tri sekcije je počelo da zamara oči. Povukli smo se na ono što premijum zapravo znači: mirno.

Završna paleta je slonovača i grafit, sa jednim akcentom, izlizanom bronzom, koji se pojavljuje retko. Tamne trake ostaju samo tamo gde drama nešto vredi: hero, film, 3D model i poziv na akciju. Tamna i svetla tema su ista tema: tamne sekcije samo redefinišu iste nazive boja, pa je prelazak sa mračne na svetlu paletu bio izmena u jednom fajlu.

Potpis je rez od 45° na gornjem desnom uglu, kao na obrađenom kamenu. Ponavlja se na fotografijama, pločicama projekata, okviru modela i glavnom dugmetu. Na dugmetu je rez nacrtan gradijentom, ne isečen, jer bi isečen ugao odsekao i okvir fokusa za tastaturu.

Pismo je jedna familija sa osom širine: naslovi su crtani šire, za vizuelnu masu „zidanog”, a tekst normalno. Treći glas, monospace, nose samo tehnički podaci, datumi, faze i labele, kao kote na crtežu.

Od nule. HTML, CSS i čist JavaScript — bez framework-a, bez bundler-a i bez koraka za build. Ceo dizajn-sistem staje u jedan CSS fajl vođen varijablama. Pisma, slike, snimci i three.js su self-hostovani, i ništa se pri učitavanju ne povlači ni sa jednog tuđeg servera.

Pre svake izmene sajt prolazi kroz 56 automatskih provera u pregledaču: fontovi i film, mobilni meni, filter projekata, forma, prikaz projekta, jedan natpis poziva, dolazak na svaku uslugu na dve širine i fokus koji rez od 45° nikad ne seče. Uz njih idu provere strukture naslova, preliva na 320 piksela i stvarnih dimenzija svake slike.

Izvor: veličine fajlova na disku i prenos izmeren u pregledaču pri prvom otvaranju sa lokalnog servera, bez keša, 3. oktobra 2026. Od 5,4 MB na desktopu 3,8 MB je hero snimak, koji se kači tek kad se strana učita, i to samo na ekranima širim od 768 piksela, bez uštede podataka i bez smanjenja pokreta; telefon ga ne preuzima. Film gradnje nije u prvom učitavanju. Fotografije se učitavaju odmah, bez odlaganja: to je bila odluka za prezentaciju, ne propust, i na pravom projektu bi se vagala ponovo.

Lighthouse merimo na objavljenom sajtu i brojeve upisujemo kada ih izmerimo. Dok ih nema, ovde stoji crta, a ne procena.

Kontrast teksta preko fotografije ne može da se izračuna iz boja, jer se slika menja. Zato je izmeren: svaka slika se zameni čisto belom, tekst se sakrije, i očita se stvarni piksel ispod svakog natpisa, na širinama od 320 do 1920 piksela. Sloj zatamnjenja ispod teksta podešen je prema tom merenju, ne prema oku.

Glavni tekst stoji na 14,6:1 prema podlozi, akcenat na 5,3:1 na svetlom i 6,7:1 na tamnom. Mobilni meni drži fokus u sebi, a Escape ga vraća na dugme koje ga je otvorilo. Svaka strana ima jedan naslov prvog nivoa i nijedan preskočen nivo.

Srpski je složen kao srpski: nijedna jednoslovna reč ne ostaje na kraju reda, broj i jedinica se ne razdvajaju, navodnici su „ovakvi” i vise van ivice teksta.

Pod prefers-reduced-motion ništa se ne pomera: nema hero snimka ni filma, nego fotografije, a i dekorativni pokreti pri prelasku mišem su isključeni.

• Zid reči koje svako koristi, a niko ne proverava.
• Mrežu od tri ikonice sa praznim tekstom.
• Beskonačnu traku logoa koja klizi.
• Kaskadu u kojoj sve iskače jedno po jedno dok skrolujete.
• Formu sa deset obaveznih polja.
• Galeriju u kojoj se ništa ne otvara.
• Ken Burns zum na hero fotografiji, najprepoznatljiviji pokret iz šablona.
• Brojače koji broje od nule: do trenutka kada se pokrenu, sajt piše „0 godina iskustva”.

Sajt građevinske firme može da pokaže ono što drugi samo tvrde: kako se kuća gradi, kako će izgledati pre prve lopate i šta tačno sledi posle prvog poziva. Uđite u sajt u laptopu gore, skrolujte kroz film na početnoj, okrenite model na strani usluga i pošaljite probni upit, pa sami procenite.

Isti postupak primenjujemo na svaki sajt: prvo poruka i struktura, pa dizajn, pa čist kod koji traje. Detaljnije o obimu i cenama stoji na strani izrada sajtova.

Ako vodite građevinsku firmu i posao vam i dalje stiže samo preko preporuke, javite nam se.