Wireframe

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

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

Textový wireframe

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

Stručný či blokový wireframe

- 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

- 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

- 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

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

- 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

- 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

- 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

Wireframe na papieri

- 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í

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

Free nástroje

• Mockingbid
• Lovely Charts
• Cacoo
• Gliffy Archivované 2011-05-29 na Wayback Machine
• Lumzy Archivované 2012-03-23 na Wayback Machine
• Pencil Project Archivované 2010-05-25 na Wayback Machine

Komerčný SW

• MS Visio
• OmniGraffle
• Axure
• Adobe Illustrator
• SmartDraw

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

Referencie

• Jak funguje wireframe? Dostupné online Archivované 2012-04-05 na Wayback Machine
• Wireframe webu [online], Dostupné online Archivované 2012-03-27 na Wayback Machine
• 10 Free Wireframe nástrojov pre dizajnérov, Dostupné online
• Co je Paper Prototyping Dostupné online Archivované 2012-03-07 na Wayback Machine