Vytvorenie webu je proces, ktorý sa skladá z viacerých menších, no veľmi dôležitých častí. Jednou z nich je práve wireframe. Čo to je, na čo je dobrý a aké s ním máme skúsenosti? To sa dočítate v nasledujúcich riadkoch.

Čo je to wireframe?

Veľmi jednoducho povedané je to náčrt budúceho webu, prípadne propagačných materiálov. Cieľom jeho tvorby je rozvrhnúť obsah jednotlivých stránok webu tak, aby bolo jasné, aký obsah na danej stránke bude, čo je tam dôležité, ako to celé bude rozložené i to, aké prepojenia budú medzi jednotlivými časťami.

„Wireframe je podľa mňa veľmi dôležitá pomôcka. Web, ktorý síce pôsobí WOW, ale je bez rozmyslu postavený len na dizajne, nemá v skutočnosti žiadny efekt. Úlohou wireframu nie je len pomáhať marketérovi a dizajnérovi v práci, ale predovšetkým je jeho úlohou skonštruovať web, ktorý je užívateľsky prívetivý a jeho návštevník rýchlo nájde to, čo hľadá. Samozrejme, dôležité je aj užívateľské rozhranie a jeho dizajnové prvky, ktoré musia vzájomne interagovať.” (Tom, grafik)

Wireframe šetrí čas aj peniaze

Áno, najskôr je potrebné investovať čas, a teda aj peniaze, ale v konečnom dôsledku sa to vyplatí oveľa viac. Vytvorením wireframu sa eliminujú nepochopenia medzi zadávateľom, marketérom a grafikom, vďaka čomu sa v závere projektu nerobia výrazné zmeny a výsledný web sa schváli rýchlejšie.

Práve pri prezentovaní wireframu je priestor na diskusiu s majiteľom firmy, potvrdenie alebo vyvrátenie predpokladov, ktoré mali tvorcovia.

„Hodnotu wireframu webových stránok z pohľadu jeho tvorcu vnímam v tom, že mi dáva príležitosť celý projekt premyslieť z nadhľadu, komplexne. Vidím všetky súvislosti a prepojenia, čo mi umožňuje následne vytvoriť funkčné riešenie celého webu. 

Z pohľadu zákazníka je nespornou výhodou wireframu prehľadne spracovaná a teda predstaviteľná podoba jeho budúcich webových stránok, čo a ako na nich bude komunikované, a má možnosť navrhnúť prípadné zmeny bez nutnosti prekresľovania celého webu. Wireframe tak zefektívňuje celý proces.” (Lenka, marketingová špecialistka)

Wireframe nie je grafický návrh

Wireframe má s grafickým návrhom spoločný len obsah a rozloženie jednotlivých prvkov. Ide totiž iba o podklad, z ktorého grafik pri svojej práci vychádza. Preto môže byť niekedy náročné predstaviť si jednotlivé časti či drobné detaily. Hlavná pointa by však mala byť ľahko pochopiteľná.

„Je to iba chvíľa, čo využívam systém wireframu naplno. Avšak začiatky neboli pre mňa až také ľahké, ako sa na prvý pohľad zdalo. Kým som pochopila jeho pravú funkciu, tak ma veľmi obmedzoval v kreativite. Dokázala som sa na koncept pozerať iba jedným (prvotným) pohľadom, ktorý som už nevedela zmeniť a to bol problém. Samozrejme, projektom po projekte som sa dostala do bodu, kedy si už prácu bez wireframu neviem ani predstaviť.” (Henrieta, grafička)

Ako sa tvorí wireframe?

Nakresliť wireframe znie veľmi jednoducho, realita je však o niečo zložitejšia. Len málokedy pri tom začínate kreslením. Najskôr musíte poznať požiadavky zadávateľa, jeho produkty či služby, cieľ, ktorý sa novým webom sleduje, ale aj konkurenciu a cieľovú skupinu. Základom je potom štruktúra webu a až následne sa môžu kresliť jednotlivé stránky. 

„Určite každý zažil, že mal plnú hlavu myšlienok, všetko to vyzeralo krásne a jednoducho a potom, keď sa ich snažil vložiť na papier vo forme slov, tak už to také ľahké nebolo. Keď k slovám pridáte ešte aj vizuálne rozloženie/logické usporiadanie textu, tak získate komplikáciu na druhú.” (Pali, marketingový špecialista)

Na tvorbu wireframu môžete použiť obyčajný papier alebo niektorý z mnohých online nástrojov. Keď ide o jednoduché letáky, brožúry či iné propagačné materiály, vystačíme si aj my s papierom. Pri zložitejších zadaniach je to online nástroj Balsamiq. Výhodou je, že ho môžeme zdieľať so všetkými, ktorí k nemu majú čo povedať, teda so spolupracovníkmi aj klientom. 

„Najradšej mám wireframe na papieri. Tvorím ich takmer denne. Je to najlepší nástroj, ako z myšlienok vytvoriť niečo reálne. Pre mňa je toto najkrajšia časť mojej práce.

Ľudia si wireframe pripravujú pri rôznych činnostiach, len to takto možno nevolajú. Myslím si, že vedieť poukladať myšlienky na papier vo forme wireframe by mal ovládať každý marketér alebo grafik. Už len pri jednoduchom návrhu bilbordu je wireframe pomocníkom.

Samozrejme, komplikovanejšie wireframy pre weby vyžadujú aj ďalšie zručnosti a znalosti, ale podstata tejto práce sa nemení a zvládnutie jednoduchších wireframov je nutné pre tvorbu zložitejších.” (Pali, marketingový špecialista)

Ako sa pracuje s wireframom?

„Wireframe je skvelá forma, ako sa napr. rýchlo pochopiť s klientom. Ja rád kreslím svoje nápady na papier (alebo do aplikácie) a klient môže rýchlo reagovať. Pokiaľ ide o formu, tak uprednostňujem kresliť na obyčajný papier. Pokiaľ ide o spoluprácu marketéra, copywritera a grafika, tak lepšou voľbou bude nejaká desktopová aplikácia. Marketér spraví základnú kostru, copywriter naplní textami a grafik to nakoniec celé „oblečie" do dizajnu.” (Tom, grafik)

Wireframe je dobrý pomocník nielen pri komunikácii so zákazníkom, ale aj v rámci firmy ako podklad pre špecialistov pri tvorbe webovej stránky. Grafici vďaka nemu presne vedia, čo nesmú v dizajne opomenúť, príp. na čo musia nájsť zodpovedajúci priestor, aj keby traktory padali. Rovnako aj copywriteri - pripravujú presne taký obsah, ako im wireframe udáva. 

„Wireframe mi veľmi zjednodušuje život. Určite tomu nebolo tak, keď som ho mala vytvoriť, pretože na to nemám nos. Ale písanie textov na web je s ním skvelé. Keďže vopred viem, čo všetko, vrátane mikrotextov, je potrebné pripraviť, viem sa vyhnúť vytvoreniu takých textov, ktoré nebudú mať využitie. Platí to tiež naopak - s wireframom sa nestáva, že by niečo pri finalizácii chýbalo.” (Mery, copywriterka)

Foto: Identiq, Pexels.com, Pixabay.com