Svi projekti
Koncept redizajnaKoncept, nije naručen2026

Koncept 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.

Komar
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.

Prvi ekran sadašnjeg weba cetke-komar.hr na računalu: tamna traka izbornika, velika slika s plavim natpisom KOMAR i šarenim natpisom Izrada četki i kistova, ispod pozdravna rečenica

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.

Tamna sekcija Od vlakna do gotovog kista: složen kist s oznakama drška, ovojnica i vlakno, ispod kota s debljinom 5–22 mm, desno korak Debljina od 5 do 22 mm

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.

Alat Nađite četku: odabrani su bojanje i srednja ploha, desno plosnati kistovi Prima, Special, Super Kaiser i PVC sa šiframa, tri šifre su u upitu, a sažetak lijevo piše Spremno za slanje

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.

Katalog kistova: kartice Kist Prima, Kist Special i Kist Super Kaiser s tablicama dimenzija, šifri i pakiranja, šifre 403 i 474 označene su kao U upitu

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.

Tri ekrana novog weba na mobitelu: prvi ekran s naslovom i gumbima, složen kist s oznakama na zadnjem koraku priče i rezultati alata sa šiframa kao gumbima

Prvi ekran na računalu, lijevo sadašnji web, desno novi koncept

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.

Imam slobodno mjesto, javi se za suradnju

Ako imaš ideju koju vrijedi napraviti kako treba, prvi korak je razgovor od 30 minuta.

Bez ponude i bez pritiska. Ispričaš mi što gradiš, ja postavim pitanja koja ti vjerojatno još nitko nije, i na kraju znaš je li izvedivo, koliko okvirno košta i što je sljedeći korak. Bez obzira radimo li zajedno.

Jurica Stublić u radu na projektu