fbpx

Case study – petason.hr

Naslovnica – malo drukčija od tipičnih Kod osmišljavanja naslovnice vodilo nas je nekoliko ciljeva: ona ne smije sličiti naslovnicama većine web stranica koje danas susrećemo na internetu, ona ne smije … Više

“Zahvaljujem na Vašoj profesionalnosti i kooperativnosti”

Baš mi se sviđa stranica, i web verzija, i mobilna. Ne mogu dovoljno naglasiti koliko zahvaljujem na Vašoj profesionalnosti i kooperativnosti, baš sam imala sreću što ste u pravo vrijeme poslali ponudu za izradu web stranice, upravo kada sam tražila s kim bismo to mogli odraditi. Bilo mi jako drago surađivati s Vama, rado ću Vas preporučiti dalje.

Petra Bokan, rukovoditeljica prodaje u Petason d.o.o, petason.hr

Koncept
Dizajn
Razvoj
Responzivnost
Case study – petason.hr - logotip

Tvrtka Petason d.o.o. jedna je od vodećih mesnih industrija u Hrvatskoj, koja nam se obratila u želji da osvježe svoju web prezentaciju, prilagode ju novim tehnologijama i trendovima, te se na taj način dodatno približe svojoj ciljnoj skupini. S obzirom na kredibilitet koji ova tvrtka ima, ali i kupce među kojima je nekoliko zaista velikih imena, smatrali smo da će ih na pravi način prezentirati jedino web stranica izrađena po mjeri njihovog poslovanja. U nastavku pročitajte što je to u njihovom slučaju točno podrazumijevalo.

Naslovnica – malo drukčija od tipičnih

Kod osmišljavanja naslovnice vodilo nas je nekoliko ciljeva:

  1. ona ne smije sličiti naslovnicama većine web stranica koje danas susrećemo na internetu,
  2. ona ne smije biti pretrpana sadržajem (ovo je jedna od prvih želja koju je iznijela naša klijentica Petra),
  3. mora biti skladna i atraktivna,
  4. mora biti zanimljiva.

Bilo je izrazito važno uskladiti dizajn s korporativnim identitetom tvrtke Petason d.o.o.. Elementi web stranice prate boje logotipa (plava i roze), uz dodatak određenih neutralnih nijansi. Odlučili smo koristiti niz animacija na elementima, koje se pojavljuju na hover (pomicanje miša), ili prilikom pojavljivanja elemenata dok korisnik scrolla po web stranici.

Odlučili smo naslovnicu podijeliti na nekoliko važnih segmenata, koji će korisniku imati najviše smisla, i ujedno podizati kredibilitet tvrtki koja iza web ove stranice stoji.

Naslovni slider

Naslovni slider nema tipičnu promotivnu funkciju u smislu prezentacije posebne ponude, već smo ga iskoristili za naglašavanje najvažnijih prednosti tvrtke Petason d.o.o. –  a radi se o sljedećem:

  1. riječ je o mesnoj industriji br. 1 u Dalmaciji,
  2. koja ima vrlo širok asortiman proizvoda,
  3. i koja narudžbe isporučuje u roku 24h.
Naslovni izmjenjivač fotografija (slider)

Kod izvedbe naslovnog slidera imali smo nekoliko izazova:

a) Ugradili smo element koji pokazuju koliko je vremena svaki slide aktivan dok ga ne zamijeni drugi (linija koja se puni drugom bojom), a riječ je o custom elementu kojeg smo programirali u ove svrhe. Inače, kod izrade izmjenjivača fotografija nemamo praksu koristiti gotove pluginove, kojih na internetu zaista ima jako puno i s web stranicom se integriraju putem jednostavne instalacije u WordPress sučelju. Nije da želimo ići kompliciranijim putem, već je stvar u tome da sa svakim pluginom treba biti oprezan, što zbog kompatibilnosti s drugim elementima web stranice, što zbog problema s kasnijim održavanjem (više o toj temi čitajte ovdje). Zato radije implementiramo vlastita rješenja, pa tako možemo reći i da je naslovni slider na petason.hr potpuno customizirana stvar, napravljena po mjeri ovog poslovanja.

