Preskoči do glavnog sadržaja
01. Arhitektura informacija

Uvodni dio

Planiranje i istraživanje prvi je korak koji činimo sa startne pozicije. Uvodni dio nije poželjno površno odraditi već ga je potrebno temeljito i sustavno proći kako bi projekt jer će nam olakšati viziju, dati prijeko potreban zamah i postaviti plodno tlo za ostvarenje najboljih mogućih rezultata.

Uvod i postavljanje dugoročnih ciljeva projekta

Klijenta saslušamo jer nas upozna s projektom, objasni nam svoju djelatnost, predoči kako posao funkcionira i koja je ciljana grupa korisnika te nam ispriča svoje želje. Zajedno definiramo stvarne potrebe web stranice koje mogu biti raznoliki – povećanje prometa, reklamiranje i povećanje svijesti o brendu ili proizvodu, generiranje više prodaje… Zajedno postavljamo glavne smjerove projekta, razrađujemo koncept u skladu sa budžetom i radi se dugoročni plan.

Ako web stranice već postoje od prije i potrebno je napraviti redizajn, tada se postojeće stranice analiziraju, sagledavaju se njihove prednosti i nedostaci. Uz pomoć analitičkih uvida, prouči se Google Analytics, Search Console, Hotjar i drugo što nam se pruža.

Proučava se kretanje korisnika, analiziraju se podaci koji nam pričaju na kojim dijelovima web stranice se korisnici najduže zadržavaju a na kojim stranicama i njihovim određenim sekcijama korisnici odlaze. Saznajemo koji tip sadržaja je najvažniji za korisnike i kakvo je stanje s konverzijama. Svi prikupljeni podaci imat će utjecaj na planiranje budućih radnji.

Istraživanje tržišta i konkurencije

Kada smo definirali klijenta, njegovu industriju, uvjete u kojima posluje i uspješnost, vrijeme je da analiziramo postojeće igrače na tržištu. Istražujemo konkurenciju, proučavamo čime se sve bavi, koje su joj pozitivne strane, kakvi su im nedostaci u odnosu na probleme koje imaju kupci te gdje su naše mogućnosti za probiti se. U ovoj fazi pomaže nam PESTLE analiza.

Potrebno je analizirati web stranice konkurencije i proučiti kako su ih prezentirali svijetu, kakva je kvaliteta sadržaja, koliko im je dobra tehnička, on-page i off-page SEO optimizacija. Shodno time, razradi se strategija koja će nastojati sve učiniti za stepenicu kvalitetnije kako bi se web stranica istaknula na često vrlo konkurentnom tržištu koje se neprestano razvija.

Brainstorming ideja

Brainstorming je metoda koja nam služi za generiranje ideja kojima bi smanjili ili potpuno eliminirali jasno definirane probleme, potencijalno ih možda i preobratili u svoju prednost. Koncentriramo se na izazov, potičemo na razmišljanje bez prekida i nastojimo proizvesti širok spektar ideja koje zapisujemo na papir.

Ideje se u ovoj fazi ne kritiziraju već je bitan njihov nesmetani razvoj i količina. Svaki prijedlog je dobrodošao i vrednuju se ideje ako su radikalne i izazovne napram sadašnjim mogućnostima. Metodama asocijacije na prethodne ideje dodatno proširujemo listu različitih pojmova koje potom pokušamo povezati kako bi pronašli potencijalna rješenja.

Sakupljanje materijala

Ako se radi redizajn web stranice, “krademo” s nje čim više materijala imajući na umu da ćemo sve to još i dodatno oplemeniti. Razmatramo stanje s mogućnostima novih tekstova koje bi nam klijent mogao ustupiti, kao i nove i kvalitetnije fotografije, PDF datoteke proizvoda, tehničke specifikacije ili bilošto drugo što nam može biti od koristi.

Sve materijale stavljamo na hrpu i potom razvrstavamo u smislene grupe radi organizacije. Razmatramo i kakav sadržaj možemo sami stvoriti bilo na temelju novih istraživanja ili na bazi dosadašnjih materijala.

Arhitektura informacija

