Preskoči do glavnog sadržaja
Klijent
Aquakori d.o.o.
Osnovno o klijentu:

Aquakori d.o.o. je trgovačko društvo čija primarna djelatnost je distribucija vode u galonima za poslovne prostore i kućanstva.

Rad na projektu uključuje:
01. Rezime

Sažetak

Aquakori d.o.o. je trgovačko društvo čija primarna djelatnost je dostava vode u galonima. Klijentima u najam daju aparate za vodu i aparate za kavu a vodom u galonima i kavom u kapsulama opskrbljuju nekoliko stotina zadovoljnih korisnika na području sjeverne Hrvatske. Analizom stanja na tržištu, tvrtka je dodatno prepoznala važnost higijenskih i dezinfekcijskih proizvoda i u pravom trenutku uhvatila val za proširivanje opsega svog djelovanja.

Premda kao distributer vode djeluje na tržištu već više godina, prisutnost na digitalnom tržištu je izostajala. Sav dotadašnji kontakt s klijentima postignut je putem fizičkog kontakta na terenu.

Primarni cilj je zbog toga bio postaviti web stranicu koja bi informativno služila posjetiteljima da se upoznaju s proizvodima i uslugama a dugoročni cilj projekta bio je jačati vidljivost tvrtke i postaviti se kao autoritet na visokim pozicijama na tražilici.

 

02. Plan

Strategija izrade web stranice

Naš pristup bio je stvoriti dovoljno preglednu web stranicu koja bi korisnicima jednostavno komunicirala vrijednost proizvoda. Stranica treba jasno prezentirati poruku: “Prirodna izvorska voda”. Web stranica treba biti unikatna i inovativna, kako bi se pomoću kvalitetnog dizajna i ugodne interakcije istaknula iznad prosječnosti gomile.

Primarni ciljevi izrade web stranice su stoga:

  • prilagođena svim ekranima (responzivna), pristupačna svim korisnicima bez obzira na eventualna ograničenja koja imaju (tzv. accesibility) i iznimno brza da se u potpunosti učita unutar par sekundi
  • optimizirana za (sve) tražilice (iako najviše za Google) te da visoko rangira za ciljane ključne pojmove neovisno o plaćenom oglašavanju kako bi se privukla ciljana publika
  • stranica mora biti vizualno ugodna te dostojanstveno prezentirati tvrtku, njezine usluge i asortiman proizvoda
  • stranica treba objediniti visoko pozitivno korisničko iskustvo i informativan sadržaj koji je pomno strukturiran prema arhitekturi informacija s ciljem da jasno prezentira vrijednost i kvalitetu proizvoda te da u čim većoj mjeri potakne korisnike na konverziju (slanje upita za ponudu)
Izrada web stranice za Aquakori

Provedba izrade projekta

Projekt uvijek započinje istraživačkim radom i analizom tvrtke, njezinih proizvoda i usluga ali isto tako i površnim pregledom stanja na tržištu i dosegu konkurencije. U suradnji s klijentovim željama radi se brainstorming ideja te se opipava puls potencijalnosti projekta.

Osnovni principi izrade web stranice – od skice i grafičkog dizajna do finalnog rješenja

Metoda načina rada mogla bi se opisati u 4 koraka:

  1. Analiza i stvaranje informacija – analiziranjem projekta uz pomoć vizualne mape stranica, primijetili smo da se arhitektura informacija gradi od osnovnih stranica primarne hijerarhije, sekundarnih stranica koje čini katalog proizvoda razdijeljen u različitim kategorijama te pojedinačnih proizvoda koji čine stranice treće razine. Tok kretanja korisnika je dobro poznat za ovakav tip stranice i stoga je vrlo intuitivan korisnicima. Krenulo se u pisanje sadržaja prema prethodno utvrđenom planu.
  2. Izrada skica – skicirajući projekt u osnovnim crtama, eksperimentirali smo s izradom žičanih okvira (tzv. wireframe) za koje je karakteristično oskudno definiranje jednostavnih elemenata sve dok nismo pronašli ubitačnu kombinaciju koja zadovoljava korisničko putovanje i skladno zaokružuje prethodno definirani sadržaj.
  3. Grafički dizajn – žičane okvire polako smo pretakali u finalni dizajn pomno ugođen da dostojanstveno prezentira tvrtku i daje dobar cjelokupni vizualni dojam.
  4. Izrada web stranice – naposljetku, krenulo se u proces tehničke izrade web stranice što znači ručno krojen kôd radi potpune kontrole izvršavanja svakog segmenta i optimizacije brzine. Ovaj proces oduzima i najviše vremena ali je ipak dosta direktan jer je sve prethodno isplanirano. Premda je katalog proizvoda u svojoj srži zapravo web trgovina, sama implementacija potpunog procesa online kupovine nije izvršena do kraja jer se sva komunikacija s klijentom provodi putem definiranih ponuda za svakog klijenta. Stoga, neovisno na kojoj unutrašnjoj stranici se korisnik nalazi ili kada stigne na nju preko Google tražilice, uvijek mu je dostupan kontakt obrazac kojim lako može zatražiti ponudu.
