Alan Novak

Alan Novak

Kako izraditi web stranicu u pet brzih koraka?

Kad govorimo o izradi web stranica, prve asocijacije koje dolaze na pamet prosječnom korisniku interneta uglavnom su “skupo”, “komplicirano”, “bacanje novaca”. Mora li zbilja biti skupo, komplicirano i uzaludno trošenje resursa? Naravno da ne, a upravo zato smo i pripremili vodič kroz cijeli proces kako bismo vas upoznali sa svim ključnim koracima i njihovim ulogama.

Da vam olakšamo praćenje ovog vodiča, podijelili smo ih na 5 koraka ili etapa, a to su:

1. Domena i hosting

2. Razvojno okruženje

3. Priprema sadržaja (mockupi) te smještaj elemenata na stranici

4. Praćenje statistika web stranice

5. Testiranje

U redovima koji slijede (a bit će ih popriličan broj, zato se udobno smjestite) upoznat ćemo vas sa svakim korakom te opcijama koje se pružaju, ali i zamkama koje skrivaju. Da ne duljimo, krenimo na izradu.

Domena i hosting

Prvi korak su zakup domene i plaćanje hostinga, odnosno servera preko kojih će funkcionirati vaša buduća web stranica. Naša preporuka je uzeti oboje na jednom mjestu, što zbog lakšeg održavanja, a što zbog vođenja financija. Kad smo već kod preporuka, preporučujemo iduće:

Siteground

Prednosti

– možete zakupiti i domenu, proces je jednostavan i uz par koraka imate svoju domenu i hosting, po cijeni od 5.99 €/mjesečno (u prvoj godini)

– omogućava poseban hosting za WordPress okruženje, ali nudi mogućnost i ostalih vrsta hosting usluga (Woocommerce, Cloud usluge)

– vrhunska baza blogova za početnike, video materijali na YouTube kanalu i konstanti webinari s ciljem upoznavanja korisnika sa WordPress okruženjem

– sadrži Weebly sitebuilder (kreator elemenata) i besplatnu WordPress instalaciju koju možete koristiti odmah nakon kupovine

SiteGround – upravljanje WordPress instalacijama

Mane

– samo 99.7% sretnih korisnika umjesto 100%? Šalu na stranu, rijetke su mane i često zanemarive za prosječnog korisnika

KinstaWP

Prednosti

– premium hosting iskustvo (vrhunska podrška)

– visoke brzine učitavanja stranice i okruženja za upravljanjem vašim domenama i hostingom

– Omogućuje besplatnu migraciju vašeg stare web stranice zajedno s hostingom, bez da se morate “natezati” s podrškom po nekoliko dana

– odličan staging environment gdje bez pritiska možete testirati nove sadržaje svoje web stranice, bez da narušite trenutno aktivnu stranicu (jednim klikom do promjena)

KinstaWP – radno okruženje

Mane

– Isključivo za WordPress

– više cijene (30€ mjesečno)- nema kupovine domene (u tom slučaju preporučamo Google domene ili Plus.hr)

Oba navedena servisa zadovoljavaju većinu potreba korisnika i samim time ih ističemo ovdje, ali kad bismo morali prevagnuti na jednu stranu, bilo bi to u korist SiteGround zbog jednostavnog sučelja i vrhunske podrške u vidu blogova i video materijala. Međutim, ako se odlučite i za drugu opciju, nećete puno pogriješiti.

Razvojno okruženje

Kad govorimo o razvojnom okruženju, zapravo govorimo o platformi kroz koju ćete graditi svoju web stranicu. Jedan od takvih sustava, ujedno i najpoznatiji i najrašireniji danas je WordPress, a vjerojatno ste se već susreli s njim na jedan ili drugi način. 

WordPress

Ako ste totalni početnik u izradi web stranica i niste spremni za puno komplikacija, preporučamo vam da krenete u izradu uz WordPress zbog velike zajednice, mnogobrojnih dostupnih rješenja ovisno o vašim poslovnim ciljevima. Također, na raspolaganju su vam i pregršt dostupnih tema koje pomažu u odabiru dizajna, ali i velik broj dostupne literature koja će vam pomoći u kreiranju stranice. Iako mi u Adssentialu radimo isključivo vlastiti dizajn koristeći Elementor, ako ne želite sami graditi u WordPressu, za to se možete poslužiti njihovim vlastitim izrađivačem elemenata – Gutenbergom.

WordPress i Gutenberg

Squarespace

Squarespace je još jedna solidna opcija za male i srednje tvrtke te pojedince. Prema našem mišljenju, njegovo sučelje je “čišće” i manje zastrašujuće kad započnete. On vas također vode kroz cijeli proces, pokazujući vam gdje su stvari i kako funkcioniraju. Sve u svemu, njihov je način jednostavniji i izbjegava neke od žargona prisutnih u Webflowu. Ako ste potpuni početnik, vjerojatno će vam Squarespace biti draži od Webflowa.

Squarespace razvojno okruženje

Webflow

