Pravljenje WP sajta [07] Vizuelni i funkcionalni dizajn

Table of Contents

U ovom članku pišem o tome kako je urađen vizuelni dizajn sajta, kao i, najvažnije, dizajn potrebnih funkcionalnosti sajta (u ovom slučaju newsletter i rezervacija termina). Ostali članci u ovoj seriji:

Sadržaj:

Uvod – zadatak
Utvrđivanje dogovorenih funkcionalnosti i dizajna
Izbor alata
Redizajn BikeGremlin sajta

1. Uvod – zadatak

Ovaj uvodni deo će biti malo poduži. Mislim da su ovde spomenute stvari veoma važne, jer nije bitno da li radiš lepo i brzo, ili loše i sporo, ako radiš pogrešnu stvar. Drugim rečima: strateško planiranje – brenda i on-line prisustva treba dobro promisliti i osmisliti pre dizajna i izrade sajta (takvo je barem moje mišljenje i iskustvo). Takođe, poglavlja su izlistana na početku (u odeljku za sadržaj), tako da možete preskočiti na deo koji vas zanima. No, krenimo:

Razlog pisanja ovoga je prvenstveno kao lični podsetnik i referenca. Verovatno će biti ažurirano vremenom. Sa kakvim problemima (ili, da napišem u više Linkedin-friendly formatu: “izazovima”) sam se suočavao i kako sam ih rešavao. Većinu stvari napisanih ovde kao tvrdnje/izjave treba shvatiti u smislu: “po mom mišljenju, koliko ja znam, na osnovu mog iskustva” – a ne kao “tako je sigurno”.

Prijatelj je želeo novi sajt za svoj posao, pa se konsultovao sa mnom oko toga. O čemu se radi? Već više godina ima kako je napravio svoj Room Escape. Opširnije će biti na njegovom sajtu, ali ukratko: zaključan si u sobi (sa do 4 prijatelja) i rešavanjem zagonetki pronalaziš izlaz – sa vremenskim ograničenjem od 60 minuta. Ima tu još dosta stvari, meni je to veoma cool i zabavno, ali ovo je suština.

Prva stvar vezano za taj posao je naziv brenda: “4 Sobe” (ili “4 Rooms” na engleskom). Ime ovog brenda asocira na neki hostel, ili hotel, ne na Room Escape brend. Da, ja znam za taj kultni film, super mi je, i kapiram da je od starta bilo u planu hostovati četiri različite escape sobe. Ali većina “normalnih” ljudi to neće skapirati i, kada vide ime brenda, čak i logo, neće ih asocirati odmah na to o čemu se radi.

Stoga je moj prvi savet bio da se re-brendira, kada je već pogrešio u startu (pre više od 5 godina). Ovaj savet nije prihvaćen.

Druga stvar je bila upoznavanje sa prirodom posla, načinom organizacije, trenutnim marketingom, prihodima, rashodima. Ovo je važno znati kako bi se mogli dati korisni saveti i na najbolji način unaprediti posao i u on-line segmentu. Nevezano za ovaj konkretan sajt: način evidencije stanja robe, korišteni softver, načini ažuriranja – sve su to bitni faktori kada se razmatra rešenje e-prodavnice. Isto važi i za lokalna, ili/i globalna zakonska pravila – u zavisnosti od tržišta (na primer: u Srbiji, ne možete naplaćivati od srpskih klijenata pomoću PayPal-a – protivzakonito je!?!).

Uvidom u postojeće stanje, moj zaključak je bio da postojeći sajt radi posao i da postoje ozbiljniji problemi koje bi trebalo rešiti. Ni ovaj savet nije prihvaćen, barem ni blizu u dovoljnoj meri. Razvoj posla može biti bolan i naporan, što sam iskusio iz prve ruke pri pokretanju svog Bike Gremlin biciklističkog servisa. Ali ako ne rešavaš probleme, oni se gomilaju.

Kraća digresija: Puno je lakše kada kompanija ima dobro uređen sistem, koji radi kako treba, idealno bi bilo i da je prilagođen za on-line poslovanje, pre implementiranja tog vida poslovanja. Moguće je i prilagoditi rad kompanije spram on-line poslovanja, najbolje u postupnim koracima, uvodeći jednu po jednu novu on-line poslovnu funkciju. Ali teško je raditi on-line ako se tome ne prilagodi i off-line poslovanje, barem u izvesnoj meri.

Sve u svemu – ostalo se pri tome da pravimo novi sajt. Uz novi domen – dok bi stari služio kao landing page za ovaj, ali i druge projekte.

Tokom karijere, neretko se dešava da ljudi prihvate moje sugestije, ali samo delimično – što često u potpunosti poništava njihovu svrhu, nekad i do granice da bi u slučaju takvih “delimičnih” implementacija bolje bilo ništa ne dirati. Ovo nije primer takvog slučaja, ali mislim da vredi spomenuti – ako angažujete eksperta, možda nije loše konsultovati se i oko konačnog izabranog načina implementacije. Odgovor: “onda bolje da ništa ne radite” ne mora uvek biti odraz sujete, može biti sasvim razuman stručni savet za razmatranje.

