Čo to je wireframe a ako vám môže spolu s návrhom webu ušetriť čas a peniaze? Ako sa uistiť, že vaše prostriedky na tvorbu webu budú investované správne?  

Wireframe, alebo drôtený model predstavuje náčrt budúceho webu. Wireframe prezentuje prvky obsahu a spôsob ich rozmiestnenia na jednotlivých podstránkach webu. Dôvodom tvorby wireframe je navrhnutie štruktúry informácií, ktorá zaistí, že budúci web bude plniť očakávaný účel.

Pre úplnosť a zrozumiteľnosť ďalšieho textu uvediem, že wireframe je súčasťou a vizuálnym stvárnením komplexnejšieho procesu - návrhu webu. Bez prítomnosti ďalších procesov je prínos tvorby wireframe značne limitovaný. Aj v tomto článku budem preto tvorbu wireframe spájať s návrhom webu. 

Ako vyzerá wireframe

Skica, náčrtok 

Najjednoduchšou a veľmi často využívanou formou wireframe je skica.  Pomôže hlavne vo vizualizácií inak abstraktných predstáv. Jej zhotovenie je rýchle. Vôbec pritom nevadí, že je skica nesúmerná a na prvý pohľad esteticky neatraktívna. Pre základnú vizualizáciu myšlienok je super. Papier, tabuľa prípadne chytrá stena sú pre radu designérov najlepšie prototypovacie nástroje.

 skica

 

Digitálna podoba wireframe

Na tvorbu rozsiahlejšieho modelu webu a jeho postupné rozširovanie sú veľmi vhodné prototypovacie nástroje. Tie umožňujú model jednoducho editovať, rozširovať, zdieľať, exportovať a testovať.

Podoba digitálneho modelu sa odvíja hlavne od úrovne detailov. V určitých prípadoch stačí navrhnúť len približné rozmiestnenie najdôležitejších prvkov budúceho webu. Typicky to budú navigačné prvky alebo hlavné parametre produktov ako cena, názov alebo obrázky. 

V iných prípadoch je potrebné navrhnúť jednotlivé podstránky podrobne. Príkladom sú stránky obsahujúce formulárové alebo konverzné prvky. Pri nich je potrebné dbať na každý detail, ktorý môže ovplyvniť napríklad konverzný pomer.

low fidelity wireframe

high fidelity wireframe

 Dva rôzne prístupy k úroveni detailov, pri tvorbe modelu budúceho webu: low fidelity wireframe (vľavo) a high fidelity wireframe (vpravo).

 

Množstvo navrhnutých obrazoviek

Rozsah modelu sa odvíja hlavne od zložitosti budúceho webu a od dostupného rozpočtu. Pri určitých podmienkach nie je potrebné tvoriť wireframe celého webu. Na časť stránok sa použije vzor z iného webu. Môže sa jednať o podstránky ako prihlásenie alebo blog. Prínos designéra napríklad v prípade blogu spočíva v tom, že pomôže zadávateľovi určiť, čo má tvoriť obsah blogu.

Pri zložitejších projektoch je naopak vhodné navrhnúť web celý. Kompletný a podrobný návrh je vhodný aj v prípadoch, keď sa tvorby webu zúčastňuje väčšie množstvo špecialistov. Táto potreba je aktuálnejšia, ak špecialisti spolupracujú na diaľku. Podrobný návrh ušetrí čas spojený s komunikáciou a pomôže predísť nedorozumeniam.

 

Responzivita a wireframe pre mobilné zariadenia

Aby sme zabezpečili funkčnosť webu aj na mobilných zariadeniach tvoríme wireframe aj pre tieto zariadenia. Opäť záleží na náročnosti projektu a rozpočte, podľa ktorých prispôsobíme rozsah a úroveň detailov modelu.

Kľúčové časti wireframe, pre mobilné zariadenia:

  • Klikateľné prvky
  • Navigácia
  • Filtrácia
  • Formuláre
  • Obsah na rozkliknutie

 