Webflow je još jedan odličan sustav koji koriste mnogi, a svojim se karakteristikama više naginje agencijama i profesionalcima. Webflow vas vodi korak po korak kroz proces uključivanja koji uključuje tekst i GIF-ove da bi pokazao kako graditelj web stranica radi. Objašnjavaju da to djeluje na “modelu okvira” gdje su “podređeni” okviri unutar “roditeljskih” okvira. Ako vas je već to zbunilo, ima još nekoliko točaka koje bi vam mogle prouzročiti iste probleme – na primjer, govore o “radu s dinamičkim podacima u CMS-u” –  to bi moglo biti pomalo zastrašujuće za nekoga tko prvi put koristi web graditelj. Međutim, kao što smo rekli na početku odlomka, Webflow ne cilja nužno novake u web dizajnu.

Webflow razvojno okruženje

Priprema sadržaja (mockupi) te smještaj elemenata na stranici

Nakon što ste riješili pitanja hostinga, domene i razvojnog okruženja, na red dolazi onaj često zabavniji dio – priprema sadržaja, elemenata te njihov razmještaj na stranici. Kod ovog koraka također postoji nekoliko zamki koje bi vam mogle zakomplicirati život, a jedna od njih se odnosi na slike i tekstove – važno je da oni budu pripremljeni u skladu s odabranom temom (ako koristite WordPress) ili je potrebno prije napraviti skicu dizajna (ako se koriste Squarespace ili Webflow). To možete jednostavno učiniti koristeći Lucidchart ili Moqups (Adssential preporuka) koji mogu biti od koristi za početni dizajn stranice, ali i ostale stvari poput mentalnih mapa.

Primjer izrade mockupa u sustavu Moqups

Ovaj je korak prilično važan, zato mu nemojte pristupiti olako, jer on određuje što će i kako vidjeti svi koji posjete vašu stranicu, a raspored informacija i sekcija definira također ponašanje na stranici, odnosno navode korisnika na radnju koju ste željeli (najčešće je to kupnja ili popunjavanje kontakt forme s upitom za usluge ili proizvode).

Uostalom, ako ne radite sami svoju stranicu, ove skice i dizajni će ubrzati i olakšati posao osobama koje ste zadužili za izradu web stranice, tako da razmislite o svemu i više puta prije nego pošaljete nacrte i materijale (foto, video, tekst i sve ostale koji će se prikazivati na stranici).

Praćenje statistika web stranice

Kad je stranica gotovo spremna, preostaju još neke manje, ali ništa manje važne stvari koje je potrebno dodati na samu stranicu da bi ona mogla iskoristiti svoj puni potencijal. Svakako je prva stvar koju bismo ovdje preporučili povezivanje Google Analytics sa stranicom, kako biste u svakom trenutku u realnom vremenu mogli vidjeti koliko korisnika se nalazi na vašoj stranici u tom trenutku, koliko se zadržavaju, od kuda su došli, što ih najviše zanima, ali i more drugih važnih informacija i parametara na temelju kojih ćete kasnije moći raditi funkcionalne izmjene i/ili marketinške kampanje.

Facebook Pixel još je jedan od elemenata koje bismo ovdje spomenuli, pogotovo ako planirate koristiti podatke za oglašavanje na Facebooku i Instagramu. 

Iako proces dodavanja elemenata za praćenje analitike nije kompliciran koliko možda to zvuči nekome tko se prvi put susreće s ovom materijom, mi u Adssentialu olakšavamo posao svojim klijentima te već prilikom izrade web stranicu pripremamo za oglašavanje postavljanjem Google Analyticsa i Facebook pixela te izrađujemo model praćenja interakcija korisnika s vašom web stranicom, a isto savjetujemo i vama, ako želite svoje poslovanje temeljiti na stvarnim podacima i rezultatima, a ne na klikovima i impresijama.

Testiranje

Polako se bližimo kraju vodiča i izrade web stranice, no prije nego ste spremni za pustiti ju u javnost na milost i nemilost publike, testiranje je posljednji, no korak od iznimne važnosti. Sigurni smo da ne želite negativna iskustva korisnika ili da korisnici mobilnih uređaja imaju problema pri pristupanju vašoj stranici jer niste prilagodili stranicu i takvim korisnicima. Ovo je samo jedan od primjera gdje testiranje može unaprijed pokazati sve moguće probleme koje stignete ispraviti prije nego stranica ugleda svjetlo dana. 

Nakon što ste sve testirali i uvjerili se da sve radi kako je zamišljeno, preostaje vam još samo potapšati sebe po ramenu, duboko udahnuti i pokrenuti stranicu, odnosno učiniti ju vidljivom za sve. Naravno, ne zaboravite se time pohvaliti i na svojim digitalnim kanalima.

Na samom kraju, ako ste uspješno došli do njega i pratili sve korake, možemo vam čestitati na uspješno odrađenom zadatku i vašoj novoj web stranici, a ako vas je ovaj vodič nagnao da ipak cijeli proces prepustite specijaliziranim osobama ili agencijama, sjetite se samo na čijoj ste web stranici pročitali ovaj vodič. 😉

Podijelite blog post na društvenim mrežama

Share on facebook
Share on twitter
Share on linkedin

Pročitajte više

Scroll to Top