b) Drugi izazov koji smo imali jeste prikaz fotografije u kombinaciji s tekstom. Vremenom smo naučili da rijetko koji klijent prihvaća da njegove fotografije ne sjaje u punom sjaju, točnije, većina se teško miri s tim da se preko fotografije “prevlače” boje, kako bi se ona “umirila” i time postala dobra pozadina tekstu, a koji bi onda bio lako čitljiv. U slučaju web stranice petason.hr nismo niti pokušavali narušiti izgled fotografija na ovaj način, već smo u startu tražili načine da one ostanu u izvornom stanju, a da tekst na njima ipak bude jasno prezentiran. Poslužili smo se CSS tehnikom djelomičnog zatamnjenja fotografije, pazeći da što preciznije odredimo koji njen dio će podleći ovom efektu, tj. da se zatamnjenje vrši samo tamo gdje je to zaista potrebno da bi tekst bio čitljiv. Ovo je naročito tricky jer je web stranica responzivna, svi elementi slidera (fotografija, tekst, element zatamnjenja) su dinamični i pokazuju se drukčije ovisno o rezoluciji i veličini ekrana. No, uz nekoliko sugestija naše klijentice Petre, uspjeli smo sve skupa dozirati na pravi način – tekst ne smeta slici, slika ne smeta tekstu.

Možda vam ove dvije točke zvuče kao sitnice koje nema potrebe naglašavati, ali činimo to upravo jer su baš ovakvi detalji zaslužni za klijentovo (ne)zadovoljstvo završnim dojmom i konačnim rezultatom.

Želimo također naglasiti da je klijentica značajno sudjelovala u projektu izrade ove web stranice – svojim odabirom fotografija, željama i idejama o njihovim pozicijama, te nekim drugim sugestijama koje su se odnosile na vizualni aspekt. Takav zajednički pristup projektu je siguran put do dobrog rezultata, zadovoljstva klijenta i na koncu dobrog korisničkog iskustva. Klijenti su takoreći prvi filter i pokazatelj kako će web stranica proći kod prosječnog korisnika, stoga je važno saslušati sugestije i sve kritike uzimati u obzir.

Proizvodni asortiman

Ono što je na prethodnoj web stranici tvrtke petason.hr jako nedostajalo, jeste jasna prezentacija grupa proizvoda na samoj naslovnici, a što je bila jedna od naših prvih sugestija prilikom ugovaranja projekta. Dakle, inzistirali smo na tome da korisnici već na naslovnici budu upoznati makar s najvažnijim proizvodnim asortimanom, koji će biti poveznica na unutarnje stranice na kojima će ta prezentacija biti opširnija.

Prezentacija grupa proizvoda na naslovnici

Ponosni smo na ovaj dio prezentacije jer smo zaobišli tipične elemente – klasične statične blokove u vidu teksta i slike koji se mogu vidjeti na drugim web stranicama sa sličnom ponudom. Umjesto toga, kreirali smo interaktivni izmjenjivač sadržaja, gdje je slika u prvom planu (jer slika govori tisuću riječi :-)), praćena naslovom, opisom i tipkom koja vodi na više informacija o svakoj od dvije glavne grupe proizvoda. Nismo zaboravili povesti korisnike i do opće prezentacije proizvoda tvrtke Petason d.o.o. – putem tipke pozicionirane desno od izmjenjivača sadržaja, jer smatramo da dodatnih informacija nikad dosta.

Tu je i prezentacijski video, koji smo odlučili aktivirati putem tipke (također desno do izmjenjivača sadržaja), a koji se otvara u modalnom prozoru. Time smo uštedjeli nešto prostora na naslovnici i zadržali preglednost.

Kvaliteta i sigurnost hrane

