Vsebinski okvir – kako do premišljeno zastavljene spletne strani?
Vsebinski ovir kot rešitev za premišljeno zasnovo spletne strani. Če ste mogoče že seznanjeni z besednjakom oblikovanja uporabniške izkušnje (UX design), boste imeli grobo predstavo o tem, kaj je Wireframe design. V direktnem prevodu je to žični okvir – jaz mu pravim VSEBINSKI OKVIR.
Kakšen je njegov namen, zakaj ga uporabljamo in kako se sploh lotimo zasnove vsebinsekga okvirja? Skupaj bomo poleg vprašanja kako se lotiti zasnove vsebinskega okvirja – wireframe design, odkrili tudi zakaj vsebinski okvir nujno potreben pri izdelavi spletne strani.
V posnetku spodaj si oglejte, kako izkušen oblikovalec uporabniške izkušnje in vodja oblikovanja Jeff Humble pristopa k ustvarjanju vsebinskih okvirjev za spletne strani in aplikacije. Lahko pa video preskočite in berete naprej.
Zapis je razdeljen na 3 vsebinske sklope. Najprej gre za splošno predstavitev kaj je wireframe design – oblikovanje vsebinskega okvirja in orodij, ki se uporabljajo za njihovo ustvarjanje. Sledijo navodila in ključni koraki za ustvarjanje vsebinskega okvirja. Na koncu pa še nekaj ključnih načel, ki jih morate upoštevati pri oblikovanju vsebinskih okvirjev. Če vam primanjkuje časa, preprosto izberite v spodnjem meniju razdelek, ki vas najbolj zanima.
Izdelava spletne strani in oblikovanje vsebinskega okvirja:
- Kaj je žični okvir in zakaj jih UX oblikovalci uporabljajo? (UX=uporabniška izkušnja)
- Primeri oblikovanja vsebinskih okvirjev
- Popis potrebne vsebine
- Oblikovanje vsebinskega okvirja in kaj moramo upoštevati
1.Kaj je žični ali vsebinski okvir in zakaj jih UX oblikovalci uporabljamo?
Oblikovanje vsebinskega okvirja nam omogoča določitev vsebinske hierarhije za oblikovanje spletnega mesta ali aplikacije. Oblikovanje vsebinskega okvirja opredeljuje kako bo obiskovalec spletne strani ali aplikacije dostopal do vsebine. Kje bo torej našel določeno informacijo in kako bo le-ta predstavljena. Na kratko, gre torej za organizacijo vsebine spletne strani na posameznem zaslonu.
Zasnova vsebinskega okvirja za posamezne strani ali podstrani nam omogoča definicijo vsebine, ki po postavljena na določen del posamezne strani. Ali pa določa lokacijo same podstrani. Določimo naslove, pozicije besedil in opredelimo slikovno gradivo za stran – fotografije, grafi, diagrami, slike in podobno.
Pri oblikovanju vsebinskega okvirja se ne obremenjujemo z barvami, teksturami ali izbiro pisave oziroma fonta. Žični okvir omogoča načrtovanje postavitve in uporabniške izkušnje ter interakcije spletne strani ali aplikacije. Brezpredmetno je razmišljanje o dekoraciji spletne strani (barve, teksture, pisave), preden z enostavnimi črtnimi diagrami definiramo celotno pot uporabnika po naši spletni strani. Ukvarjamo se torej predvsem s pozicioniranjem elementov vsebine in gumbov, ki uporabnika pokličejo k akcij – call to action ali CTA.
2. Primeri oblikovanja vsebinskega okvirja
Če boste vsebinski okvir izdelovali prvič, si naprej oglejte nekaj primerov le-teh. S tem lahko dobite občutek kako so zasnovani. Vsebinski okvir lahko narišemo ročno ali pa za uporabimo programsko opremo.
Kaj morate vedeti, ko se odločate za način izdelave vsebinskega okvirja:
1. Svinčnik in papir:
Prednost zasnove vsebinskega okvirja z uporabo svinčnika in papirja je izredno koristna. Predvsem za sam kreativni proces zasnove vaše spletne strani ali aplikacije. Najboljše je, da vse nove ideje in poprvke vnašamo v nove verzije. Na tovrsten način imamo pred sabo različne verzije, ki jih lahko kasneje med seboj primerjamo.
2. Tabla in flomaster
Kovinska tabla in flomaster sta še boljša izbira za zasnov žičnega okvirja spletne strani. Tako lahko vsebino enostavno izbrišemo in rišemo. Tukaj se nam lahko zgodi, da zaradi nenehnega spreminjanja idej, ne vemo katere ja najboljša. Nimamo namreč pregleda nad tem, kar smo naredili na začetku procesa. Rešitev je da pred vsako spremembo naredimo fotografijo. Na ta način imamo shranjene različne verzije za naš wireframe design strani.
3. Samolepilni lističi
Vsebinski okvir lahko oblikujemo tudi s papirnatimi prototipi – samolepilni listi. Ta način nam omogoča, da morebitne spremembe enostavno prelepimo z novim listkom. Na posamezne liste papirja, ki predstavljajo prikaz zaslona, lepimo samolepilne liste, ki predstavljajo posamezno vsebino. Če imamo različne barve samolepilnih listkov, lahko tako določimo različne vsebine. Fotografije ena barva, besedila druga in tako naprej.
3. Popis potrebe vsebine
Med samim procesom izirsa vsebinskega okvirja (wireframe design) spletne strani ali aplikacije je smiselno, da pripravimo tudi seznam potrebne vsebine. Seznam potrebne vsebine nam omogoča, da imamo pregled nad vsebino. To moramo pripraviti in bo objavljena na spletni strani. Vsebina spletne strani so fotografije in video vsebine ter skice in diagrami, besedila in naslovi ter podnaslovi.
Tako bomo dobili celotno sliko obsega del, ki so neposredno in posredno povezane z izdelavo spletne strani. Seznam potrebe vsebine za izdelov spletne strani nam lahko pomaga tudi pri določitvi časovnega in fonačnega okvirja za projekt izdelave spletne strani.
4. Oblikovanje vsebinskega okvirja in kaj moramo upoštevati
Kot že rečeno, je lahko izdelava spletne strani oziroma sam proces različen – vsak oblikovalec in razvijalec ima svoj način in pristop. Nekateri radi rišejo ročno, drugi pa uporabljajo aplikacije ali orodja, ki jih najdete v spletu. Sama izbira orodja je stavr osebnih preferenc in pa posamezne situacije oziroma projekta izdelave spletne strani.
V spodnjih točkah so prikazani različni načini in procesi za izdelavo spletne strani ali aplikacije:
Kakšen bo proces oblikovanja vsebinskega okvirja in izdelava spletne strani je odvisno od obsežnosti projekta. Kako natančno bomo naredili vsebinski okvir in koliko korakov bo pred samo izdelavo spletne strani, je odvisno od tega, kako zahtevni bodo popravki spletne strani. Če nam torej kasnejši popravki izdelane spletne strani vzamejo veliko časa imam rešitev. Že na začetku se odločimo za dobro pripravo vsebinskega okvirja in uporabniške izkušnje.