Grupiranjem svih dostupnih materijala nastojimo definirati strukturu web stranice ili web trgovine poznatije pod pojmom arhitektura informacija. Sve polazi od toga kakav sadržaj imamo sada i kakav ćemo imati kasnije, razmišljamo o našim korisnicima i kakve su im potrebe i ciljevi. Ako se radi redizajn web stranica razmatra se postojeća struktura i traži se načina da se ona poboljša.

Kreira se persona (tipični kupac) i uz dijagram toka analizira se njegovo kretanje po stranicama od prvog dolaska (slijetanja na stranicu) do konačnog cilja (izvršenja neke konverzije). Stranice organiziramo u logične cjeline i razvijamo odnose između njih kao imaginarne linkove kako bi ih povezali.

Analiza ključnih riječi

Postavljanje ključnih riječi važna je stavka izrade web stranica, osnova je svake SEO optimizacije za tražilice kao i bilokoje marketinške kampanje. Bez temeljitog upoznavanja s njima nećemo stvoriti ni dobre temelje za dalje stoga je ovo faza koju ne smijemo nipošto preskočiti.

Pomoću nekoliko alata radimo analizu ključnih riječi koje korisnici upisuju u tražilice, analizu ključnih riječi konkurencije. Ovisno o kompetitivnosti riječi dodatno obraćamo pažnju na duge ključne riječi (s dugim repom, tj. long tail keywords), organiziramo riječi u kategorije prema semantici i vrijednosti, pazimo na kanibalizaciju sadržaja (da unutrašnje stranice ne konkuriraju jedna drugoj za istu tematiku). I u ovoj fazi nam pomaže prethodno spomenuti brainstorming ideja.

02. Estetika i umjetnost

Grafički dizajn i vizualni identitet stranice

Druga faza je faza dizajna u kojoj se prikupljeni podaci polako pretvaraju u zamisli i konkretne predloške. Faza u kojoj najviše dolazi do izražaja naša kreativnost u odnosu na sadržaj kojim raspolažemo.

Izrada grube skice

Na temelju prikupljenih informacija izrađuju se osnovne ideje web stranice. Prvo započinjemo vrlo šturim ali slobodnim skicama olovkom na papiru a potom i malo finije skice struktura svih značajnih unutrašnjih stranica pomoću žičanih okvira (tzv. wireframe) na računalu.

Cilj žičanih okvira je postavljanje osnovne vizualne hijerarhije teksta i slika imajući na umu svaku dodatnu funkcionalnost i interaktivnost. Primjerice, možda želimo imati pregled popularnih proizvoda na početnoj stranici a ispod njega svjedočanstva naših korisnika. Skicom ćemo brzo definirati te module i njihove osnovne pozicije bez ulaženja u detalje i manje bitne informacije. Razmišljamo generaliziranjem. Boje u ovoj fazi još nema, sve je ogoljeno i crno-bijelo.

Razrada vizualnog identiteta kroz sve stranice

Kada je dio osnovne strukture završen i usuglašen s klijentom, postavljaju se načela dizajna i korisničkog sučelja web stranice.

Ovdje se definiraju svi elementi dizajna kao što su primarne i sekundardne boje, izgled i veličine tipografije, pozivi na akciju (gumbi, linkovi), izgled drugih elemenata klikabilnog korisničkog sučelja i svi drugi stilovi koji će biti važni za cjelokupni dojam stranica. Boje se definiraju prema logotipu i generalno se nastoji zrcaliti sadašnji vizualni identitet brenda kako bi se zadržala prepoznatljivost i dodatno učvrstila. Posebna pažnja pridaje se minimalnom kontrastu teksta u odnosu na pozadinu da zadovolji standarde digitalne pristupačnosti.

Izrada finalnog dizajna (high fidelity)

Razrađuje se dizajn web stranica kao konačna prezentacija. Dizajn se dosljedno stilski primijenjuje kroz svaku sekciju i elemente kako bi bili konzistentni i ostavili snažan utisak korisniku.

Dizajn se balansira tako da bude vizualno ugodan ali iznad svega, dužnost kvalitetnog dizajna je da dobro zaokruži glavni sadržaj (tekst, slike) i istakne ga bez svoje nametljivosti.