Wireframe a prototyp

V súvislosti s wireframe sa často používa aj termín prototyp. Prototyp je na rozdiel od wireframe dynamický. To znamená, že je klikateľný. Po kliknutí na niektoré časti stránky sa podoba obrazovky zmení. Môže nastať jednoduchá animácia prípadne prechod na inú obrazovku. Podoba a vzhľad oboch foriem modelov je v zásade rovnaká.

 

Prehliadnuť si prototyp

 
Výhodou prototypu je rýchlejšie a presnejšie testovanie interakcií. Môžeme tak odhaliť nesúlad medzi tým, čo užívateľ predpokladá, že sa stane a tým, čo sme navrhli. Testovanie interakcií je možné aj so statickým wireframe. Realizuje sa však zložitejšie a to formou manuálneho prepínania obrazoviek. 
 
Výhodou je aj to, že vývojári, ktorí budú s modelom neskôr pracovať vedia, čo sa má stať po kliknutí na určitý prvok. Zamedzí sa tak chybám a nedorozumeniam a to hlavne v situáciách, ak nie je vývojár a designér z jednej spoločnosti.  
 
Výhodou wireframe je však rýchlejšie zhotovenie, nakoľko nemusíme nastavovať jednotlivé interakcie. 
 

Význam wireframe

Účelom modelu budúceho webu je zhmotnenie abstraktných myšlienok do vizuálnej podoby. Pripravená vizuálna forma umožňuje testovanie modelu a tým pádom aj odhaľovanie prípadných chýb v návrhu.

Akákoľvek úprava modelu je veľmi rýchlo realizovateľná. Odstraňovanie prípadných chýb a realizácia úprav v neskorších fázach tvorby webu je časovo a finančne náročnejšie. Preto model webu aj napriek času, ktorý je potrebný na jeho zhotovenie v konečnom dôsledku urýchli spustenie webového projektu.  

Wireframe spoločne s návrhom webu taktiež dovoľujú presnejšie naplánovať a naceniť jednotlivé kroky tvorby webu. Zadávateľ webu, ale aj špecialisti zúčastňujúci sa na jeho tvorbe, tak získavajú veľmi konkrétnu predstavu o tom, ako bude vyzerať budúci web. 

Vďaka wireframe a návrhu webu naplánujeme:

  • Ako bude web plniť cieľ zadávateľa webu  
  • Čo bude tvoriť obsah webu
  • Ako bude obsah rozmiestnený a prepojený
  • Akú funkčnosť bude web poskytovať návštevníkom
  • Ako návštevníci webu zrealizujú konverzné akcie

 

Čo sa deje s wireframe ďalej

Wireframe slúži ako podklad pre špecialistov počas tvorby webu. Zároveň je možné na základe wireframe skontrolovať výstup práce špecialistov a porovnať ho s navrhnutým riešením. Tým sa zamedzí nepresnostiam a vnášaniu chýb počas tvorby webu.  

Na základe pripraveného modelu navrhne grafický designér presný vzhľad budúceho webu. 

wireframe

mockup - grafika webu

Rozdiel medzi wireframe a výslednou grafickou podobou webu.

 

Grafický designér pri tvorbe výslednej vizuálnej podoby navrhne a skontroluje:

  • Typografiu
  • Farebnú schému
  • Súlad medzi vizuálom spoločnosti a budúcim webom
  • Kontrast
  • Vzhľad jednotlivých prvkov webu
  • To, aby web vzbudzoval v návštevníkoch správne emócie


Matej Chyľa
Pracoval som ako freelancer, zbieral som skúsenosti popri štúdiu, absolvoval som stáž. To všetko preto, aby som dnes mohol navrhovať fungujúce weby. Základom mojej práce je nikdy nekončiaci designový proces. Získavam informácie, overujem hypotézy a testujem vhodnosť možných riešení.