Pri izradi sajta, od starta je uključen i zajednički prijatelj Goran. Ja s njim volim sarađivati, dobro se razumemo, a on, za razliku od mene, zna Java Script, CSS i PHP dosta dobro – dok je moje iskustvo bitno za delove striktnije vezane za sam WordPress, teme, plaginove, kao i zaštitu, konfigurisanje hostinga, DNS, i mejlove. Nas dvojica zajedno, k’o jedan solidan početnik developer. 🙂

2. Utvrđivanje dogovorenih funkcionalnosti i dizajna

Što se estetskog izgleda sajta i brenda tiče – vlasnik je angažovao profesionalnog dizajnera. Meni to deluje malo previše mračno, ali pošto sam daleko od talentovanog vizuelnog dizajnera, ne bih sebe shvatao previše ozbiljno što se toga tiče.

Pri tome, u momentu pisanja ovog teksta, ni Goranu, ni meni, nije baš najjasnije kako predočeni dizajn pretvoriti u interaktivni, “klikabilan” oblik, tako da izgleda dobro i na manjim / većim ekranima, a i na tabletima i pametnim telefonima. Pripisujemo ovo svom neznanju i neiskustvu, do daljnjeg.

Za funkcionalnost, potrebno je sledeće:

Prikaz podataka o brendu i proizvodima – tj. escape sobama.
Mogućnost on-line bukiranja sobe u željenom terminu (od raspoloživih).
Newsletter, tj. mejling lista.
Mogućnost blog sekcije, tj. dodavanja članaka na razne teme kasnije.
Sajt treba da je na srpskom i engleskom – dvojezični.

3. Izbor alata

Za mnoge stvari ne postoji “najbolje” rešenje, tj. najbolje je rešenje koje je najbliže optimalnom. Objasniću konkretnim primerom: WordPress sajt je puno sporiji od sajta u čistom HTML-u, ali puno je lakše pomoću njega praviti i dodavati novi sadržaj. Tako da izbor alata, kao i dizajn sajta, zavise od planirane namene, željene funkcionalnosti, budžeta, preferencija itd. Što sve utiče svakako i na izbor hostinga.

U ovom slučaju, parametri su sledeći:

Budžet je “što manje moguće”.
Očekivani broj poseta je manji od 1000 dnevno.
Traženi vizuelni izgled je “napredan”, “egzotičan”.

Potrebno je izvagati raspoloživa rešenja spram svojeg znanja, iskustva, zahteva, i zadatih parametara. Odlučili smo se za sledeće:

Kvalitetno shared hosting okruženje.
WordPress kao osnova za izradu sajta. Sa svim svojim prednostima i manama.
Elementor, besplatna verzija, kao osnova za vizuelni dizajn, uz potrebne “ručne” dorade (nećemo praviti svoju temu od nule).
Upotreba gotovih, besplatnih plaginova za mejling listu (eng. “newsletter”) i rezervacije (eng. “booking”).

Domen je registrovan preko Porkbun-a. Od registracije nismo stigli prevesti isti na ime vlasnika, što generalno ne bih preporučio da se radi – najbolje je da vlasnik sajta odmah registruje domen na svoje ime. Ja bih svakako mirnije spavao znajući da i u slučaju da se meni nešto desi, vlasnik ima kontrolu nad svojim domenom.

Za hosting smo izabrali HostMantis, sa serverom u Londonu – uzevši jedan nalog sa mog reseller hosting paketa na istom.

Provajder pravi remote bekape na dnevnom nivou, a za rezervne kopije remote bekapa izabrali smo Backblaze B2, kao jeftino, a pouzdano rešenje. Za automatizaciju bekapa, koristimo JetBackup. Dolazi uključen u cenu reseller hostinga kod HostMantis-a, što je sjajno.

Iskoristili smo moj već postojeći nalog na MXroute za rešenje mejlova, kao provereno i pouzdano rešenje za slanje i primanje mejlova, što je važno za on-line poslovanje. U posebnom članku opisao sam prednosti i mane hostovanih mejl servisa.

Osnovu sajta čini aktuelna verzija WordPress-a 5.4.1. (u trenutku pisanja ovog teksta).

Postizanje željenog vizuelnog dizajna, radićemo pomoću besplatne verzije Elementor plagina, uz nešto dodatnog CSS-a i Java Script-a.

Za Newsletter, biramo istoimeni plagin. U posebnom članku objasnio sam kreiranje mejling lista u WordPress-u.

Za zakazivanje (booking) izabrali smo besplatni plagin Easy Appointments. To je provereno rešenje.

Višejezičnost rešavamo pomoću besplatne verzije Polylang plagina. Pisaću kad stignem o prednostima i manama različitih rešenja za pravljenje sajta na više jezika.

Dodavaću informacije u ovaj članak, kako faze razvoja sajta prolaze, zapisujući šta je radilo i kako.

4. Redizajn BikeGremlin sajta

Napisao sam novije članke u kojima objašnjavam ceo proces redizajna i izrade BikeGremlin sajta: