Scroll
01
Pregled projekta
Šta gradimo zajedno
Tip projekta
Premium WooCommerce katalog
Katalog bez naplate — kupovina se odvija putem Ananas platforme. Fokus na prezentaciji i konverziji.
Vizuelna referenca
uts.co.rs × emonika.si
Cinematičan, premium UI sa velikim fotografijama, čistom tipografijom i elegantnim animacijama.
Obim posla
500+ SKU-ova
Strukturiran batch import proizvoda sa kompletnom taksonomijom, atributima i SEO optimizacijom.
Rok isporuke
14 nedelja
Podeljeno u 8 faza sa jasnim deliverables-ima i klijentskim tačkama odobravanja.
Integracija
Ananas platforma
Svaki proizvod linkovan na Ananas. UTM tracking za merenje konverzija. Payment nije na našoj strani.
Post-launch
30 dana podrške
Garantovana podrška posle lansiranja. Edukacija tima. Video uputstva za upravljanje sadržajem.
02
Ključne isporuke
Šta dobijate
Premium UI/UX dizajn
Kompletni Figma dizajn sistem — desktop i mobile. Mood board, tipografija, paleta boja, grid sistem, komponente. Dizajn svih stranica: Početna, Katalog, Kategorija, Proizvod, O nama, Kontakt, Blog.
Custom WordPress tema
Originalna tema razvijena po Figma dizajnu. Nema gotovih template rešenja. Animirani hero, filter sistem, product galerija sa zoom-om, mega meni, sticky header, optimizovana za sve uređaje.
WooCommerce katalog
WooCommerce podešen u kataloškom modu — checkout i payment su isključeni. AJAX filter bez reload-a stranice, grid/list toggle, sort opcije, paginacija. Svaki proizvod ima "Kupi na Ananas" CTA.
Import baze proizvoda
Definisanje kompletne taksonomije kategorija i atributa. Priprema CSV template-a. Batch import 500+ SKU-ova. Optimizacija slika u WebP format. Unos Ananas linkova kao custom polje za svaki SKU.
SEO & Performance
On-page SEO za sve kategorije i ključne proizvode. Schema markup (Product, BreadcrumbList). Core Web Vitals optimizacija — cilj 85+ mobile, 95+ desktop. Cloudflare CDN, keširanje, WebP slike.
Analitika & Tracking
Google Analytics 4 sa custom event tracking-om. Klik na Ananas link = primarna konverzija. Google Search Console setup i verifikacija. UTM parametri na svim Ananas linkovima za source tracking.
03
Plan rada
Faze projekta — 14 nedelja
Ned. 1–2
Faza 0
Discovery & Strategija
+
0.1
Kick-off sesija i definisanje ciljeva
Inicijalni sastanak sa klijentom u trajanju od 2h. Definišemo poslovne ciljeve, ciljnu grupu, ton komunikacije i vizuelni pravac. Rezultat: potpisan briefing dokument.
0.2
Kompetitivna analiza
Analiza 3–5 direktnih konkurenata u regionu i industriji. Identifikacija vizuelnih i funkcionalnih standarda u kategoriji. Kratki izveštaj sa preporukama.
0.3
Definisanje sitemap-a i informacione arhitekture
Kompletna mapa sajta sa svim stranicama, kategorijama proizvoda i korisničkim tokovima. Definiše se hijerarhija navigacije, logika kategorija i podkategorija u katalogu.
0.4
Tehnička specifikacija
Detaljna tehno specifikacija sa svim funkcionalnostima, integracijama i zahtevima. Definiše se stack: WordPress verzija, theme pristup, ključni plugini, hosting zahtevi.
0.5
Definisanje KPI-eva i mernih tačaka
Postavljanje Google Analytics 4 plana praćenja — šta se meri, koji eventi, konverzije. Klik na Ananas link = primarna konverzija.
Ned. 2–5
Faza 1
UX/UI Dizajn
+
1.1
Wireframe — Desktop & Mobile
Izrada low-fidelity wireframe-ova za sve ključne stranice: Početna, Katalog, Kategorija, Proizvod, O nama, Kontakt. Alat: Figma. Prezentacija klijentu i usvajanje.
1.2
Mood board & vizuelni identitet sajta
Na osnovu referenci definišemo vizuelni pravac: paleta boja, tipografija, ikonografija, fotostil, whitespace filozofija. Prezentacija mood board-a klijentu.
1.3
UI dizajn — kompletni dizajn sistem
Izrada Figma dizajn sistema: primarne/sekundarne boje, tipografska skala, grid sistem, spacing, button stilovi, form stilovi, card komponente, badge-evi.
1.4
UI dizajn — Desktop verzija (sve stranice)
High-fidelity dizajn svih stranica za desktop rezoluciju (1440px). Hero sekcija, featured kategorije, bestselleri, about strip, newsletter, footer, navigacija.
1.5
UI dizajn — Mobile & Tablet responzivnost
Adaptacija svih stranica za mobilne (375px) i tablet (768px, 1024px) rezolucije. Posebna pažnja na mobilni katalog i filter sistem.
1.6
Dizajn stranice proizvoda — premium UX
Galerija slika sa zoom-om, naziv, SKU, kategorija, opis, key features u ikonama, "Kupi na Ananas" CTA, related products slider, breadcrumb navigacija.
1.7
Dizajn kataloških listinga i filter sistema
UI za grid i list prikaz kataloga. Filter panel sa kategorijama, brendovima, atributima. Sorting dropdown. Paginacija. Product card sa hover efektom i Ananas badge-om.
1.8
Klijentska prezentacija i revision runda
Formalna prezentacija kompletnog dizajna klijentu. Jedna revision runda uključena u cenu. Finalno usvajanje dizajna.
Ned. 5–6
Faza 2
Razvojna Infrastruktura
+
2.1
Uspostavljanje staging servera
Podešavanje staging okruženja na brzom cloud hostingu. Konfiguracija: PHP 8.2+, MySQL 8.0+, NGINX, SSL sertifikat, CDN setup, backup sistem.
2.2
Instalacija i konfiguracija WordPress-a
Fresh instalacija WordPress-a. Konfiguracija wp-config.php, .htaccess optimizacija, sigurnosna podešavanja (WP Salts, zaštita admin pristupa, 2FA).
2.3
Instalacija i konfiguracija WooCommerce-a
WooCommerce u kataloškom modu. Isključivanje checkout/cart/payment funkcionalnosti. Aktivacija samo katalog modula. Konfiguracija valute i merne jedinice.
2.4
Selekcija i konfiguracija pluginova
Procured i konfigurisani ključni pluginovi: ACF PRO, YOAST SEO Premium, WP Rocket, WPForms PRO, Product Filter, Polylang. Sve licence obezbeđene.
2.5
Kreiranje custom WordPress teme
Razvoj custom teme na osnovu usvojenog Figma dizajna. Potpuno originalan kod — nema gotovih template rešenja. Header, footer i navigacija kao globalni elementi.
2.6
Sigurnosna konfiguracija i firewall
Wordfence ili Sucuri instalacija. Sigurnosna politika: login lockout, IP whitelist za admin, regular security scan scheduler, email notifikacije.
Ned. 6–9
Faza 3
Frontend Razvoj
+
3.1
Razvoj Header-a i navigacije
Sticky header sa logo-om, glavnom navigacijom, pretraga popup-om i mobilnim hamburger menijem. Mega meni za kategorije. Breadcrumb sistem.
3.2
Razvoj Homepage-a
Hero sekcija sa video/parallax pozadinom, animated headline. Featured kategorije grid. Bestseller slider. About strip. Brendovi logo slider. Newsletter sekcija. Animacije na scroll.
3.3
Razvoj kataloških stranica
Kategorijska stranica sa hero banerom, AJAX filter bez page reload, grid/list toggle, sort opcijama, paginacijom. Product card sa hover efektom i Ananas link badge-om.
3.4
Razvoj stranice proizvoda
Product gallery sa lightbox-om i zoom funkcijom. Tabovi: Opis, Specifikacije, Dokumenti, Related Products. CTA: "Pogledaj i kupi na Ananas" sa UTM tracking-om.
3.5
Razvoj About, Kontakt i statičnih stranica
About stranica sa timeline-om, animated brojevima, vrednostima. Kontakt stranica sa Google Maps, formom i kontakt info sekcijom.
3.6
Responzivni razvoj — Mobile-first
Kompletno testiranje i dorađivanje responzivnosti na svim breakpoint-ovima. Touch-friendly elementi. Swipe geste na slajderima. Optimizovana tipografija za male ekrane.
3.7
Animacije i micro-interactions
Page load animacije, hover efekti na kartice, scroll-triggered animacije (fade in, slide up), loading states, smooth scroll, footer i header animacije.
Ned. 8–11
Faza 4
Baza Proizvoda & Sadržaj
+
4.1
Definisanje taksonomije i strukture baze
Kreiranje kompletne hijerarhije kategorija i podkategorija. Definisanje custom atributa po kategorijama: dimenzije, materijal, kapacitet, napon, brend, model, kompatibilnost.
4.2
Priprema template-a za batch import
Izrada Excel/CSV import template-a prilagođenog strukturi sajta. Uputstvo za klijenta kako da pripremi podatke. WooCommerce Product Importer konfiguracija sa mapiranjem kolona.
4.3
Batch import proizvoda (500+ SKU-ova)
Čišćenje i normalizacija dostavnih podataka od klijenta. Import putem CSV-a u više rundi. Verifikacija: naziv, SKU, kategorija, atributi, opis, slike — sve provereno.
4.4
Obrada i optimizacija slika proizvoda
Resize i optimizacija u WebP format. Standardizacija dimenzija. Upload i asocijacija sa artiklima. Lazy loading konfiguracija. srcset za responzivnost.
4.5
Konfiguracija Ananas integracije
Za svaki proizvod — unos Ananas product URL-a kao custom polje. Automatski UTM parametri za tracking porekla saobraćaja. Dinamičko generisanje "Kupi na Ananas" linkova.
4.6
SEO optimizacija sadržaja (on-page)
Meta title i meta description za sve kategorije i ključne proizvode. Optimizacija h1/h2 strukture. ALT tagovi na svim slikama. Schema markup: Product, BreadcrumbList, Organization.
Ned. 10–11
Faza 5
Performance Optimizacija
+
5.1
Core Web Vitals optimizacija
Ciljani rezultati: LCP < 2.5s, FID < 100ms, CLS < 0.1. Lazy loading, critical CSS inline, preload ključnih resursa, eliminacija render-blocking JS.
5.2
Konfiguracija keširanje sistema
WP Rocket full konfiguracija: page cache, browser cache, GZIP kompresija, minifikacija CSS/JS/HTML, preload cache, heartbeat control.
5.3
Lighthouse & PageSpeed audit
Full audit u Chrome DevTools. Izveštaj pre i posle optimizacije. Ciljani skor: 85+ na mobile, 95+ na desktop. Dokumentovana optimizacija sa before/after metrikama.
Ned. 11–12
Faza 6
Testiranje & QA
+
6.1
Cross-browser & Cross-device testiranje
Testiranje na: Chrome, Firefox, Safari (macOS i iOS), Edge. Realni uređaji: iPhone 13/14, Samsung Galaxy S21+, iPad, Surface. 15+ device veličina na simulatorima.
6.2
Funkcionalno testiranje
Testiranje svih forma, linkova, filtera, sortera, pretraživanja, navigacije, paginacije i Ananas linkova. QA checklist od 80+ tačaka. Dokumentovani bugovi i prioriteti.
6.3
SEO tehnički audit
Screaming Frog analiza: duplicate content, broken links, missing meta, canonical tagovi, XML sitemap validacija, robots.txt pregled. Sve greške dokumentovane i fiksirane.
Ned. 13
Faza 7
Lansiranje
+
7.1
Finalni klijentski pregled i usvajanje
Prezentacija kompletnog sajta na staging okruženju. Finalni feedback i korekcije. Potpisivanje zapisnika o primopredaji.
7.2
Migracija na produkcijski server
Transfer baze podataka, fajlova i konfiguracije na produkcioni server. DNS propagacija. SSL aktivacija. Search & replace URL-ova (staging → produkcija). 301 redirect-ovi sa starih URL-ova.
7.3
Google Analytics 4 & Search Console verifikacija
Verifikacija vlasništva sajta, podnošenje sitemap-a, pregled coverage izveštaja, setup GA4 event tracking-a. Uptime monitoring i backup sistema.
Ned. 14
Faza 8
Edukacija & Podrška
+
8.1
WordPress CMS trening (2h video sesija)
Snimana obuka za klijenta: kako dodati/editovati proizvod, kategorije, blog post, banner sliku, kontakt podatke. Uputstvo za mass import novih proizvoda.
8.2
Korisničko uputstvo — dokumentacija
PDF dokumentacija sa screenshotima: 15–20 stranica. Pokriva sve česte zadatke klijenta bez potrebe za razvojnim timom. Predato uz finalni projekat.
8.3
30 dana post-launch podrške
Garantovana podrška 30 dana po lansiranju za bug fikseve, manje izmene i pitanja. Response time: max 24h radnim danima.
04
Tehnički stack
Alati & Tehnologije
CMS
WordPress 6.x
Najnovija stabilna verzija. PHP 8.2+, MySQL 8.0+, NGINX
E-commerce
WooCommerce
Kataloški mod — payment i checkout isključeni
Dizajn
Figma
UI/UX, dizajn sistem, wireframes, prototipovi
Custom Fields
ACF PRO
Ananas URL polje, custom metapolja po kategorijama
SEO
Yoast SEO Premium
Meta, Schema markup, sitemap, canonical, breadcrumbs
Performance
WP Rocket
Page cache, minifikacija, lazy load, preload, GZIP
Analitika
Google Analytics 4
Custom event tracking, Ananas konverzije, UTM parametri
Sigurnost
Wordfence
Firewall, login zaštita, security scanning, notifikacije
05
Vremenski plan
Raspored isporuke
Sledeći korak
Ukoliko su uslovi ponude prihvatljivi, sledeći korak je kick-off sastanak na kome definišemo tačan početak projekta, potpisujemo ugovor i pokretamo Discovery fazu.
- Agencija echosystem.rs
- Web echosystem.rs
- Rok 14 nedelja od kick-offa
- Garancija 30 dana post-launch podrška
- Ponuda važi 30 dana od dana ispostavljanja
"Svaki projekat koji preuzmemo tretiramo kao da je naš vlastiti brend na kocki. TehnoOprema zaslužuje digitalno prisustvo koje je na nivou kvaliteta njihovih proizvoda — i upravo to isporučujemo."
Datum ispostavljanja