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

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.

2.jpg

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é.

3.jpg

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