{"id":9875,"date":"2016-03-23T14:02:44","date_gmt":"2016-03-23T12:02:44","guid":{"rendered":"https:\/\/dev.optiweb.com\/?post_type=post&p=9875"},"modified":"2018-04-20T08:35:44","modified_gmt":"2018-04-20T08:35:44","slug":"10-kljucnih-elementov-pri-izdelavi-kakovostne-spletne-strani","status":"publish","type":"post","link":"https:\/\/dev.optiweb.com\/sl\/blog\/10-kljucnih-elementov-pri-izdelavi-kakovostne-spletne-strani\/","title":{"rendered":"10 klju\u010dnih elementov pri izdelavi kakovostne spletne strani"},"content":{"rendered":"
\n
Raziskava je pokazala, da 75 % obiskovalcev ocenjuje kredibilnost podjetja na podlagi kakovostne spletne strani oziroma trgovine.<\/em><\/span><\/address>\n
\u00a0<\/address>\n
\u00a0<\/address>\n

Pa vi, sodite med teh 75 odstotkov?
\n<\/em>Kakorkoli –<\/em>\u00a0ne dovolite, da bi zaradi zastarelosti strani \/ trgovine izgubljali potencialne stranke.\u00a0<\/em><\/p>\n

Spodaj smo zbrali 10 klju\u010dnih elementov, ki so izjemno pomembni za izdelavo dobre spletne strani. S pomo\u010djo teh elementov bo stran lahko \u0161e dodatno nudila ustrezno uporabni\u0161ko izku\u0161njo in videz.<\/p>\n

1. Tipografija<\/b><\/p>\n

Pri ustvarjanju blagovne znamke va\u0161ega podjetja lahko izbira tipografije ka\u017ee posredne namige o tem, kdo ste. Ali ste zabavno ali resno podjetje? Funkcionalno ali informativno? Ne glede na to, katero pisavo izberete, se prepri\u010dajte, da bo njen prikaz deloval na vseh brskalnikih in napravah.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/main><\/div><\/div>

\n
<\/div>

Na strani Google Fonts je mo\u017een izbor pisave, ki vsebuje tudi \u0161umnike z izbiro “Latin Extended”.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

2. Besedilo<\/b><\/p>\n

“70 % dejavnosti na spletni strani je osredoto\u010denih na iskanje pravih informacij. \u010cetudi uporabnik najde prave informacije, jih bo 80 % le preletelo celotno stran, prebralo izpostavljeno besedilo, nato pa bodo od\u0161li naprej. Le majhen odstotek uporabnikov bo prebralo celotno stran.\u00a0“<\/em><\/address>\n

Zato je pomembno, da stran prilagodimo za teh 80 % uporabnikom.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Primer besedila na levi strani, ki povzema bistvo in je la\u017eje berljiv ter primer besedila na desni strani, kjer je teksta preve\u010d, stran ni zanimiva in privla\u010dna za branje, kar ljudi odbije.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

Dr\u017eite se kratkih in jasnih besedil. Ne opisujte storitev preve\u010d na \u0161iroko. Vem, da je to la\u017eje re\u010di kot storiti. Vendar veliko obiskovalcev stran le preleti, preberejo kraj\u0161e stavke, pogledajo slike in izpostavljeno besedilo, drugega pa ne opazijo.<\/p>\n

3. Barve<\/b><\/p>\n

Igrajo zelo pomembno vlogo pri privabljanju uporabnikov na spletno stran.\u00a0Razvoj u\u010dinkovite barvne sheme je eden izmed najbolj zanimivih izzivov na spletu. Popolnoma lahko spremeni videz in ob\u010dutek spletne strani, narekuje pa tudi razpolo\u017eenje ter ton strani.<\/p>\n

“Spletni vizual, ki uporablja tri do pet barv, je najbolj prijeten za oko. “<\/em><\/address>\n
\u00a0<\/address>\n

Pomembno je, da ustvarimo ustrezen barvni kontrast med informacijami. Naj gre za naslove, besedila, gumbe, povezave znotraj strani ali tiste, ki gredo izven strani, vedno moramo imeti v mislih, da bodo barve med seboj zdru\u017eljive in nemote\u010de.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n

4. Gumbi<\/b><\/p>\n

Uporabnik pride na spletno stran, nato pa ne ve kako naprej, kaj klikniti, da bi na\u0161el iskane vsebine. \u0160e posebej zapleteno je to pri spletni trgovini, kjer mora imeti uporabnik nenehen nadzor nad tem, kaj se bo zgodilo, ko bo kliknil na dolo\u010den gumb, predvsem ko svoj nakup zaklju\u010duje v nakupovalni ko\u0161arici.<\/p>\n

Zato morajo biti vsi gumbi na vidnem mestu in barvno poudarjeni, da se lo\u010dijo od navadnega besedila. Napisi na gumbih naj bodo ustrezno poimenovani, saj gumbi s pozivi k dejanju vodijo potencialno stranko do dolo\u010denih produktov, storitev ali k nakupu.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Primer call-to-action gumbov. Katerega opazite najprej? Predvidevam, da rde\u010dega :)<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

5. Velike fotografije<\/b><\/p>\n

Skorajda ni ve\u010d spletnih strani, ki ne bi vsebovale fotografij. V mislih imam fotografije, ki so prikazane \u010dez celotno \u0161irino brskalnika in se prilagajajo za razli\u010dne naprave.<\/p>\n

S postavitvijo slike v ozadje zagotovimo njeno vizualno izpostavljenost, ki lahko, poleg kratkega besedila in gumba za poziv k dejanju, prika\u017ee mo\u010dno zgodbo, ki bo obiskovalca pritegnila k nadaljnjemu raziskovanju spletne strani in vsebine, ki se skriva na njej.<\/p>\n

Odzivna oblika slik zagotovi dobro uporabni\u0161ko izku\u0161njo, saj slike na ta na\u010din dostopne ne samo na ve\u010djih, ampak tudi na manj\u0161ih zaslonih.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>
\n

6. Video vsebina<\/b><\/p>\n

O tem,\u00a0zakaj dodati video v ozadje spletne strani<\/a> smo \u017ee pisali, saj je video vedno bolj uporaben in klju\u010den element spletnih strani.<\/p>\n

Video posnetki, ki se samodejno predvajajo v ozadju, lahko povedo veliko in tako znatno zmanj\u0161ajo koli\u010dino druge vsebine, ki je potrebna, da pojasni namen podjetja.<\/p>\n

Video omogo\u010da, da obiskovalec izve klju\u010dne informacije o va\u0161em podjetju, ne da bi moral prebrati eno samo vrstico besedila.<\/p>\n

Poleg tega na\u0161i mo\u017egani video dojamejo 60.000-krat hitreje kot navadno besedilom.\u00a0<\/em><\/address>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>
\n
<\/div>

this is a caption<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

7. Video prikaz izdelkov<\/b><\/p>\n

Poleg video posnetkov v ozadju prve strani so podjetja za\u010dela uporabljati tudi kratke video posnetke izdelkov. Ti kratki video posnetki so super, da svojo re\u0161itev o\u017eivite in jo prika\u017eete na interaktiven na\u010din.<\/p>\n

92 % B2B kupcev gleda online video, od tega jih 43 % gleda online video, medtem ko i\u0161\u010dejo izdelke in storitve za njihovo poslovanje. Zato je za B2B podjetja klju\u010dno, da pripravijo kakovostne video posnetke, ki pojasnjujejo njihove izdelke, saj je to lahko pomemben dejavnik v procesu odlo\u010danja kupca.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Primer kratkih gif videov najdete na strani uxpin, kjer s kratkimi animacijami prika\u017eejo delovanje aplikacije.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

8. Ikone<\/b><\/p>\n

Ikone niso samo modni dodatek, ampak lahko razlo\u017eijo vsebino. \u017de samo s pogledom na ikone lahko dojamemo, o \u010dem govori besedilo. Ikone lahko govorijo tudi same zase in v nekaterih primerih ob sebi ne potrebujejo dodatnega besedila. Prav tako razbijejo monotonost besedila, \u0161e posebej dobrodo\u0161le so ob naslovih opisov. Tam jasno prika\u017eejo, o \u010dem govori vsebina oz. v primeru, da naslov ni dovolj jasen, lahko z ikono naka\u017eemo dodatne informacije.<\/p>\n

Poseben u\u010dinek in dodano vrednost lahko ikonam dodamo, \u010de jih animiramo. To je primerno pri ikonah, s katerimi \u017eelimo prikazati delovanje dolo\u010denih na\u0161ih storitev.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Lep primer je stran RLS, kjer se ob hover efektu ikona animira in prika\u017ee delovanje storitve.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

9. \u201dHamburger” meni ali odprti meni?<\/b><\/p>\n

Prednost hamburgerja je predvsem v preglednej\u0161em prikazu, \u010de imamo ve\u010d menijskih postavk, ki jih \u017eelimo na vrhu strani. Priro\u010dni so tudi v primeru, \u010de \u017eelimo na strani poudariti druge elemente, saj menijske postavke skrijemo in jih zapakiramo v sendvi\u010d. Pardon, v hamburger. :)<\/p>\n

