Image
Nahoru
Navigace
01/07/2014

Tvoříme wireframy klientovi navzdory

Proč by si měl grafik umět vytvořit drátěný model webu?

Nejspíš každý webový grafik se střetl se zadáním, které obsahovalo pouze čtyři slova: „Navrhněte mi webové stránky“. Mnohdy bez základního představení firmy, bez corporate identity nebo ujasnění cíle webu. I když takové zadání nepřekvapí u živnostníka a u malých firem, které se v internetovém prostředí neorientují, často přichází i od firem s marketingovým oddělením. Pak je jen na grafikovi, jestli se přizpůsobí a výsledek bude jen hezký, ale nejspíš ne funkční, nebo donutí klienta ke spolupráci a navrhnou web společně. Jak na to?

Získejte informace

Spolupráce by měla začít předáním maximálního možného množství informací. V předchozím článku najdete dotazník pro návrh webu, který by měl na začátek pokrýt vše důležité.

Struktura webu a wireframy

Dalším krokem, který mi pomáhá při navrhování webů je návrh struktury webu. Jako SEO konzultant bych nejdříve raději udělal analýzu klíčových slov a strukturu dělal až na jejím základě, ale ne vždy to jde. I když jste grafik, a tuto analýzu nemáte k dispozici, můžete si spolu s klientem ujasnit, které stránky a podstránky web bude mít. Stačí základní struktura naskicovaná rukou na papíře, nebo strukturovaný seznam stránek v Excelu. Osobně si pomáhám mapou v programu Xmind, který je zdarma. Příjemným bonusem je, že tvorbou struktury nutíme klienta přemýšlet o budoucím webu. Tím si zlepšujeme zadání pro finální grafický návrh.

Náhled struktury webu v programu Xmind

Náhled struktury webu v programu Xmind

Informace a strukturu máme, co dál? Mně se osvědčilo pokračovat se skicou webu – vytvářet wireframy. Ideální by bylo, kdyby je vytvářel odborník, ale často na něj klient nemá finance. Nesnažím se dělat práci za UX konzultanta (na to nemám znalosti ani zkušenosti, doporučuji UX konzultanty z H1.cz), ale pomocí wireframů mohu opět nenápadně zapojit klienta do přemýšlení o obsahu, který na webu chce mít, o jeho prioritách a cílech. Změny se ve skice dělají relativně lehce, levně a výsledek je vidět ihned. Klient si ujasní, co chce a co naopak ne, a grafikovi se na hotový drátěný model krásně navrhuje grafika. Odpadá tak veliká část korektur a pracných změn v grafickém návrhu.

Zvlášť doporučuji wireframy, když má být web responzivní nebo má mít mobilní verzi.

Jak na wireframy, když jste to nikdy nedělali?

Nástroje

  1. Použijte hlavu, ruku, tužku a čtverečkový papír. Rychlé a levné.
  2. Připravené šablony s webovými mřížkami a nejběžnějšími rozlišeními (mobil, obrazovka, tablet) – vytisknete si je a čmárejte, co hrdlo ráčí (Stahujte např. na medialoot.com/item/free-wireframe-sketch-sheets a nebo když chcete navrhovat do speciálnější mřížky např. sneakpeekit.com.
  3. Grafické programy jako Adobe Ilustrátor nebo InDesign se na wireframy dají použít také, navíc si můžete stáhnout připravené knihovny webových prvků (speckyboy.com/2013/04/29/30-wireframe-templates-and-toolkits). A ne jenom pro ně. Jak můžete vidět na předchozím odkazu, zvládnout se to dá i v PowerPointu.
  4. Specializované nástroje na tvorbu wireframů.
    1. Desktopové řešení. Asi si nemusíte kupovat hned drahé (a kvalitní řešení) jako Axure, pro mé základní potřeby se hodí např. Pencil. Je zdarma a dostupný pro vícero platforem (Windows, Linux, Mac a dokonce i jako rozšíření do prohlížeče).
    2. V současnosti se mi víc líbí on-line nástroje jako Moqups, které jsou v základu zadarmo a umožňují sdílení výsledků s klientem, dokonce tam můžete simulovat prokliky mezi jednotlivými stránkami jako na reálném webu.
Wireframe vytvořený v aplikaci Moqups

Wireframe vytvořený v aplikaci Moqups

Co by měly wireframy obsahovat?

Na rozdíl od minulosti si již většinou nevystačíme s návrhem úvodní stránky a maximálně jedné podstránky. Čím bude mít web vícero stránek, tím je pravděpodobnější, že budou mít různé rozvržení. Detail produktu se bude lišit od kontaktní stránky, kategorie od povídání o firmě a firemní blog bude mít také jiný design. V případě responzivního webu se nám počet stránek ještě násobí – máme navíc mobilní verzi i verzi pro tablety. A všechny by měly vypadat dobře.

Do wireframu se nesnažte vkládat grafické prvky – loga, obrázky a ikony. Jenom tím většinu klientů popletete a budou to považovat za grafický návrh. A to za špatný grafický návrh. Proto mám rád ty wireframy, které připomínají kresbu rukou. Za výslednou grafiku je nepovažuje nikdo.

"Kreslený" wireframe

„Kreslený“ wireframe

Naopak, když tam začnete vkládat reálné texty, klienta to často vtáhne do tvorby webu a výsledek pak může být jen lepší.

Moc práce, vyplatí se to?

Vyplatí a rozumnější klienti budou navíc s výsledným webem o mnoho spokojenější. Ocení váš přístup a váš profesní kredit stoupne. Kdo z nás by nechtěl pracovat s někým, kdo při práci přemýšlí a nedělá vše slepě bez ohledu na okolnosti.

I tak si ale musíme ohlídat peněžní stránku celého návrhu. Strávíme nad návrhem delší čas, budeme víc komunikovat s klientem, přemýšlení taky bolí a na to bychom při tvorbě kalkulace neměli zapomenout. Budete sami sobě accounty a také budete spolupracovat při vytváření návrhu, tak se nezapomeňte ohodnotit i za tyto služby. Na začátku asi budete adekvátní cenu navrhovat metodou pokus-omyl, ale časem si každý svůj odhad vytrénuje.

Uložit

Komentáře

  1. Pěkne napsané. Jinak já nikdy nezačínám wireframem úvodní stránky (klientovi navzdory), ale detailem produktu / služby. prostě stránky, na které se má uskustečnit konverzní akce – nákup, objednávka. Máto tuvýhodu, že mám kontext i pro hlavičku a patičku webu, už vím, co mi na různých strákách chybí v navigaci apod.

    A místo lorem ipsum dávám aspoň obsahově větičku, co tam bude :-))

  2. Mojmír Greguš

    Navrhnout nejprve konverzní stránku zní jako dobrý nápad! Musím to někdy zkusit. Mohlo by to klienta ještě více orientovat na podstatu jeho nabídky.

    Výsledná verze wireframu z obrázku měla nakonec téměř kompletní texty, byl o ně větší boj než o grafiku Což je nakonec správně, jsou konverzně důležitější.

Přidat komentář

Kategorie

Design

Štítky