Optimalan raspored elemenata na web stranici (layout) je deo grafičkog dizajna koji priivlači i zadržava posetioce. 7 saveta će vam pomoći da to ostvarite i obezbedite dobru strukturu i optimizaciju web stranice u celini (SEO).

7 saveta za optimalan raspored elemenata na web stranici

1. Primenite rešetku (grid system).
2. Napravite strukturu sadržaja po „Z“ ili „F“ šablonu.
3. Postavite poziv na akciju na najbolju poziciju.
4. Obezbedite dobar dizajn i ponavljajte važne elemente.
5. Ostavljajte dovoljno belog prostora.
6. Pratite dobre primere na internetu.
7. Koristite odgovarajuće teme na svom web sajtu.

VAŽNE ČINJENICE:

  • Dizajn za sticanje posetilaca i dizajn za uticanje na njihovo ponašanje na web sajtu, nisu iste stvari. Krajnji cilj je uvek da posetilac odgovori na naš poziv za akciju (CTA). Ovo se mora imati u vidu prilikom optimizacije sajtova!
  • Optimalan raspored elemenata na web stranici pomaže da posetioce ispravno prihvatimo, vodimo i usmerimo ka našem cilju. To je ujedno i bitan deo optimizacije sajta za Google i druge pretraživače interneta!

Tema: Optimalan raspored elemenata na web stranici – SAVETI

SAVET 1. Primenite rešetku (grid system)

optimalan raspored elemenata na web stranici - GRID sistem

Optimalan raspored elemenata na web stranici – GRID sistem

Rešetka (eng. grid system) je skup vidljivih ili zamišljenih horizontalnih i vertikalnih linija koje služe kao vodič za organizovanje veb sadržaja. Sistem rešetke (mreže) omogućava primenu poznatih tehnika kao što su pravilo centra (focal point) i pravilo trećine (rule of thirds).

Pravilo centra (centralne tačke)

Centralna tačka može biti deo slike, blok teksta i slično. Njen zadatak je da privlači pažnju posetilaca. Element koji je uzet kao centralna tačka, može da se nalazi u samom centru web stranice ili u nekom kvadratu oko centra.

Pravilo trećine
Pravilo trećine se zasniva na podeli web stranice u tri dela vertikalno i / ili horizontalno. Najčešće je to raspored na web stranici u kome glavni sadržaj zauzima dve trećine, a sajdbar (sidebar) treću, obično levu ili desnu.

SAVET 2. Napravite strukturu sadržaja po „F“ ili „Z“ šablonu

ZAŠTO? Mnogi ljudi čitaju web stranice po određenom šablonu (obrascu), zavisno od vrste sadržaja. Najćešće je to F ili Z obrazac (F-patterns and Z-patterns).

Kada je prisutniji “F” obrazac?

“F” obrazac ili šablon se češće koristi kod web stranica koje imaju više teksta. Kada čitalac skenira vrh sajta s leva na desno, a zatim gleda stranicu od vrha do dna, kažemo da pregleda stranicu po “F” obrascu.

F obrazac skeniranja

F obrazac skeniranja

Slika: Optimalan raspored elemenata na web straniciF obrazac

POUKA: “F” obrazac upućuje na važnost podnaslova, pasusa, slika i drugih istaknutih delova sadržaja web stranice.

Kada se više koristi “Z” obrazac?

“Z” obrazac je češći na jednostavnijim web stranicama, naročito onim koje imaju dobro pozicioniran i istaknut poziv na akciju (CTA). Čitaoci koji skeniraju vrh sajta sa leva na desno, zatim dijagonalno na dno, pa opet s leva na desno, čitaju po “Z” obrascu.

Z sablon skeniranje

Z sablon skeniranje

Slika: Optimalan raspored elemenata na web straniciZ obrazac

POUKA: Ako je CTA cilj web stranice, na njoj ne sme biti previše drugih elemenata i sadržaja. CTA je efikasan samo ako ga podržava optimalan raspored elemenata na web stranici.

Specifični tipovi „Z“ obrasca su:

„Zlatni“ trougao – horizontalni pokret očiju s leva na desno, zatim dijagonala s desna na levo dole i završni pokret pravo na gornji levi ugao. Ovaj trougao je područje na vrhu stranice koje će biti najviše pregledano.

Zlatni trougao - obrazac skeniranja

Zlatni trougao – obrazac skeniranja

Slika: Optimalan raspored elemenata na web straniciobrazac zlatni ugao

POUKA: Obrazac „zlatni“ trougao sugeriše da najvažniji podatak stavimo unutar trougla.

Šablon Z-Z (Zig-Zag ili Cik-Cak), je niz manjih Z-pokreta očiju, umesto jednog velikog. Ovaj obrazac je prirodniji način skeniranja sadržaja ili čitanja teksta koji posetilac najčešće koristi kada pregleda velike blokove sadržaja.

Z-Z skeniranje web stranice

Z-Z skeniranje web stranice

Slika: Optimalan raspored elemenata na web straniciZ-Z obrazac

POUKA: Ako želimo da se posetilac duže zadrži i konzumira više sadržaja, dobro je da sadržaj podelimo na manje blokove odvojene podnaslovima, slikama, belim poljem, marginama itd.

Kako uspostaviti kontrolu nad obracima?

ODGOVOR: Organizujte sadržaj po vizuelnoj hijerarhiji.

Gutenberg dijagram deli raspored web sadržaja na 4 kvadrata i ukazuje nam gde da postavimo pojedine elemente uzimajući u obzir stepen obrade pojedinih delova prilikom skeniranja:

gutenberg dijagram

Gutenberg dijagram