Lu\u0161ten na\u010din vklju\u010devanja hamburgerja je, ko se premikamo po strani in nam menijska vrstica sledi. V tem primeru je hamburger u\u010dinkovita zadeva, saj zmanj\u0161a prostor vrstice, ki se pomika z nami, hkrati pa je vedno na voljo, ko postanemo la\u010dni dodatnih informacij na ostalih podstraneh. ;)<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Primer slede\u010dega hamburger menija po strani.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

Aja in \u0161e odgovor na vpra\u0161anje, \u010de ste si ga \u017ee zastavili: “Zakaj se meni imenuje hamburger?”<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

\u010ce uporabimo malce domi\u0161ljije: tri vrstice, ki so zlo\u017eene ena na drugo do vrha, so videti, kot meso za hamburgerje. :)<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

10. Responsive oblika oz. odzivna oblika<\/b><\/p>\n

“Ve\u010d kot 20 % Google iskanj je opravljenih preko mobilnih naprav.\u00a0Leta 2012 je bilo na mobilnih napravah izvedenih ve\u010d kot polovica vseh lokalnih iskanj. Leta 2014 pa je uporaba interneta prek mobilcev prehitela uporabo prek ra\u010dunalnikov.”<\/em><\/address>\n
\u00a0<\/address>\n