Sadržaj je taj koji diktira sve a prilikom dizajniranja odmah imamo na umu tehnička rješenja koja će biti optimalna i glatko odraditi posao. Isto kao i dizajn, tako i tehnička funkcionalnost mora biti posve podređena sadržaju. U planu je izraditi web stranicu koja će biti optimalna za cjelokupno korisničko iskustvo, brzinu učitavanja i na malim ekranima te samim time dodatno optimalna i za tražilice, a shodno tome se pazi da se dizajniranjem ne stvara glomaznost stranice koja bi uslijedila zbog postavljanja suviše raznolikih skripta i kozmetičkih stilova.

U konačnici, ovo je finalni grafički prijedlog cijelog rješenja.

Probni prototip korisničkog sučelja i interaktivnost

Faza koja se često preskače u projektima manjeg budžeta ali značajna je za velike projekte zbog kompleksnosti izrade. Naknadno na finalni dizajn izrađuje se probni prototip koji se razlikuje po interaktivnosti. Iako u ovoj fazi još nismo ni krenuli u tehničku izradu web stranice, možemo imati viziju kako će se ona ponašati, kako će korisnici imati funkcionalnosti, kako će reagirati pozivi na akciju na njihov klik i sve druge moguće interakcije između korisnika i stranice.

Fazom izrade prototipa omogućujemo da svi koji su uključeni u projekt znaju tok web stranice, kretanje korisnika kroz prodajni lijevak te da kada krene tehnička izrada web stranice neće ništa biti prepušteno slučaju.

03. Tehnička rješenja

Programiranje stranice po mjeri

Nakon utvrđenog i usuglašenog dizajna kreće se u izradu web stranice. Programiranje web stranica proces je koji se također možemo definirati u nekoliko faza.

Programiranje i povezivanje s bazom podataka

Kreira se baza podataka i povezuje sa WordPress CMS-om. Baza podataka je poput gradske knjižnice, sadržavat će sav sadržaj koji je vezan za web stranicu ali isto tako i sve opcije korisnika koje će biti povezane s automatiziranim prikazom na stranici. Baza podataka sadrži polja za unos svih potrebnih informacija i unosi se probni sadržaj za svaki predložak (tip dizajna) koji se planira raditi. Pomoću PHP programskog jezika takvi podaci ispisuju se unutar HTML strukture koja drži sadržaj u definiranim područjima i to je ono što vidimo na web stranici. Radi se o prikazu golih informacija te još nema estetike koja će dati život stranici ali sada tim elementima možemo manipulirati.

Stranice se kodiraju i programiraju s fokusom na izbjegavanje repetivnosti, fokus je na visoku učinkovitost prilagođenih rješenja za dobru skalabilnost (za eventualna naknadna ažuriranja i nadograđivanje komponenata u budućnosti). Pazi se da sve funkcionira glatko, imajući na umu optimalnost izvršenja upita prema bazi podataka kako ne bi došlo do zagušenja servera, optimizaciju brzine u pregledniku korisnika, dobru praksu tehničke optimizacije za tražilice a pisanjem programskog kôda vodi se briga za sigurnost stranica. Sukladno tome programira se uz pomoć JavaScripta koji je zadužen za izradu interaktivnih komponenata.

Ovisno o tehnologiji, vrsti i veličini projekta ovaj proces može potrajati od nekoliko dana do nekoliko tjedana. Rok izrade uvelike ovisi o kompleksnosti projekta.

Stranice se postavljaju na testni demo server u fazama kako bi klijenti i druge osobe koje su uključene u projekt mogle vidjeti aktualnu verziju web  stranice.

Prilagodba za sve veličine ekrana

Najviše vremena često iziskuje prilagođavanje CSS stilova koji su zaduženi za kozmetički izgled stranice. Ovisno kako je diktiran vizualni stil svih elemenata, tako ga je potrebno zrcaliti na same web stranice. Definirani predlošci prilagođavaju se po svim veličinama ekrana bez obzira o kojem uređaju se radi (mobiteli, tableti, laptopi, stolna računala). Neovisno o brendu i modelu uređaja, sve stranice se moraju u potpunosti prilagoditi za svaki pomak širine ekrana na piksel. Eventualno tamo gdje je još potrebno, rade se korekcije za glavne tipove preglednika (Chrome, Firefox, Edge, Safari) iako su oni danas više-manje svi standardizirani i istog prikaza.

Strukturirani podaci