Objašnjenje elemenata na slici:
1. Primarni optički prostor koji se nalazi gore levo. 2. Neobrađen prostor koji se nalazi gore desno.
3. Slabo obrađen prostor koji se nalazi dole levo. 4. Prostor završnice koji se nalazi dole desno.

Klasična i vizuelna hijerarhija

Klasična ili prosta hijerarhija sadržaja uvek izaziva primenu nekog od pomenutih obrazaca. Ako sadržaj distribuiramo po vizuelnoj hijerarhiji uz bogat vizuelni sadržaj, onda će oči posetilaca ići putanjom kojom ih vodi vizuelna hijerarhija.

Usmeravanje skeniranja

Optimalan raspored elemenata na web stranici - usmeravanje obrasca skeniranja

Optimalan raspored elemenata na web stranici – usmeravanje skeniranja

SAVET 3. Postavite poziv na akciju na najbolju poziciju

Najbolje mesto za poziv na akciju je donji desni ugao web stranice.

Zašto?

Zato što se proces skeniranja tu zaustavlja. Informacije u neposrednoj blizini CTA, ili ispod njega, čitaocu daju saznanja zbog kojih će poželeti da odgovori na poziv. Svaki dobar CTA, od poziva za registraciju pa do preuzimanja, doprineo je da danas koristimo sadržaje velikog broja web sajtova i aplikacija.

50 besplatnih templejta za CTA (Call to Action).

CTA dizajn

CTA dizajn

Slika: Optimalan raspored elemenata na web stranici – besplatni templejti

SAVET 4. Ponavljajte važne elemente dizajna

Optimalan raspored elemenata na web stranici podrazumeva ponavljanje pojedinih elemenata dizajna u vidu održavanja istog fonta, iste veličine podnaslova, istog stila nabrajanja (bullet point) itd. Ovo se odnosi i na slike, boje, prostorne odnose i svaki drugi deo web dizajna.

Ponavljanje elemenata dizajna na web stranici, stvara utisak doslednosti, stabilnosti i povezanosti komponenti u jednu kompaktnu celinu koja pomaže čitaocu da kroz web stranice prolazi bez konfuzije.

SAVET 5. Ostavljajte dovoljno belog prostora

Beli prostor se sastoji od delova web stranice koji nisu zauzeti sadržajem. Sa stanovišta dobrog korisničkog iskustva čitalaca, beli (prazan) prostor unutar i oko sadržaja može biti ključan za njihovo zadržavanje na sajtu.

Bele prostore možete obezbediti na sledeće načine:

  1. Povećajte margine da bolje odvojite delove sadržaja.
  2. Proširite razmak između paragrafa da tekst učinite prihvatljivijim za čitanje.
  3. Podesite visinu redova i razmak između slova da tekst učinite lakšim za čitanje.
  4. Okružite praznim prostorom težišni deo sadržaja da ga dodatno istaknete.

SAVET 6. Pratite dobre primere kao izvore inspiracija

Web dizajn: Magazine je sajt za dizajnere i web stručnjake koji nudi desetine inspiracija za dobar web dizajn (design). Pinterest je, takođe, neiscrpan izvor dobrih ideja.

pinterest - društvena mreža

Pinterest – društvena mreža

CTA: Čuli ste za Evernote, Dropbox ili Spotify, ukoliko ih već ne koristite. Milioni ljudi ih svakodnevno koristi čemu svakako doprinosi efikasnost njihovih poziva na akciju!

Beli prostor: Idealan primer je Google i njegova početna strana koja sama govori sve.

SAVET 7. Koristite odgovarajuće teme

Divi tema je jedna od tema koje ispunjavaju sve zahteve o kojima je ovde bilo reči.

DIVI-3 tema za web sajt

DIVI-3 tema za web sajt

Save

Slika: Optimalan raspored elemenata na web stranici – Divi tema

ZAKLJUČAK

Optimalan raspored elemenata na web stranici je SEO dizajna koja se mora uvažavati prilikom izrade sajtova.

Nadamo se da će vam ovih 7 saveta u tome pomoći:

1. Primenite rešetku (grid system).
2. Napravite strukturu sadržaja po „Z“ ili „F“ šablonu.
3. Postavite poziv na akciju na najbolju poziciju.
4. Ponavljajte važne elemente svog web dizajna.
5. Ostavljajte dovoljno belog (praznog) prostora.
6. Pratite dobre primere na internetu.
7. Koristite odgovarajuće teme koje vam olakšavaju posao.

Za kraj, evo jedne kviz priče

Tema: Optimalan raspored elemenata na web stranici

Šta radi ljudsko Oko na web stranici?

Logo, slogan i meni za navigaciju vode Oko preko vrha stranice. Pažnju Oka privlači zanimljiva fotografija, istaknuta slova, izdvojen tekst, interesantan naslov i podnaslov.

To je glavni sadržaj! Zauzeo je teritoriju iznad polovine i oko centra web stranice i dsfs svim snagama nastoji da se Oko tu zadrži. Ipak Oko odlazi na donju trećinu stranice. Namerava da je preleti i na dnu završi svoju aktivnost. Glavni sadržaj je skenirao, možda i pročitao, ali to ostaje tajna.

Donja trećina veb stranice je teritorija moćnog CTA. Oko se zaustavlja!
Ispred njega isprečilo se veliko belo polje za URL adresu, a kočoperno dugme pleni svojom bojom i dizajnom. Kratak tekst jasno govori zašto tu treba kliknuti i poziva ga da to uradi. Oko skenira informacije i alarmira centar za donošenje odluke … Znate li ishod?

Tema: Optimalan raspored elemenata na web stranici
Izvor: elegantthemes.com

Povezani članci:

PC021 web dizajn, Novi Sad, Srbija

Hvala Vam što ste ovaj tekst pročitali!
Web dizajn Novi Sad PC021 SrbijaSEO usluge