Dok smo razmišljali o sadržaju, činilo nam se izrazito važnim odmah na naslovnici naglasiti činjenicu da Petason d.o.o. zaista vodi računa o ovom aspektu svog poslovanja i pokazati certifikate koje imaju. Izazov je bio prezentirati sve skupa na zanimljiv način jer, iskreno, tko još čita suhoparne tekstove o higijenskim uvjetima, i laboratorijskim provjerama?! Stoga smo se ponovno odlučili staviti sliku u prvi plan, istaknuti i animirati “ulazak certifikata u kadar”, te ne pretjerivati s duljinom teksta. Predvidjeli smo tipku koja vodi na unutarnje stranice o temi Kvalitete, na kojima zainteresirani korisnici mogu dobiti sve potrebne informacije.

Kvaliteta i sugurnost hrane

Posebna ponuda

Petason.hr je korporativna web stranica na kojoj se u budućnosti neće puno toga mijenjati po pitanju sadržaja. Često ćete i na korporativnim web stranicama vidjeti prikaz novosti, a možda ste zamijetili i da su te novosti ponekad stare i po nekoliko godina. Takva praksa kod korisnika stvara dojam da je riječ o dosadnom poslovanju kod kojeg se ništa ne događa (nema se što novoga za objaviti), i upravo to smo htjeli izbjeći pri izradi ove web stranice. S obzirom da tvrtka Petason d.o.o. trenutno ima 2 posebne ponude, i da će u budućnosti vjerojatno imati još neke, na naslovnici smo predvidjeli 2 uvodna modula, koja vode na unutarnje stranice s više informacija. To nisu tipične vijesti koje se na ovim pozicijama pokazuju automatizmom (npr. posljednje objave iz kategorije Novosti), već segmenti koje klijent ima pod potpunom kontrolom tj. sam određuje koje će točno stranice biti prikazane na ovim pozicijama.

Reference

Kao i uvijek, smatramo da je društveni dokaz krucijalni dio svake dobre marketinške prezentacije, pa tako smo i na web stranici petason.hr predvidjeli segment s referencama. Klijentica je prihvatila našu sugestiju i na tom dijelu web stranice moguće je vidjeti logotipove nekih od njihovih kupaca. Predvidjeli smo mogućnost prikaza i većeg broja logotipova, vjerujemo da će tvrtka Petason d.o.o. tu mogućnost i iskoristiti, te u dogledno vrijeme pohvaliti se i nekim drugim partnerima.

Prikaz referenci

Unutarnje stranice

Kod unutarnjih stranica postoji nekoliko zanimljivosti koje želimo istaknuti.

Najprije kad je riječ o strukturi sadržaja. Naime, WordPress poznaje pojam matičnih stranica (funkcioniraju slično kao nadkategorije i potkategorije), međutim, nema definiran izgled istih na frontendu – a to je u slučaju web stranice petason.hr moralo biti besprijekorno, upravo jer je njihov sadržaj vrlo razgranat. Stoga smo dizajnirali izgled matičnih stranica, prateći vizual ostatka web stranice.

Prikaz sadržaja matične stranice

Fotografije

Kako smo prethodno spomenuli, klijentici je bilo izrazito važno iskoristiti što više fotografija u prezentaciji, stoga smo predvidjeli da zaglavlje svake unutarnje stranice krasi fotografija pune širine. Želja klijentice je bila omogućiti im da svaka unutarnja stranica ima jedinstvenu fotografiju, što smo rado ispunili i pritom proširili standardne mogućnosti WordPressa (omogućivši jednostavan upload fotografija u sučelju svake unutarnje stranice).

Zaglavlje unutarnjih stranica
Uređivanje zaglavlja u sučelju svake unutarnje stranice (modul za upload slike)

Kontakt stranica

Ne želimo stranicu kontakt (pogledajte ju ovdje) predstavljati kao težu inovaciju, jer na ovakav ste koncept do sada možda i naišli. No, nije nešto što se viđa na svakom koraku, za korisnika je praktično, pa stoga smatramo da je vrijedno da bude spomenuto kao specifičnost web stranice petason.hr.