Kako bi web stranici omogućili bolje pozicije na tražilicama i konkurili za bogate rezultate, koristimo strukturirane podatke kojima dodatno oblikujemo sadržaj određenim kodovima. Kodovi su nevidljivi posjetiteljima na ekranu ali su korisne informacije tražilicama. Pomoću njih pomnije definiramo značenje podataka na stranici i shodno time, tražilice bolje razumiju o kakvom sadržaju se radi.

Primjerice, imate web trgovinu u kojoj prodajete knjige. Svaka knjiga ima svoj naslov, autora, cijenu, broj stranica, ISBN (točan identifikator) itd. Svaki od tih podataka se može precizno definirati tražilicama.

Digitalna pristupačnost

Stranice se kodiraju imajući na umu posljednje standarde digitalne pristupačnosti (tzv. accessibility) kako bi se svim korisnicima omogućio pristup bez obzira na ograničenja koje imaju. Pazi se da se stranicama može navigirati uz pomoć tipkovnice i da su svi elementi propisno označeni na fokus. HTML kôd se nadograđuje aria oznakama koje daju konkretnije informacije čitačima ekrana. Usput, provjerava se i je li što promaklo s dizajnerske strane (dovoljan kontrast slova…).

Interaktivnost i animacije

Završna faza izrade web stranica su animacije, tranzicije i svi drugi efekti koji imaju isključivo dekorativnu svrhu, da korisniku stvore ugodno ozračje na stranici i utvrde njegove akcije. Efekti moraju biti suptilni da bi bili učinkoviti, ne smiju biti prenaglašeni a opet moraju biti dovoljno primjetni, da ne smetaju korisnicima koji se duže zadržavaju na stranici ili se radi o starijim posjetiteljima koji se vraćaju jer im je koristan sadržaj.

04. Fino poliranje

Optimizacija, testiranje i objava

Web stranica je velikim dijelom završena, vrijeme je za fina uštimavanja i testiranja.

Optimizacija brzine učitavanja

Da bi web stranica bila ultra brza po pitanju učitavanja korisnicima, potrebno je izvršiti određene radnje koje su posebice bitne na mobilnim uređajima jer imaju ograničenu vezu s internetom. Brzina se testira pomoću određenih alata koji pružaju objektivni pristup i konkretne statističke podatke i potom se vrše korekcije. Slike se prebacuju na novi format slika WEBP koji će im dodatno smanjiti težinu, stranice se predmemoriraju za posjetitelje (tzv. cache), sažimaju se sve JS i CSS datoteke, koristi se CDN, postavlja se Gzip kompresija…

On-page i tehnička SEO optimizacija

Rade se korekcije na strukturi naslova (h1-h6), meta oznake za naslove, pišu se meta oznake opisa za stranice, za slike koje su finalizirane i neće biti mijenjane pišu se alt tagovi uz korekciju naziva datoteka. Radi se na internom linkanju stranica, postavljaju se odlazni linkovi na autoritativne stranice, kanonični linkovi ako ima istih stranica (jako sličnih ili duplikata) da se preusmjere na mjerodavan link i mnoge druge radnje.

Temeljito testiranje web stranica

Premda su testovi standardni način provjere prilikom svake razvojne faze ova faza je majka svih testova. Završna je faza testiranja web stranice i radi se prije puštanja projekta u javnost. U nju je uključeno temeljito testiranje korisničkog sučelja, interaktivnost stranica, brzine, stranice se još naknadno poliraju i fino uštimavaju. Proučavaju se debug logovi i eventualno se rade manje korekcije kako bi se sve dovelo do savršenstva.

Migracija na glavni server

Kada je s klijentom usuglašena finalna verzija i svi smo zadovoljni, projekt se seli u produkciju na glavni URL. Mijenjaju se linkovi da se zrcale na novu adresu i potom se još jednom vrše testiranja. Testiraju se kontakt forme i analizira se cjelokupni projekt alatima kako bi se eventualno otkrili nevažeći linkovi do kojih bi moglo doći prilikom migracije ili promjene kod restrikcija API ključeva koje se moraju zrcaliti na primarnu domenu.

05. Sadržajni marketing

Stvaranje sadržaja i digitalni marketing

Web stranica je finalizirana i sve daljnje radnje ovise o dogovoru s klijentom. Predaje se ključ u ruke ili se povremeno ili kontinuirano radi na promotivnim aktivnostima.

