background design element dropbackground design element dropbackground design element drop

Co je wireframe? Představujeme 5 důvodů, proč je pro klienty ,,drátěný model” důležitý!


Cílem naší práce jsou funkční, intuitivní a příjemné weby a aplikace. Klíč k tvorbě efektivního uživatelského rozhraní spočívá v důmyslné přípravě a testování. Jednou z cest, kterou se pravidelně vydáváme, je tvorba wireframů či chcete-li česky, ,,drátěných modelů”. Z pohledu klienta to může být ztracený čas, jenž je lepší věnovat tvorbě samotného designu. Nenechte však zmást sebe ani klienty. Čas věnovaný wireframování se vyplatí a naopak celý proces tvorby urychlí a zjednoduší. Proč? Pojďme se na wireframy a jejich výhody podívat podrobněji!

Co je to ,,drátěný model” webu či aplikace

  • Jde o pomyslnou kostru stránky. Wireframe je současně něco jako osnova a plán v jednom. Pomocí jednoduchého rozvržení popisuje hierarchii a umístění prvků, jednotlivé funkce a oblasti konverzí.

  • Naznačuje navigaci, vykresluje konkrétní velikosti a dovoluje o vznikajícím projektu přemýšlet v širší funkční souvislosti.

  • Je černobílý, používá pouze zástupné písmo a nepracuje s logy ani dalšími reálnými prvky designu. Tento přístup dovoluje přemýšlet o funkčnosti a přitom se nezahltit detaily.


Pozor, wireframe není totéž co prototyp. Prototypem v UI designu rozumíme již interaktivní a věrně vykreslené uživatelské rozhraní.

1. Časová a finanční efektivnost

Wireframing šetří čas všech zainteresovaných stran. Náčrtek budoucího webového rozhraní je skvělým materiálem pro klienta i realizační tým nejen díky tomu, že dovoluje rychlou validaci všech úvah. Hlavní výhodou je skutečnost, že umožňuje vzájemné pochopení a realizaci okamžitých změn. Měnit cokoliv v již hotovém designu by bylo mnohem zdlouhavější a tím i dražší. Nelíbí se vám velikost záhlaví? Ihned ho zmenšíme. Je výzva k akci zastíněná nějakým prvkem? Zkusíme se na to podívat jinak. Tvorba wireframu zkrátka umožňuje rychlé vylepšování a klienta nechává vidět i postupně posuzovat průběh všech prací.

2. Vizuální ztvárnění informační hierarchie

Klient svůj byznys dobře zná, snadno se však do informací a jejich rozložení na webu nebo v aplikaci  zamotá. Tvorba site mapy je základním krokem, který s klientem podnikáme. Mapa webu je ale abstraktní,  tím spíš když je velká. Překlenutí site mapy do wireframu je prvním skutečně vizuálním procesem projektu. Náčrtky mění abstraktní povahu vývoje na něco reálného, smyslově uchopitelného. Důležité prvky vidíme všichni ihned, nejsou totiž  zastíněny žádným grafickým balastem. S wireframováním jsou všichni od začátku na jedné vlně, vidí na čem jsou a rozumí podstatným informacím.

3. Vyjasnění veškeré funkčnosti

Pro klienta je naše pracovní terminologie často nepřehledná. Někteří neví, jak bude ve skutečnosti vypadat, když mluvíme o light boxech,  integraci do map Google, filtraci produktů nebo highlightování. Překreslení specifických objektů a naznačení funkčnosti dovoluje zřetelně komunikovat náš záměr. Klient si nic nemusí představovat, ale hned vidí, jak budou funkce vypadat a kde budou umístěné. Některé funkcionality se tak mohou nakonec objevit jako zbytečné a nekorespondující s cíli. Vidění vlastností bez jakéhokoliv kreativního vlivu umožňuje nám i klientům zaměřit se na důležité aspekty projektu.

4. Důraz na použitelnost a logiku

Stránky a aplikace vyvíjíme především pro lidi. Chceme, aby na ně chodili často a aby pro ně byly prospěšné a funkční. Použitelnost a logika designu i funkcí je snad nejdůležitějším aspektem celého wireframingu. Vytváření modelů podporuje objektivní nahlížení. Nejde přitom jenom o snadné používání stránek, ale i o rozvržení cest ke konverzním událostem, umístění navigace a výběr správných funkcí. Návrhy často upozorňují na nedostatky v architektuře nebo potvrzují, jestli mohou konkrétní funkce fungovat správně. Navíc jsou vhodným materiálem pro testování na osobách z cílových skupin.

5. Návaznost na další procesy

Web či aplikace je většinou jen jednou součástí celé komunikační a prodejní skládačky. My se přirozeně snažíme funkčnost, design a brandové aspekty propojit do jednoho funkčního celku. Wireframování dovoluje postupovat krok po kroku, ale přitom nikoho neochudit o možnost včasné zpětné vazby. Ke správnosti projektu se musí ze strany klientů často vyjadřovat větší množství kolegů, nejen lidé z marketingu, ale i obchodníci či lidé z technických oddělení. Kdybychom proces tvorby modelu přeskočili, feedback na rozpracované věci by se opozdil a změny ve fázi hotového designu by celý projekt výrazně prodražily.

Přínos wireframování ve zkratce:

  • úspora času i peněz,

  • pohled na reálné zobrazení,

  • pomoc při komunikaci struktury a rozvržení,

  • prostředek k testování a zpřesňování uspořádání, navigace a funkčnosti,

  • materiál pro rychlou zpětnou vazbu.

Aby práce s wireframy fungovala dobře, musí klient vědět, že se jedná o součást procesu, nikoliv konečnou myšlenku. Webový vývoj má hodně společného se stavbou domu – oba projekty jsou komplikované a zapojují týmy odborníků, kteří musejí pracovat ve shodě. Pokud se chystáme stavět, určitě chceme schopné architekty i řemeslníky a vyžadujeme, aby používali správné nástroje. Wireframe je jeden z nástrojů, který vede ke skvělému webovému developmentu.

Chcete si tvorbu wireframů sami vyzkoušet? Sáhněte po některém z free programů. Pro začátečníky se skvěle hodí Balsamiq, interakčně zajímavý je Moqups a dobře poslouží také MockFlow. Funkčně ale dobře poslouží i tužka a papír.



Average Rating:
Your Rating:



    TVORBA WEBŮ A MOBILNÍCH APLIKACÍ

    Od designu až po finální vytvoření webové stránky nebo mobilní aplikace