\u0160e nimate responsive oblike? To pomeni, da imate najverjetneje \u017ee kar staro spletno stran in morate za\u010deti razmi\u0161ljati o prenovi. :)<\/p>\n

\u201cKonec februarja 2015 se je na Googlovem Webmasters blogu pojavila novica o vplivu odzivne oblike na pozicije spletnih strani v iskalnikih. Od 21. aprila 2015 dalje boste te spremembe algoritmov ob\u010dutili tudi sami.\u201d<\/p>\n

Kaj je ta sprememba prinesla in zakaj je dobro imeti odzivno obliko, si lahko preberete tukaj<\/a>.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

this is a caption<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n

\u0160e nekaj dodatnega branja pa najdete v tem \u010dlanku \u201cVpliv odzivne oblike spletne strani na pozicije v iskalnikih<\/a>.\u201d<\/p>\n

Na kratko<\/h3>\n

To je nekaj izbranih elementov, ki so zelo pomembni dejavniki, zato je nujno, da jih\u00a0na ustrezen na\u010din umestimo na spletno stran. Kako to storiti in na katerih elementih je potreben dodan poudarek, pa je odvisno od \u017eelja stranke in storitve, ki jo bo spletna stran predstavlja.<\/p>\n

In kaj od zgoraj navedenega pripravi stranka?<\/h3>\n

Da je stran funkcionalna in vizualno dovr\u0161ena ni odvisno samo od oblikovalca, ki upo\u0161teva zgoraj navedene elemente. Pomembno je, da stranka \u017ee v prvi fazi pripravi:
\n<\/i><\/p>\n

    \n
  • celostno grafi\u010dno podobo, na podlagi katere se gradi videz strani,\u00a0<\/i><\/li>\n
  • kakovostna besedila,\u00a0<\/i><\/li>\n
  • kakovostne slike, ki so v dovolj veliki resoluciji,<\/i><\/li>\n
  • svoje dodatne \u017eelje\u00a0:)<\/i><\/li>\n<\/ul>\n


    \n<\/i>Zaklju\u010dek<\/h3>\n

    \u010ce \u017eelimo dose\u010di vizualno lepo in uporabno stran, je zelo pomembno, da poleg spletnega oblikovalca v proces izdelave spletne strani vklju\u010dimo tudi fotografa, tekstopisca, video snemalce, ki bodo poskrbeli za kakovostno in spletu prilagojeno vsebino.
    \n<\/i>\u010ce se odlo\u010date za izdelavo ali prenovo spletne strani oziroma trgovine, za\u010dnite z zbiranjem zgoraj zapisanih vsebin. Pri tem vam lahko pomaga tudi ekipa Optiweb, saj poskrbimo za to, da va\u0161 projekt pripeljemo od ideje do kon\u010dne izvedbe v obliko kakovostnega in u\u010dinkovitega spletnega mesta. :)<\/p>\n

    Viri:<\/h4>\n
      \n
    • \n

      https:\/\/medium.com\/@zbigniewgecis\/8-tips-for-creating-website-that-sells-941603b47a06#.e9orabvsw<\/h4>\n<\/li>\n
    • \n

      http:\/\/blog.hubspot.com\/blog\/tabid\/6307\/bid\/20566\/The-Button-Color-A-B-Test-Red-Beats-Green.aspx<\/h4>\n<\/li>\n
    • \n

      http:\/\/www.inc.com\/janine-popick\/marketing-to-businesses-make-video-your-marketing-hero.html<\/h4>\n<\/li>\n<\/ul>\n<\/div><\/section>\n<\/p>\n","protected":false},"excerpt":{"rendered":"

      Kateri elementi so tisti, ki pomembno vplivajo na dobro uporabni\u0161ko izku\u0161njo in lep\u0161i videz spletne strani? Preveri 10 klju\u010dnih elementov, ki mo\u010dno vplivajo na kakovost spletne strani.<\/p>\n","protected":false},"author":1,"featured_media":15578,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1030],"tags":[],"_links":{"self":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/9875"}],"collection":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/comments?post=9875"}],"version-history":[{"count":4,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/9875\/revisions"}],"predecessor-version":[{"id":31601,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/9875\/revisions\/31601"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media\/15578"}],"wp:attachment":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media?parent=9875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/categories?post=9875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/tags?post=9875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}