Komar
Otvori konceptKoncept weba za obiteljski obrt iz Zagreba: kist iz kataloga kao tehnički crtež, alat koji vodi do šifre i upit složen iz kataloga.
Komar mi nije klijent i ovaj web nije naručio. Koncept sam napravio na vlastitu inicijativu, iz teksta i fotografija s njihovog javnog weba, pa su sve činjenice na njemu njihove.

- Težina stranice
- 1,75 MB → 0,40 MB
- Glavni sadržaj na mobitelu
- 6,8 s → 1,7 s
Izmjereno u Chromeu 14. 11. 2026.: mobitel, usporena 4G mreža i procesor, bez predmemorije, medijan tri mjerenja. Lijevo stari web, desno koncept.
- Tvrtka
- Komar
- Usluga
- Koncept novog weba, katalog sa šiframa i alat za odabir četke
Komar je obiteljski obrt iz Zagreba koji od 1963. izrađuje kistove, četke, valjke i metle, svu proizvodnju radi u Hrvatskoj, a po zahtjevu kupca i proizvode posebne namjene. Njihov kupac je najčešće trgovina ili radionica koja zna što prodaje i pita kratko: koja šifra, koja širina, koliko komada u pakiranju.
Što sam zatekao
Web cetke-komar.hr pregledao sam 14. studenoga 2026. na računalu od 1440 px i na mobitelu.
- Prvi ekran na računalu je izmjenjivač s tri slike, a prva je natpis KOMAR i Izrada četki i kistova. Na mobitelu se ta slika obreže, pa se vidi samo dio natpisa.
- Godina 1963., obiteljski obrt i proizvodnja u Hrvatskoj stoje na stranici O nama. Naslovnica ih ne spominje, a EPOXY kistovi otporni na kemikalije i otapala su ispod prvog ekrana.
- Katalog je dobar i potpun: 43 tablice s dimenzijom, šifrom i pakiranjem, u pet kartica. Šifru iz tablice ipak ne može ponijeti u upit. Forma je na stranici Kontakt i traži ime, telefon, e-poštu i poruku.
- Broj telefona na mobitelu nije poveznica, pa ga kupac mora prepisati.

Odluke
Kist kao tehnički crtež
Na prvi ekran stavio sam ono što je dosad bilo na podstranicama: što izrađuju, od kada i gdje. Desno je široki plosnati kist s njihove fotografije, a preko njega se iscrtaju tri oznake (vlakno, ovojnica, drška) i kota sa širinama iz kataloga, od 20 do 100 mm i od 1 do 6 inča. Crtež se složi jednom i miruje, a na računalu se blago pomakne za pokazivačem. Telefon je u zaglavlju i ispod gumba, uvijek kao poveznica.
Kist dio po dio
Njihov katalog svaki kist opisuje istim redom: vlakno, ovojnica, drška, debljina. Taj red pretvorio sam u priču koja se odvija dok se stranica pomiče. Ista fotografija rastavljena je na dijelove, kist se slaže korak po korak i uz svaki dio iscrta se oznaka. Tekst uz korake su njihove činjenice iz kataloga. Prikaz je označen kao ilustracija, jer to nije snimka iz njihove radionice.

Od posla do šifre
Alat Nađite četku pita najviše dvije stvari: za kakav posao i koja površina ili širina. Odgovor su proizvodi iz njihova kataloga sa šiframa kao gumbima. Klik na šifru stavlja je u upit, a sažetak lijevo prati odabir i javi kad je upit spreman za slanje. Ako ništa ne odgovara, isti odabir postaje upit za izradu po narudžbi, a uz kistove stoji napomena o EPOXY kistovima.

Katalog koji puni upit
Katalog sam zadržao kakav jest, sa svih 43 proizvoda, ali uz svaki redak tablice dodao gumb Upit. Pretraga radi po nazivu i po šifri. Upit skuplja šifre, broj pakiranja upisuje se uz svaku, a jedan gumb otvara poruku na tkomar78@gmail.com ili prepisuje sve u obrazac.

Plava iz natpisa, boja vlakna za naglasak
Primarna boja je plava iz njihova natpisa KOMAR, u tamnoj nijansi za pozadine, a jedini naglasak je oker svijetlog prirodnog vlakna i drva. Za naslove sam uzeo čvrsti sans, za tekst mirniji, a za šifre i kote mono, jer kupac ovdje čita brojeve.
Mobitel
Na mobitelu je redoslijed isti, a kist se slaže iznad teksta koraka. Rezultati alata dolaze odmah ispod pitanja, a gumb Vaš upit stoji u kutu čim je u upitu prva šifra.


Kako je napravljen
Statični HTML, CSS i JavaScript, bez frameworka. Stranice slaže mala Python skripta iz kataloga prepisanog u JSON, pa su tablice, alat i brojke iz istog izvora. GSAP i ScrollTrigger otkrivaju fotografiju i iscrtavaju SVG linije na prvom ekranu i vode priču o kistu, a Lenis daje glatko pomicanje. Alat nema server: upit se pamti u pregledniku i odlazi kroz mailto. Skrivena početna stanja postavljaju se tek kad se JavaScript učita, pa je bez njega sav sadržaj vidljiv, a uz smanjeno kretanje animacija nema. Fotografije su njihove, iz kataloga, optimizirane i sa zadanim dimenzijama. Stranica ima noindex, a JSON-LD sadrži adresu, telefon i e-poštu s njihova weba i radno vrijeme s Google profila.
Što bih sljedeće
S Komarom bih prvo provjerio katalog: nekoliko šifri se na starom webu ponavlja kod dva proizvoda, a neke nemaju dimenziju. Treba potvrditi i radno vrijeme te dostavljaju li. Pravi projekt dobio bi fotografije iz radionice i formu koja šalje upit bez kupčeva programa za e-poštu.
