Portfolio · koncept izrada
NOIR — prodavnica koja radi.
NOIR je koncept online prodavnice audio opreme, napravljen od nule: identitet, pet strana, korpa, naplata i potvrda porudžbine. Ručno pisan HTML, CSS i čist JavaScript — bez framework-a i bez page builder-a. Probajte je u laptopu ispod, pa pročitajte kako je sastavljena.
NOIR je koncept, ne klijentski projekat. Brend i proizvodi su izmišljeni i postoje samo da bi prodavnica imala šta da prodaje. Kod, dizajn, interakcije i merena težina strane su stvarni — to je jedini deo koji tvrdimo. U demou se ništa ne šalje, ne naručuje i ne naplaćuje.
Ukratko
- Tip — direct-to-consumer prodavnica premium audio opreme.
- Obim — identitet, pet strana, korpa, naplata, UX plaćanja i arhitektura back end-a.
- Tehnologije — ručno pisan HTML5, CSS i čist JavaScript. Bez framework-a, bez page builder-a, bez bundler-a.
- Katalog — slušalice, bubice i zvučnici iz jednog fajla sa podacima; sve strane čitaju iz njega.
- Stanje — korpa živi u pregledaču (
localStorage), pa preživljava prelaz sa strane na stranu bez servera. - Težina — 1,41 MB cela prodavnica, od čega 1,21 MB slika. Detaljno u tabeli niže.
- Pristupačnost — WCAG AA kontrast, vidljiv fokus prsten na svakoj kontroli, pun
prefers-reduced-motion.
Zadatak koji smo sami postavili
Ovo nije bio klijentski brif. Zadatak smo postavili sami, i to oko pitanja koje nam u razgovoru postavljaju najčešće: može li ručno kodirana prodavnica da uradi sve što uradi gotova tema, a da ne izgleda kao gotova tema? Postavili smo tri uslova odjednom — da izgleda nedvosmisleno vrhunski, da se kupuje bez trvenja i da ostane brza na telefonu srednje klase. Sve ispod je kako smo to uradili, i svaka česta greška web prodavnica koju smo dizajnom izbegli.
Zato je NOIR koristan kao primer i vama: nema klijenta koji je nametnuo kompromis, pa je ono što vidite naš standard bez izgovora.
Sistem dizajna
NOIR-u smo dali stav, a ne temu.
- Jedna vlastita boja. Duboka, topla skoro-crna podloga sa jednim mesing akcentom. Boja „bukne“ samo tamo gde je bitno — dugme, cena, logo — i nigde drugde nema šarenila koje se takmiči.
- Tipografija kao heroj. Samouveren display font za naslove i čist, čitljiv font za telo teksta, oba self-hosted. Bez zavisnosti od font CDN-a i bez pomeranja layout-a kada font stigne.
- Sistem oblika, ne jedan radijus. Oštra 2px struktura za kartice i polja, jedan pun „pill“ samo na primarnom dugmetu, i potpisni zakošeni ugao od 45° na okvirima proizvoda — detalj koji generator ne bi smislio.
- Potpisni motiv. Koncentrični prstenovi, membrana zvučnika, ponavljaju se u logou, favicon-u i hero sekciji. Sajt ne bi mogao da pripada nijednom drugom brendu.
- Struktura na videlu. Suptilna inženjerska mreža u pozadini i monospace metapodaci — spec tabele, oznake sekcija — čine sam layout delom identiteta.
Rezultat deluje dizajnirano, a ne izgenerisano, što je čitava poenta premium prodavnice. Isti sistem primenjujemo i na klijentske projekte; menja se paleta i pismo, ne pristup.
Iskustvo, funkcija po funkcija
- Početna — predimenzionisan hero sa otkrivanjem proizvoda iz mutnog u oštro, toplim sjajem koji reaguje na pokazivač, editorijalnom trakom o izradi i tihom, iskrenom linijom materijala.
- Prodavnica — responzivna mreža proizvoda sa trenutnim filterom po kategoriji, sortiranjem, brzim dodavanjem na svakoj kartici i uzorcima boja.
- Proizvod — galerija sa sličicama, izbor boje i količine, monospace spec tabela, akordeon (priča, u kutiji, specifikacije), povezani proizvodi i lepljiva traka za dodavanje u korpu koja se pojavi kada prođete dugme za kupovinu.
- Korpa — stavke, koračno menjanje količine, merač besplatne dostave i tekući međuzbir, dostupni sa bilo koje strane bez napuštanja te strane.
- Naplata — kontakt i adresa, opcije isporuke koje menjaju iznos, express plaćanje, živi prikaz kartice sa detekcijom tipa, i autorizacija koja se završava čistom potvrdom porudžbine.
Dva namerna „herojska“ trenutka nose utisak — otkrivanje proizvoda i naplata — dok sve ostalo ostaje mirno. Ta uzdržanost je ono što daje utisak skupog; deset podjednako glasnih elemenata daje utisak šablona.
Greške koje smo ispravili
Većina prodavnica gubi kupce na istih nekoliko mesta. NOIR je napravljen da izbegne svako od njih, i to je deo koji vam je verovatno najkorisniji — lista je ista i za vašu prodavnicu.
| Česta greška | Šta NOIR radi umesto toga |
|---|---|
| Osvežavanje cele strane pri „dodaj u korpu“ | Trenutna korpa na strani klijenta, animacija „leta“ do korpe i klizni drawer potvrđuju akciju bez jednog reload-a. |
| Nema povratne informacije nakon dodavanja | Animirana oznaka korpe, kratka potvrda i drawer koji se otvara na znak — kupac nikada ne pita „da li je uspelo“. |
| Skriveni troškovi dostave na poslednjem koraku | Živi merač do besplatne dostave u korpi i dostava prikazana pre naplate, ne posle. |
| Prisilno pravljenje naloga | Naplata kao gost podrazumevano. Nalog je opcion, nikad zid pred porudžbinom. |
| Trapava naplata sa više reload-ova | Jedna mirna strana naplate sa živim pregledom porudžbine, opcijama isporuke koje menjaju iznos i inline validacijom. |
| Šture strane proizvoda | Prave spec tabele, izbor boje i varijante, galerija sa sličicama, akordeon sa detaljima i povezani proizvodi — sve što kupcu treba za odluku. |
| Slabo ili nepostojeće filtriranje | Trenutni filter po kategoriji i sortiranje, sa živim brojem rezultata. Bez učitavanja strane. |
| Generični šablonski izgled | Namenski sistem identiteta opisan gore. Ništa gotovo sa police. |
| Pomeranje layout-a i spori mediji | Self-hosted fontovi, definisane dimenzije slika, loading="lazy" na mreži proizvoda i uzdržani efekti — strana se odmah smiruje. |
| Animacije koje ignorišu korisnika | Svaka animacija poštuje prefers-reduced-motion, i ništa se ne pušta samo i agresivno. |
| Sitni tap ciljevi, bez tastature, loš kontrast | Udobni ciljevi, vidljiv :focus na svakoj kontroli i AA kontrast na svakom delu teksta. |
Kako bi radio back end
Da bude sasvim jasno: ova izrada je samo front end. Nema servera, nema baze, nema procesora plaćanja i nema porudžbina. Korpa se drži u pregledaču, a naplata je UX prototip — ništa ne izlazi iz vašeg pregledača i ništa se ne naplaćuje. Ovo poglavlje opisuje kako se isti front end povezuje na pravi commerce back end u produkciji.
Front end koji pravimo ostaje isti; menja se samo motor iza njega.
- Katalog — proizvodi, cene, varijante, zalihe i slike žive u katalogu (commerce platforma ili headless CMS). Prodavnica čita iz njega, pa osoblje ažurira proizvode bez diranja koda.
- Korpa — drži se u pregledaču radi trenutne interakcije bez reload-a. To je tačno ono što demo pokazuje.
- Sesija naplate — kada kupac plaća, front end traži od back end-a bezbednu sesiju plaćanja. Podaci kartice nikada ne dolaze do naših servera.
- Plaćanje — obavlja ga PCI-usaglašen procesor (Stripe ili PayPal), uključujući digitalne novčanike i 3-D Secure / SCA gde je potrebno.
- Webhook → porudžbina — procesor potvrđuje plaćanje preko webhook-a; back end kreira porudžbinu, smanjuje zalihe i šalje potvrdni email.
- Isporuka — porudžbina ide u dostavu, sa nalepnicom i praćenjem, i opciono u knjigovodstvo ili ERP.
Opcije koje nudimo, po meri:
- Starter — statički plus ugrađen commerce. Tačno ovaj front end plus lagan servis za korpu i naplatu (Snipcart ili Shopify Buy). Najjeftinije za održavanje, brzo uživo, idealno za fokusiran katalog. Prave kartice i hostovana bezbedna naplata.
- Standard — headless commerce. Headless Shopify (ili BigCommerce, Swell) kao back end koji preko Storefront API-ja pokreće naš custom front end. Pune zalihe, popusti, porudžbine, analitika i poznat admin za osoblje — uz prodavnicu koja ne liči na Shopify temu.
- Advanced — custom ili self-hosted. Open-source motor (Medusa ili WooCommerce headless) kada treba namenska logika, B2B cene ili puno vlasništvo nad podacima.
Oko jezgra, po potrebi: transakcioni email, cene i nalepnice dostave ili domaći kuriri, automatski porez, brza pretraga za velike kataloge, CMS za editorijal, kolačić-saglasnost i analitika, i CDN hosting da prodavnica bude brza širom sveta. Poenta je jednostavna: korisničko iskustvo iznad je fiksno i premium, a back end se skalira prema klijentu.
Zašto je brza
Ručno pisan statički HTML, CSS i čist JavaScript — bez „poreza“ framework-a i bez bloat-a od bundler-a. Self-hosted fontovi, dimenzionisane i kompresovane slike i uzdržani efekti znače da se strana odmah iscrta i nikada ne poskoči. Umesto pridevâ, brojevi:
| Šta | Koliko |
|---|---|
| Cela prodavnica — pet strana, kod, fontovi, slike | 1,41 MB |
| Slike, 18 fajlova | 1,21 MB |
| CSS, jedan fajl | 48 KB |
| JavaScript — aplikacija i katalog | 43 KB |
| Fontovi — dva variable woff2 | 49 KB |
| Prvo učitavanje strane „Prodavnica“ | 153 KB · 9 zahteva |
| Prvo učitavanje početne strane | 335 KB · 12 zahteva |
Izvor: veličine fajlova na disku u našem repozitorijumu, izmerene 9. septembra 2026. HTML, CSS i JavaScript se preko HTTPS-a šalju kompresovani, pa je stvarni prenos manji od ovih brojeva — namerno navodimo veći. Broj zahteva je izbrojan iz izvornog koda strane; slike u mreži proizvoda nose loading="lazy" i dobavljaju se tek kada dođu u vidno polje, pa nisu u prvom učitavanju.
Pristupačnost i zanat
WCAG AA kontrast na svakom delu teksta, uključujući preko slika i pokretnih pozadina. Vidljiv fokus prsten na svakom interaktivnom elementu, prave SVG ikonice, semantički HTML i pun prefers-reduced-motion koji svima koji to zatraže prikazuje mirna, statična stanja. Kroz celu prodavnicu možete proći samo tastaturom, od filtera do potvrde porudžbine.
Ovo ne radimo zato što je lista sa kvačicama lepa, nego zato što je deo kupaca koji ne može da klikne sitno dugme ili ne vidi svetlosivi tekst na beloj podlozi veći nego što većina prodavaca misli. Pristupačna prodavnica prodaje većem broju ljudi — to je cela poenta.
Šta ova izrada dokazuje
Prodavnica može da bude lepa, brza i laka za kupovinu u isto vreme. To nisu kompromisi između kojih birate, i NOIR je tu da to pokaže bez fusnota: možete da uđete u demo, dodate nešto u korpu i izađete na naplatu, pa sami procenite.
NOIR je standard koji donosimo na svaki commerce projekat: namenski identitet, iskustvo okrenuto konverziji, back end po meri klijenta i performanse tretirane kao feature, a ne kao naknadna misao. Detaljnije o obimu i cenama stoji na strani izrada online prodavnice.
Želite ovakvu prodavnicu za svoj brend? Recite nam šta prodajete i koliko proizvoda imate, pa predlažemo pravu opciju i fiksnu cenu, bez obaveze.