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 
* Lumzy 
* Pencil Project 

#### 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 
* Wireframe webu [online], Dostupné online 
* 10 Free Wireframe nástrojov pre dizajnérov, Dostupné online
* Co je Paper Prototyping Dostupné online