Dakle, Google map karta s lokacijom tvrtke se proteže po cijeloj širini zaglavlja web stranice, a “body” stranice je rezerviran za tekstualne podatke. Na svakoj unutarnjoj stranici smo predvidjeli mogućnost prikaza kontakt formulara, jer smo uvjereni da kontakt alati korisniku uvijek trebaju biti na dohvat ruke. Na kontakt stranici to još više ima smisla, pa pored tekstualnih kontakt podataka, i ovdje imamo kontakt formular za brzo slanje upita.

Izgled kontakt stranice

Upravljanje sadržajem i proširenje standardnih WordPress mogućnosti

Prethodno smo spomenuli da smo proširili standardne WP mogućnosti dodavanjem modula za upload fotografija u zaglavlje svake unutarnje stranice i prilagodili mogućnost prikaza matičnih stranica.

No, kao i uvijek, otišli smo puno dalje od toga – na web stranicu smo integrirali vlastiti framework na hrvatskom jeziku, pomoću kojeg i tvrtka Petason d.o.o. može mijenjati većinu sadržaja na naslovnici web stranice i time biti poprilično neovisan administrator svog weba.

Pored intuitivnog sučelja kojim smo proširili standardne opcije WordPressa, klijentu smo osigurali i video upute za njegovo korištenje, i time ispunili jedan od najvažnijih uvjeta svakog našeg projekta – samostalnost u vođenju vlastite web stranice u budućnosti.

Multijezičnost

U startu je dogovoreno da web stranica petason.hr treba biti dvojezična, što znači da smo već u početku projekta trebali predvidjeti nekoliko stvari:

  1. Engleski sadržaji trebaju imati vlastiti okvir za unos koji će funkcionirati kvalitetno s prednje strane web stranice (fronend), tako da ne bude miješanja sadržaja hrvatske i engleske verzije.
  2. Klijent engleske sadržaje mora moći uređivati jednako jednostavno kao i hrvatske u web sučelju.
  3. Engleske sadržaje treba biti moguće optimizirati za tražilice neovisno o hrvatskim.

Sve ovo omogućio je sjajni WPML. Za developere on ponekad predstavlja izazov, jer ima izrazito napredne mogućnosti i tehnilčki je vrlo kompleksan, no, jednom kad se podesi ispravno, za administratora web stranice ne predstavlja nikakav problem koristiti ga.

Na screenshotu u nastavku možete vidjeti kako izgleda pozadinsko sučelje web stranice petason.hr na kojem je unesen engleski sadržaj (jednostavno uređivanje, kao i kod hrvatskog).

Sadržaj engleske naslovnice (backend)

Zaključak

Zaključak stane u jednu rečenicu – klijent je zadovoljan krajnjim rezultatom, mi također. Ono što za tvrtku Petason d.o.o. slijedi po pitanju njihove web stranice jeste raditi na njenoj dinamičnosti i održavati ju živom. To će postići dodatnim sadržajima za već predviđene podstranice (tu vidimo dosta mjesta za napredak), a vjerujemo da će vremenom i po potrebi kreirati i nove rubrike – tematski zanimljive njihovoj ciljnoj publici.

Želimo iskoristiti priliku i zahvaliti se klijentici Petri na povjerenju i lijepim riječima o suradnji s nama, te tvrtki Petason d.o.o. poželjeti sve najbolje u budućem poslovanju – iako je ovo tek početak naše suradnje i nema potrebe da zvuči kao rastanak 😉

Mi volimo vjerovati u sljedeće – jednom naš klijent, uvijek naš klijent.

Treba vam kvalitetna web stranica potpuno prilagođena vašim potrebama?

Kontaktirajte nas i zatražite ponudu (ili postavite pitanje), putem e-maila [email protected], telefona +385 91 455 1066 (12-17h pon-pet), te se raspitajte o našim uslugama. Veselimo se suradnji s vama, te postizanju vaših poslovnih ciljeva.

Unajmite nas za svoj idući projekt!

Planirate razvoj vlastitog projekta?

Agencija ste koja traži partnera?