{"id":13564,"date":"2016-11-30T15:41:09","date_gmt":"2016-11-30T13:41:09","guid":{"rendered":"https:\/\/dev.optiweb.com\/?post_type=post&#038;p=13564"},"modified":"2018-09-03T12:34:33","modified_gmt":"2018-09-03T12:34:33","slug":"slogovni-prirocnik-za-splet","status":"publish","type":"post","link":"https:\/\/dev.optiweb.com\/sl\/blog\/slogovni-prirocnik-za-splet\/","title":{"rendered":"Kako oblikovati slogovni priro\u010dnik za spletne strani (ang. &quot;Style guide&quot;)"},"content":{"rendered":"<div id='av_section_1'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-0  el_before_av_section  avia-builder-el-first   container_wrap fullsize' style=' '  ><div class='container' ><main  role=\"main\" itemprop=\"mainContentOfPage\"  class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><p dir=\"ltr\">Pri <a href=\"https:\/\/dev.optiweb.com\/sl\/storitve\/izdelava-spletnih-strani\/\">izdelovanju spletne strani<\/a> ali trgovine je vsekakor nujno slediti celostni grafi\u010dni podobi podjetja, ki vsebuje glavne elemente, stile, pravilno rabo logotipa in ostalih grafi\u010dnih elementov.\u00a0Za la\u017eje delo oblikovalcev in programerjev je dobro na enem mestu zbrati pravila, ki dolo\u010dajo\u00a0vse klju\u010dne elemente spletne strani\u00a0na enem mestu &#8211; v oblikovnem priro\u010dniku za vizualizacijo spletne strani (ang. <em>Pattern Library oz. Style guide<\/em>).<\/p>\n<h2 dir=\"ltr\" style=\"text-align: justify;\">Elementi<\/h2>\n<p dir=\"ltr\">Znotraj priro\u010dnika se dolo\u010di:<\/p>\n<ul>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Barve:<\/strong>\u00a0glavne primarne in sekundarne barve, postavitev tipografije na barvni podlagi, glavna barva za poudarke, barva povezav, barva gumbov \u2026<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Tipografija:<\/strong> velikost glavnih naslovov (H1\u2013H5), velikost vsebinskega teksta, citatov, razmiki med naslovi in vsebino, barva tipografije, barvne podlage, kjer se lahko besedilo pojavlja.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Grid:<\/strong> dolo\u010ditev razmikov znotraj elementov, stilov.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Grafike:<\/strong> izris klju\u010dnih ikon, ki bodo predstavljale dolo\u010deno vsebino. Barve ikon, grafik.<\/p>\n<\/li>\n<li dir=\"ltr\">\n<p dir=\"ltr\"><strong>Ostalo:<\/strong> dolo\u010ditev klju\u010dnega stila strani, barvne variacije slik, stil gumbov, stil kontaktne forme, Call to action sekcija, mnenja strank \u2026<\/p>\n<\/li>\n<\/ul>\n<\/div><\/section>\n<\/div><\/div><\/main><!-- close content main element --><\/div><\/div><div id='av_section_2'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-2  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-3  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/1_9mAGHE2dvizfZXouXbDuNA.gif' alt='' title='1_9mAGHE2dvizfZXouXbDuNA' height=\"600\" width=\"800\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n<\/p>\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_3'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-4  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><h2 dir=\"ltr\" style=\"text-align: justify;\">Prednosti takega priro\u010dnika<\/h2>\n<p dir=\"ltr\" style=\"text-align: justify;\">Oblikovalec veliko la\u017eje oblikuje spletno stran, \u010de le sledi pravilom oz. smernicam, ki so zbrane v priro\u010dniku. Ta omogo\u010da ve\u010djo preglednost in organiziranost elementov, ki jih oblikovalec uporablja, pripomore pa tudi k preglednosti CSS kode. Ko je stran izdelana, so pogosto potrebni popravki ali pa se izdelajo nove podstrani, ki jih lahko obstoje\u010di oblikovalec preda drugemu, ki ureja nadaljnje elemente. Priro\u010dnik za oblikovanje spletne strani zagotavlja ve\u010djo preglednost nad videzom in ob\u010dutkom\u00a0(ang. &#8220;look &amp; feel&#8221;) elementov na spletni strani in je zato nepogre\u0161ljiv pri tovrstnih sodelovanjih. Priporo\u010dljiv oziroma skorajda nujen je v ve\u010djih podjetjih, kjer med seboj sodeluje ve\u010d oblikovalcev, saj priro\u010dnik pomaga ohranjati konsistenco strani.<\/p>\n<h2 dir=\"ltr\" style=\"text-align: justify;\">Predstavitev stilov<\/h2>\n<p dir=\"ltr\" style=\"text-align: justify;\">Preden dolo\u010dimo elemente spletne strani, moramo analizirati \u00a0poslovanje podjetja, obstoje\u010de in potencialne stranke, vizijo, poslanstvo, in storitve, ki jih nudi. Veliko \u010dasa je treba nameniti predvsem analizi uporabnikov oziroma (potencialnih) kupce, ki bodo dostopali na spletno stran, kajti le s tem, da se uporabni\u0161ka izku\u0161nja prilagodi njim, bo stran slu\u017eila svojemu namenu. Pri sami zasnovi je super, \u010de nam uspe izbrati srednjo pot, ki upo\u0161teva tako \u017eelje naro\u010dnika kot potencialnih uporabnikov. Za dober kon\u010dni rezultat oziroma dose\u017eeno konverzijo (nakup, prijava na e-novice, povpra\u0161evanje, registracija &#8230;) pa je vsekakor zelo pomembno, da predvidimo obna\u0161anje, navade in \u017eelje potencialnih kupcev, s pomo\u010djo analitike pa analiziramo nakupno pot obstoje\u010dih.<\/p>\n<h3 dir=\"ltr\" style=\"text-align: justify;\">1. Barve<\/h3>\n<p dir=\"ltr\" style=\"text-align: justify;\">V prvi vrsti moramo dolo\u010diti glavne primarne in sekundarne barve. Primarne barve so glavne barve, ki \u00a0so prepoznavni del podjetja, sekundarne barve pa dodatne barve, ki slu\u017eijo za poudarke.<\/p>\n<p dir=\"ltr\" style=\"text-align: justify;\">Naslove je priporo\u010dljivo oblikovati v temnej\u0161i barvi, barvo besedila pa v svetlej\u0161i ali isti barvni vrednosti. Dobro je, da barva pisave ni povsem \u010drna, ampak raje izbirajte med svetlej\u0161imi odtenki \u010drne, saj ti delujejo bolj ne\u017eno, in so bolj berljivi.\u00a0Najprej je potrebno dolo\u010diti primarne barve, iz katerih dolo\u010dimo \u0161e sekundarne, od temnih do svetlih tonov, poleg teh pa \u0161e dodatne barve dolo\u010denega podro\u010dja. Tako oblikujemo barvno paleto, kjer se nasprotujo\u010de oz. kontrastne barve uporabi za poudarke.<\/p>\n<p dir=\"ltr\" style=\"text-align: justify;\">Barve smo dolo\u010dili, zdaj pa jih moramo skupaj z besedilom primerjati na razli\u010dnih podlagah in tako dolo\u010diti, na kak\u0161ni barvni podlagi se bo pojavljalo besedilo. Paziti moramo, da bo barva besedila v kombinaciji s podlago dovolj berljiva. Pri izbiranju ustrezne barve gumbov, ozadja itd. je dobro, da razmislimo tudi o tem, <a href=\"https:\/\/dev.optiweb.com\/sl\/uporabite-prave-barve-zmagajte\/\" target=\"_blank\" rel=\"noopener\">kako barve vplivajo na \u010dloveka<\/a>\u00a0oz. psihologiji barv, kar je za uporabnika\u00a0posebej pomembno na spletni strani, saj smo ljudje vizualna bitja.\u00a0Tako se bomo la\u017eje pribli\u017eali ciljni publiki in zagotovili bolj\u0161o uporabni\u0161ko izku\u0161njo strani ter privabili ve\u010dje \u0161tevilo potencialnih kupcev.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_4'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-6  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-7  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/1_YA_O646mRbL3ZXzmbTYI4Q.jpeg' alt='' title='1_YA_O646mRbL3ZXzmbTYI4Q' height=\"600\" width=\"800\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_5'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-8  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><h3 dir=\"ltr\" style=\"text-align: justify;\">2. Tipografija<\/h3>\n<p style=\"text-align: justify;\">Ste vedeli, da tipografija predstavlja kar 95 % spletne strani?\u00a0Poskrbite torej, da bo ustrezna tipografija opisala va\u0161e podjetje in vam prina\u0161ala prepoznavnost.<\/p>\n<p style=\"text-align: justify;\">Dolo\u010diti moramo velikosti naslovov, jih med seboj primerjati tako in urediti po hirarhiji. Naslovi so razvr\u0161\u010deni od H1 do H5; koliko podnaslovov bomo uporabljali, je odvisno od obse\u017enosti strani in besedila, ki ga vsebuje.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_6'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-10  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-11  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/Screen-Shot-2016-11-07-at-15.29.11-1024x482-1.png' alt='' title='Screen-Shot-2016-11-07-at-15.29.11-1024x482' height=\"482\" width=\"1024\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_7'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-12  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><p>Velikost vsebinskega teksta najla\u017eje dolo\u010dimo tako, da razporedimo naslov in besedilo v razli\u010dnih velikostih in tako prepoznamo, katera velikost je najbolj berljiva.<br \/>\nPoleg velikosti vsebinskega besedila moramo dolo\u010diti tudi razmike med naslovi in vsebinskim tekstom, razmike med \u010drkami in razmike vrsticami.<br \/>\nVzporedno s tem dolo\u010dimo tudi barvo besedila, tako, da je, glede na velikost fonta,\u00a0berljivo. Dolo\u010diti moramo \u0161e stil citatov, poudarke, povezave, ki vodijo izven strani, povezave znotraj strani &#8230;<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_8'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-14  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-15  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/tekst-1024x356-1.jpg' alt='' title='tekst-1024x356' height=\"356\" width=\"1024\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_9'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-16  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><h3 dir=\"ltr\" style=\"text-align: justify;\">3.<span style=\"background-color: #ffffff;\"> Grid (mre\u017ea)<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: justify;\">Na spletni strani je med naslovi in vsebino treba dolo\u010diti tudi razmike, ko bodo konsistentni glede na vsebino.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_10'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-18  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-19  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/MaterialDesign-Grid.jpg' alt='' title='MaterialDesign-Grid' height=\"937\" width=\"1290\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_11'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-20  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><p dir=\"ltr\" style=\"text-align: justify;\">S tem, ko dolo\u010dimo razmike, la\u017eje ohranjamo konsistenco podstrani, hkrati pa s tem prihranimo delo programerju.<\/p>\n<p dir=\"ltr\" style=\"text-align: justify;\">Grid (mre\u017ea) je element, na katerega moramo biti posebej pozorni, saj je pomemben tako za razmike in postavitev elementov kot tudi ta urejanje <span style=\"background-color: #ffffff;\">odzivne oblike za razli\u010dne velikost naprav<\/span>. Ko dolo\u010dimo \u0161irino strani, moramo dolo\u010diti tudi mre\u017eo strani, ki je razdeljena na pribli\u017eno 12 stolpcev; odvisno od vsebine, ki bo razporejena na strani.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_12'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-22  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-23  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/responsive-1.jpg' alt='' title='responsive' height=\"624\" width=\"1000\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_13'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-24  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><h3 dir=\"ltr\" style=\"text-align: justify;\">4. Grafike<\/h3>\n<p dir=\"ltr\" style=\"text-align: justify;\">Pri dolo\u010danju ikon se osredoto\u010dimo na vrste in polo\u017eaj ikon ali grafik, barvnost oz. enobarvnost, ali bodo ikone polne ali ne, ali bodo obrobljene ali ne itd. Poleg na\u0161tetega pa je smiselno predvideti tudi prikaz u\u010dinka, ki bo prikazan, ko bomo \u0161li z mi\u0161ko \u010dez ikono.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_14'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-26  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-27  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/Ikone-1024x835-1.png' alt='' title='Ikone-1024x835' height=\"835\" width=\"1024\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_15'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-28  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><h3 dir=\"ltr\" style=\"text-align: justify;\">5. Slike<\/h3>\n<p dir=\"ltr\" style=\"text-align: justify;\">Pri slikah moramo paziti na slog in uskladitev barvne korekcije slik. Slike lahko vsebujejo tudi barvni filter, gradient, enobarvnost, lahko se jim v ozadje implementira besedilo &#8230; Dolo\u010diti moramo tudi vi\u0161ino in \u0161irino slik, ki morata biti v razmerju z ostalimi grafi\u010dnimi elementi.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_16'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-30  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-31  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/adidas-940x468-1.jpg' alt='' title='adidas-940x468' height=\"468\" width=\"940\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_17'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-32  el_after_av_section  el_before_av_section   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><h3 dir=\"ltr\" style=\"text-align: justify;\">6. Ostalo<\/h3>\n<p dir=\"ltr\" style=\"text-align: justify;\">Izbrati moramo tudi, kako bo videti osnovna kontaktna forma, slog gumbov<span style=\"background-color: #ffffff;\"> in izstopajo\u010di gumbi za povpra\u0161evanje<\/span>, ki jih kasneje implementiramo v vizualni del. Pri tem je smiselno dolo\u010diti okvirne u\u010dinke gumbov, druge u\u010dinke na strani, animacije ipd., da med izdelovanjem spletnega priro\u010dnika tvorimo smiselno celoto in zgodbo strani.<\/p>\n<\/div><\/section>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_18'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-34  el_after_av_section  el_before_av_section  galimgsec  container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<div  class='avia-image-container  av-styling-    avia-builder-el-35  avia-builder-el-no-sibling  avia-align-center '  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><img class='avia_image' src='https:\/\/dev.optiweb.com\/wp-content\/uploads\/2016\/11\/1_pHdu9yeW0y0XZKfPcyJd1Q.png' alt='' title='1_pHdu9yeW0y0XZKfPcyJd1Q' height=\"600\" width=\"800\"  itemprop=\"thumbnailUrl\"  \/><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><!-- close content main div --><\/div><\/div><div id='av_section_19'  class='avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll  avia-builder-el-36  el_after_av_section  avia-builder-el-last   container_wrap fullsize' style=' '  ><div class='container' ><div class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-13564'><div class='entry-content-wrapper clearfix'>\n<section class=\"av_textblock_section \"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock  '   itemprop=\"text\" ><p style=\"text-align: justify;\">T. i. oblikovni priro\u010dniki za vizualizacijo spletne strani se razlikujejo od podjetja do podjetja. Inspiracijo takih priro\u010dnikov pa si lahko ogledate na <span style=\"background-color: #ffffff;\"><a href=\"https:\/\/medium.muz.li\/style-guide-inspirations-dfb77c4bb13b#.x9zg36d9p\" target=\"_blank\" rel=\"noopener\">povezavi bloga Medium<\/a>.<\/span><\/p>\n<h2>Edina stalnica so spremembe<\/h2>\n<p style=\"text-align: justify;\">Elementi, ki jim dolo\u010dimo slog, se med oblikovanjem strani lahko spreminjajo in prilagajajo. Ob pregledu celote pogosto najdemo, kaj bi \u00a0\u0161e lahko izbolj\u0161ali pri obliki strani in sami uporabni\u0161ki izku\u0161nji. Ob kon\u010dni postavitvi <span style=\"background-color: #ffffff;\">vizuala\u00a0<\/span>priro\u010dnik dopolnimo in shranimo za kasnej\u0161e la\u017eje urejanje novih vizualov podjetja.<\/p>\n<p style=\"text-align: justify;\">Ko so navodila izdelana, jih moramo predstaviti vsem, ki sodelujejo pri projektu. Priro\u010dnik je izjemno uporaben tudi takrat, ko v ekipo pride nov \u010dlan, saj ga bo usmerjal pri delu in mu bo v pomo\u010d pri morebitnih nejasnostih. Seveda pa spletni priro\u010dnik nikoli ni zares kon\u010dan, po potrebi ga lahko nadgrajujete, kar zagotavlja tudi kvalitetnej\u0161e nadaljnje delo oblikovalcev in programerjev. Pri snovanju je pomembno, da se vanj vklju\u010di celotna ekipa, saj bo le tako lahko kon\u010dni izdelek kakovosten in konsistenten.<\/p>\n<\/div><\/section>\n\n","protected":false},"excerpt":{"rendered":"<p> Za la\u017eje delo oblikovalcev in programerjev je dobro zbrati pravila, ki dolo\u010dajo vse klju\u010dne elemente spletne strani na enem mestu, in sicer v oblikovnem priro\u010dniku za vizualizacijo spletne strani.<\/p>\n","protected":false},"author":1,"featured_media":15474,"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\/13564"}],"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=13564"}],"version-history":[{"count":8,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/13564\/revisions"}],"predecessor-version":[{"id":15473,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/13564\/revisions\/15473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media\/15474"}],"wp:attachment":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media?parent=13564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/categories?post=13564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/tags?post=13564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}