Pisanje sadržaja za promociju

Izrađuje se strategija pisanja daljnjeg sadržaja koji će služiti za promociju, za dijeljenje na društvenim mrežama i preko drugih kanala. Sadržajem se želi dodatno privući ciljana publika pomoću korisnog sadržaja vezanim za svrhu stranice a svi tekstovi pišu se personaliziranim tonom, s jasno razrađenom strukturom imajući na umu optimizaciju za tražilice.

Jačanje aktivnosti na društvenim mrežama

Radi se na jačanju vidljivosti brenda na društvenim mrežama ovisno gdje se nalazi ciljana publika. Svaka platforma nosi određene prednosti. Facebook ipak najčešće prednjači za tvrtke koje orijentiraju poslovanje prema korisnicima. Stoga je najveći naglasak na vođenje Facebook profila, radi se na sakupljanju pratitelja i novim objavama se publika nastoji držati zagrijanom za proizvode i usluge.

Plaćeno oglašavanje

Kreiraju se i vode plaćena oglašavanja koja nam dodatno pomažu dosegnuti željenu publiku. Najvažniji su ovdje Google Ads i Facebook Ads, premda postoje i druge platforme. Oglasi se plaćaju po kliku koji korisnik napravi za svaki oglas unutar kampanje. Važno je ovdje pronaći pravu ravnotežu između cijene i izvedbe oglasa, kako bi se ostvarila čim bolja konverzija u odnosu na uloženo. Ciljati se mogu i određene skupine korisnika na temelju prijašnjih posjeta ili kupci koji su već jednom obavili kupovinu.

E-mail marketing

E-mail marketing je vrlo učinkovit način oglašavanja i odličan je za direktnu komunikaciju s publikom. Prethodno je potrebno napraviti modul koji će služiti za sakupljanje korisnika na mailing listu i pozivati ih da daju svoj pristanak, često u zamjenu za ostvarenje malog bonusa u trgovini ili pristup nekom premium sadržaju. Potom se izrađuje strategija slanja poruka, kreiraju se e-mail predlošci optimalni za konverziju i nakon slanja poruka prati se ponašanje korisnika i njihovo konverziranje.

06. Dugoročna suradnja

Monitoring i održavanje

Kao i prethodna faza digitalnog marketinga tako je i ova faza opcionalna te sve ovisi o potrebama klijenta, željama, mogućnostima i planovima.

Održavanje i nadogradnja sustava

Generalno, predlažemo održavanje web stranica jer baš kao što i automobil treba povremeno servisirati slično je dobro raditi i sa stranicom. Mjesečno ili kvartalno se rade tehničke nadogradnje; ažuriranje WordPressa na posljednju verziju, izrađuju se sigurnosne kopije baze podataka i eventualno cjelokupnog projekta (slike i drugi medijski zapisi), radi se nadogradnja korištenih JS skripta u temi radi podržavanja novih uređaja, kompatibilinosti između različitih sustava i ispravka bugova.

Proučavaju se programski logovi te se sukladno njihovim informacijama prema potrebi vrše korekcije i nadopune. Kontrolira se tehnička ispravnost kako bi se stranica održala živom i suvremenom.

Analiza prometa

Sukladno postavljenim mjerljivim ciljevima praćenja, rade se analize uspješnosti kroz detaljna izvješća Google Analytics na mjesečnoj, kvartalnoj i/ili godišnjoj razini. Analiziraju se brojni podaci koji nam točno govore što se događa na stranici, kakva je posjeta, tko su posjetitelji, kakvi su im interesi, preko kojih kanala dolaze na stranicu, koliko dugo se zadržavaju, na kojim mjestima zapinju itd. Takvi podaci nam pomažu stvoriti jasniju sliku kako web stranica odjekuje korisnicima i kako kotira na internetu.

Klijentu se podnose izvješća i sukladno njima se razmišlja o daljnjoj strategiji rada.

Implementacija novih mogućnosti i korekcije prema potrebama

Sukladno željama klijenta, stranica se povremeno ažurira novim sadržajem, aktualnostima, novim slikama. Radi se implementacija novih modula prema potrebi, izrada novih predložaka i funkcionalnosti radi novih tipova sadržaja, izrada novih interakcija i njihovo prilagođavanje po ekranima itd.

Idi  na  vrh