Jak se dělá web? Podívejte se, jak vzniká wireframe!

Jestli vám grafik na vaši poptávku po webu odpoví třemi různými designy, je pravděpodobně hodně zoufalý. Možná jste to po něm dokonce chtěli. Tenhle článek by vám měl napovědět, že lepším začátkem nového webu by měla být analýza a tvorba wireframu. Pro váš web se totiž pravděpodobně hodí pouze jedno uspořádání, a to takové, které bude vycházet z cílů celého projektu.
wireframe - tvorba webu

Kus wireframu pro homepage webu Cukrářství Viktoria. Tady se můžete podívat na celý wireframe. FOTO: Aira GROUP

Je to obecná věc, kterou je potřeba pořád opakovat: Každý web plní jiné cíle. Některý web má předvádět, co umíme, jiný web musí primárně prodávat jeden konkrétní produkt. Obecně ale platí, že když už někdo vrazí peníze do tvorby nového webu, pravděpodobně chce, aby mu web generoval zisk. A stejně tak jako se k tomuto cíli musí upínat texty, musí k němu směřovat i grafika a uspořádaní webu. Kdo byl na Marketing Festivalu 2014 a slyšel přednášku Jana Řezáče, ví, o čem mluvíme.

Dvakrát wireframuj, jednou designuj

Udělat návrh grafiky webu tak nesmí být pouze nahozením barviček na papír, ale mělo by jít o promyšlené, systematické skládání jednotlivých prvků webu tak, aby dokonale odpovídal tomu, co se od něj čeká. Přesně k tomu nám slouží wireframy, doslova "drátěné modely",na jejichž základě až vzniká to „hezké a barevné“. Wireframe je zjednodušená skica webu, struktura, která přesně popisuje funkcionalitu webu a ukazuje, jak jsou jednotlivé prvky propojeny a proč jsou tam, kde jsou. Příprava wireframu by měla vycházet z podrobné analýzy toho, co klient chce, co potřebuje a co potřebuje cílová skupina webu.

Podívejte se na ukázky wireframů v praxi.

wireframe - tvorba webu

Wireframe pro homepage projektu MámeRádiDrupal.cz. FOTO: Aira GROUP

Nebudeme dlouze popisovat průběh analýzy, ale vězte, že ve vědění je síla. Čím víc informací budete mít, tím líp. Využít můžete průzkumy, studie, dotazníky, ale taky starý dobrý pokec s klientem může udělat zázraky. Až po tom všem je možné navrhnout web, který bude mít úspěch, bude plnit cíle. Může to sice znít jako heslo z komunistické propagandy, ale je lepší plnit cíle, než pak poslouchat od klientů stížnosti, že z webu nemají žádné poptávky.

Nejdůležitější prvky neschovávejte, ale dejte je na homepage

Ten mezititulek zní docela jasně, nemyslíte? Přesto existuje spousta webů, jejichž TOP přidaná hodnota je schovaná kdesi v patičce nebo v třetí subkategorii menu. Od klienta vždy zjistíme, co je pro něj nejdůležitější, a tomu celou strukturu přizpůsobíme. Nemá smysl dělat na hlavní stránce fotogalerii z teambuildingových akcí firmy jen proto, že to tak má konkurence. Nemá smysl mít tři kilometry dlouhou patičku webu jenom proto, že to je moderní. Dokonce ani nemá smysl udělat hlavní menu oranžové, protože je to hezčí. Wireframe by vám měl jasně říct, co smysl má a co ne, co má kde být a co je zbytečné.

wireframe - tvorba webu

Wireframe pro homepage Novum.cz. FOTO: Aira GROUP

Kdo dělá wireframe? Grafik, UXák i copywriter

Aby byl wireframe opravdu dobrý, měl by se na jeho tvorbě podílet celý tým lidí, kde paradoxně grafik není ten nejdůležitější. Mnohem lepší v této fázi je zaměstnat UX konzultanta, který sice nedodá eňo ňuňo vymazlený frame, ale rozvrhne web podle reálných cílů a potřeb klienta. Copywriter s grafikem pak vymyslí pro wireframe konkrétnější vizuál, kde texty jdou ruku v ruce s grafikou. Najít grafika, který umí smysluplně kreslit wireframy a vystudoval žurnalistiku, to je zlatý důl.

Wireframe je dobré mít nejen pro hlavní stránku, ale i pro všechny typy podstránek. Typicky pro detail produktu, defaultní podstránku, kontaktní podstránku nebo výpis produktů či služeb. Ne vždy je na to prostor, grafikovi to ale hodně ulehčí další práci. Malá rada pro projektové manažery na závěr: wireframy jsou skvělou fází projektu, kterou je možné si s klientem schválit. Veškeré další aktivity se od toho můžou odvíjet jako od pevného bodu a nestane se vám, že budete po dokončení designu řešit, kde má být tohle tlačítko. Z našich zkušeností také plyne, že klient daleko spíš schválí výsledný design, když mu předtím na wireframu pečlivě vysvětlíme, proč je tohle tady a proč tamto tam vůbec není.

Komentáře

Jan

26.1.2015

Dekuji za zajimavý članek!

Za pouhé 4 dny kurzu Adobe Muse INTENSIVE se naučíte realizovat luxusní webové stránky s atraktivními animacemi.

Dominik Fryč

21.11.2015

Je hezké koukat na svoje wireframy po tom, co jsou již dané weby hotové a zpětně je porovnávat s finální podobou.

Tesla

11.1.2017

Podobne vznikal i nas projekt:-) aneb cestou necestou za sikovnym grafikem nemusi byt jen zla.

Petr

16.3.2017

Zajímavý článek, spolupracujete přitom s UXáky?

Jan Švestka

22.3.2017

Většinou je to nutné.

David

29.3.2017

Velmi zajimave, da se s vami dohodnout i na jiste revizi/nezavaznem posouzeni stavajiciho rozvrzeni webu?

Petr Míka

30.3.2017

Dobrý den, Davide,

určitě rádi pomůžeme a web posoudíme. Petr

David

30.3.2017

Jedná se o ten, co slouží k prokliku z mého jména. Napište mi pak na ten mail zde.

Přidat komentář