Izrada kataloga web trgovine za Aquakori
Isječak grafičkog dizajna za Aquakori

Tehnike grafičkog dizajna

Vratimo se načas na dio u središnjici koji se tiče grafičkog dizajna i proanalizirajmo nakratko osnovni tok razmišljanja. Neki od osnovnih principa kvalitetnog dizajna su pomno odabrana tipografija (umjetnost oblikovanja teksta) te skladan odabir boja.

Razlozi odabira kombinacije boja

Plava boja u dvije varijacije simbolizira vodu i služi kao dominantna boja a koristi se i u logotipu za simbol kapi vode. Zelena boja je sekundarna, odabrana je radi stvaranja naglaska u dizajnu a povezuje ekološke vrijednosti tvrtke – punjenje prirodne vode sa šumskog izvora iz netaknute prirode. Žuta boja skromno se koristi u iznimnim slučajevima, primjerice, na uvodnoj sekciji početne strane gdje limun doprinosi osvježavajućem vizualnom dojmu. I nezaobilazna bijela boja za tzv. prazni prostor. Bijela boja daje čistoću što pogoduje čistoći vode koja zadovoljava sve mikrobiološke analize a ujedno doprinosi prozračnosti i eleganciji web stranice.

Odabir palete boja za web stranicu

Ovakva paleta opisala bi se kao prošireno analogna. Analogne boje su skupine od tri boje a nalaze se jedna pored druge na kotaču boja. Karakteristično za njih je da se često nalaze u prirodi zajedno te se stoga dobro slažu jedna s drugom.

Svim odabranim bojama blago su korigirane nijanse tako da budu dovoljno jakog intenziteta radi upečatljivosti a pazilo se i da zadovolje WCAG standarde digitalne pristupačnosti za minimalan kontrast u odnosu na pozadinu. Također je međusobni kontrast svake kombinacije tih boja toliko različit da ga uspiju razlikovati osobe koje su pogođene različitim tipovima sljepoće boje (monokromazija, dikromazija…). Premda takve osobe ne vide boju one mogu razaznati međusobni kontrast jer im se boja prikazuje u dovoljno jakim razlikama u nijansi sive, što lako možemo provjeriti određenim alatima.

Osnovni principi harmonije tipografije

Za tipografiju smo odabrali dva fonta koja su dostupna unutar Google repozitorija, Merriweather za istaknute naslove i Rubik za sav preostali tekst.

odabir tipografije za web stranicu

Merriweather pripada porodici tzv. serif fontova a naziv serif upućuje na male dekorativne elemente koji se nalaze na kraju svakog slova. Kod njega su serifi čvrsti i stabilni a font krase još zgusnuti oblici i otvorena forma slova. Za naslove smo uzeli jaku debljinu da tekst djeluje impozantno, a uz dodatak primarne plave boje vizualno je ugodan te pristaje brendu. Ukošenost slova koristimo kako bi razbili moguću ukočenost teksta i podržali prirodniji dojam. Sve u svemu, Merriweather je vrlo dobar izbor za font kojemu je cilj uhvatiti pažnju korisnika bez obzira radi li se o web stranici ili grafičkom tisku.

Drugi font je Rubik koji je zadužen za prikaz paragrafa, popisa, linkova i svih drugih tekstualnih elemenata koji nisu naslovi. Rubik je sans-serif font (sans je francuska riječ koja znači bez, odsutnost, ono što nedostaje), dakle pripada porodici fontova čija slova nemaju dekoracije. Dizajn fonta čine jake proporcije sa zaobljenim kutovima i malim kontrastom poteza. Font je pogodan za prikaz na modernim uređajima i vrlo dobro je čitljiv kada se prikazuje kao tekst u malim veličinama, što nam pogoduje za upotrebu u paragrafima i svih okolnih fraza.

