Wireframe

z Wikipédie, slobodnej encyklopédie
Prejsť na: navigácia, hľadanie

Wireframy ("drôtené modely") stránok veľkou mierou pomáhajú pri návrhu dizajnu, obsahu i funkcií webových stránok. Bývajú jedným z prvých výstupov, ktoré sa prezentujú klientovi, aby pochopil rozmiestneniu a forme projektu stránky.

Využívanie[upraviť | upraviť zdroj]

Wireframe definuje textový aj grafický obsah, rozmiestnenie funkčných prvkov, ale aj navigáciu a znenie nadpisov, kľúčových textov či tlačidiel (tzv. labeling). Wireframe nie je grafickým návrhom, neobsahuje obrázky a je tvorený len pomocou čiar ("drôtov", wires) a textu. Nepoužívajú sa ani farby, výnimkou je len odlíšenie hypertextových odkazov.

Vytváranie wireframu prichádza na rad po vzniku úvodnej analýzy a návrhu obchodných a používateľských cieľov. Zároveň však predchádza fáze tvorby grafických návrhov a prezentačnej vrstvy webu.

Informačný architekt vytvorí pomocou wireframu návod alebo vzor pre grafikov a vývojárov a zároveň ho využije na diskusiu s klientom. Zmeny a úpravy (v tejto fáze je žiaduce, aby k nim došlo) je ďaleko jednoduchšie a rýchlejšie zapracovať práve do wireframu než do už hotových grafických návrhov či naprogramovaných beta verzií webu.

Ďalšou výhodou je, že grafik sa v prípade existencie wireframu môže sústrediť plne na svoju úlohu. Nemusí riešiť, čo má navrhovaná stránka obsahovať, ako majú byť jednotlivé prvky rozmiestnené či pomenované. Zároveň však nie sú grafici existenciou wireframu zväzovaní a môžu web kreatívne spracovať. Preto si nie je možné pri prezeraní wireframu predstavovať, že sa jedná o finálnu vizuálnu podobu webu.

Z vyššie uvedených dôvodov je wireframe významnou súčasťou vývojového cyklu webu, ktorý zlepšuje naplnenie jeho cieľov, minimalizuje riziko vzniku rozdielu medzi zadaním a výsledkom a skracuje celkovú dobu vývoja.

Základné typy wireframu[upraviť | upraviť zdroj]

Textový wireframe[upraviť | upraviť zdroj]

- definuje obsah a funkčné prvky stránky len pomocou slovného zoznamu

Stručný či blokový wireframe[upraviť | upraviť zdroj]

- definuje rozloženie obsahu a funkčných prvkov pomocou polí so stručnou textovou informáciou. Jednotlivé bloky definujú pozíciu a proporciu textových i grafických prvkov na stránke

Podrobný wireframe[upraviť | upraviť zdroj]

- určuje detailne proporciu a umiestnenie funkčných prvkov, obrázkov a textu. Definuje konkrétne a doslovne navigačné prvky a odkazy, nadpisy a kľúčové sprievodné texty. Podrobný wireframne často tiež obsahuje popis správania jednotlivých funkčných prvkov

Preklikávacie či hypertextové wireframe[upraviť | upraviť zdroj]

- je rozšíreným variantom podrobného wireframu, kedy sú jednotlivé stránky webu previazané a navigačné prvky sú funkčné. Niekedy je tiež naznačená funkcia chybových či potvrdzujúcich hlášok

Elementy wireframu[upraviť | upraviť zdroj]

Kostra wireframu sa dá rozdeliť na 3 rôzne časti a to dizajn informácií, dizajn navigácie a dizajn rozhrania. Na konečnom layoute stránky sa tieto tri prvky skombinujú a samotný wireframing popisuje ich interakcie.

Informačný dizajn[upraviť | upraviť zdroj]

- sa riadi pravidlami pre správnu prezentáciu umiestnenia a dôležitosti jednotlivých informácií, kvôli rýchlemu a ľahkému pochopeniu. Prvky musia byt rozmiestnené tak, aby odrážali ciele majiteľa a plnili záujmy návštevníkov

Dizajn navigácie[upraviť | upraviť zdroj]

- rieši usporiadanie a funkčnú súvislosť prostriedkov, ktorými sa používateľ pohybuje po stránke. Navigácia by mala byť založená na intuitívnej komunikácii tlačidla a obsahu, ktorý sa pod ním skrýva. Na webe môže interagovať viacero druhov navigácií (globálna navigácia, lokálna navigácia, navigácia v pätičke...), ktoré nemusia byť dizajnovo identické.

Dizajn rozhrania[upraviť | upraviť zdroj]

- toto rozhranie zahŕňa výber a usporiadanie jednotlivých prvkov, ich účinnosť a použiteľnosť. Spadajú sem prvky ako klikacie tlačidlá, textové polia, zaškrtávacie polia, menu (drop-down, pop-up ...) a iné.

Metódy tvorby wireframu[upraviť | upraviť zdroj]

Wireframe na papieri[upraviť | upraviť zdroj]

- ide o všeobecne najjednoduchší a najekonomickejší spôsob modelovania webu. Návrhár nepotrebuje grafické cítenie ani znalosť zložitého softwaru, postačí ceruzka a papier a váš prvý prototyp môžete mať hotový za 10 minút. Praktickosť modelu spočíva najmä vo flexibilnej úprave každého prvku, tj. pôvodný prvok sa vygumuje a prekreslí znova, prípadne si k tomu autor pridá poznámku a pod. Nevýhodou môže byť fakt, že používateľ si týmto nevygeneruje žiadny použiteľný kód

Wireframe v softwarovom prostredí[upraviť | upraviť zdroj]

Predpokladá istú úroveň počítačovej gramotnosti. Známe sú ako free, tak aj komerčné nástroje.

Free nástroje[upraviť | upraviť zdroj]

Komerčný SW[upraviť | upraviť zdroj]

Pri modelovaní sa dbá na labeling - vhodné pomenovanie daných objektov; dostatočné popísanie každej funkcie v technickom zadaní projektu.

Referencie[upraviť | upraviť zdroj]