Oba odabrana fonta dizajnirana su tako da sadrže cijeli niz težina, od tankih debljina preko normalnih do izuzetno podebljanih slova a sve s pripadajućim kurzivom (ukošenosti) što omogućuje široku slobodu u varijacijama u dizajnu. Također, oba fonta podržavaju i naša dijakritička slova (č, ć, ž, š, đ) što nam je bitno jer su web stranice namijenjene za hrvatsko tržište. Sve u svemu, pomno odabrana kombinacija za visoku čitljivost, dobar međusobni kontrast te skladan i oku privlačan dizajn.

Komponente u web dizajnu

Za uvodnu sekciju na početnoj htjeli smo stvoriti snažan vizualni utjecaj uz dozu interakcije i efekta. Kako ne bi pribjegli generičkom vrtuljku slika (tzv. carousel) već da budemo unikatniji i da se istaknemo iz gomile, odlučili smo da galon vode uvijek autoritativno stoji na mjestu a oko njega lebde glavne značajke tvrtke. Uz snažan element vode te limuna koji dodatno osvježi grafiku i daje joj jak kontrast.

Da se upotpuni vizualni doživljaj izradili su se dodatni efekti laganih tranzicija prikaza elemanata na ekran kako korisnik skrola stranicom. Glavna komponenta bliže podnožju je uvijek vidljiva kontakt forma kako bi korisnici sa bilokoje stranice brzo mogli poslati upit i tako izvršiti konverziju.

Isječak web stranice za svjedočanstva korisnika

Grafički dizajn

Osim same web stranice, za potrebe marketinške strategije izradili smo i nekoliko verzija grafika za različite potrebe brenda.

Prva i osnovna stvar svakog proizvoda je ambalaža. U tu svrhu, dizajnirali smo etiketu koja se lijepi na galon vode a koji se potom postavlja na aparate za vodu. Etiketa slijedi isti princip izrade kao i web stranica ali s dodatnim naglaskom na sam brend.

Osim obaveznih podataka koje nalaže zakon, na etikete smo postavili još i QR kod koji korisnicima omogućuje da ga skeniraju mobitelom te se direktno povežu s web stranicom a istog trena mogu saznati više informacija o ispravnosti vodi te drugim korisnim podacima.

Poigrali smo se s nekoliko varijacija etikete na temu a odabrana etiketa za finalni tisak je ona koja jasnije gura vidljivost brenda u prvi plan uz odrađene manje korekcije sporednih informacija. Dizajn i ovdje jasno prezentira brend te istaknutom tipografijom i ugodnim vizualnim dojmom poziva korisnika da se osvježi pitkom vodom a na dohvatu ruke su mu kontakt informacije.

Osim dizajna za tisak, izradili smo i nekoliko varijanti grafike radi jačanja vidljivosti na društvenim mrežama.

Grafički dizajn etikete za Aquakori
Grafički dizajn etikete za Aquakori
Grafički prikaz vode za footer na web stranici
03. Rezultat projekta

Završne riječi

Web stranica je pozitivno odjeknula na tržištu i zbog iznimno dobrih rezultata za koje je cjelokupni proces izrade zaslužan, tvrtka je širila udio klijenata i prodaja je rasla. Značajan porast u poslovanju uzrokovao je pozitivni proces promjene iz obrta u ambiciozniji d.o.o., a zbog proširenja područja djelovanja otvorile su se i druge mogućnosti uz zaposlenja novih djelatnika i nabavu dodatnih dostavnih vozila.

Zahvaljujući postignutim uspjesima web stranice a unatoč kriznom stanju zbog gospodarski nestabilnog tržišta uzrokovanog pandemijom koronavirusa, tvrtka je odlukom uprave odlučila pokrenuti i proizvodnju vode pod vlastitim brendom.

Ipak, za nas iznimno pozitivna stvar u cijeloj priči je da smo na povjerenje klijenta imali pred sobom prazno platno nad kojim smo imali potpunu kontrolu za ostvarenje naših zamisli. Uz najavljenu dugoročnu suradnju priča zasigurno tu ne prestaje.

Dojmovi klijenata

Što su rekli klijenti

Marko Eršeg, direktor Aquakori
PODIJELI S PRIJATELJIMA:
Idi  na  vrh