Buďte hodní a pošlete tento článek dál, prosíme:

Adresa článku bude vložena automaticky

Skvělá práce!

Článek byl odeslán

Děkuji vám.

Tereza Králová, Graphic Designer & UX Consultant,
agentura Robert Nemec

Strategická reklamní agentura

Nejlepší UX nástroje pro wireframy a prototypy – zkušenosti a porovnání

Nejlepší UX nástroje pro wireframy a prototypy – zkušenosti a porovnání

Hledáte ten nejlepší UX nástroj pro tvorbu wireframů a prototypů, ale nedokážete se rozhodnout, který je pro vás ten správný? Sepsali jsme na základě našich zkušeností porovnání šesti oblíbených programů, které by vám rozhodně neměly uniknout. 

Naše recenze UX aplikací vám poslouží jako skvělý odrazový můstek pro základní přehled a orientaci napříč jednotlivými programy. Kromě hodnocení v článku najdete také užitečné tipy, na co se zaměřit při samotném výběru.

Než se pustíme do detailního přehledu a porovnání jednotlivých UX aplikací, v rychlosti si představíme základní rozdíly mezi wireframy a prototypy. Proč jsou tolik důležité při tvorbě webových stránek? A k čemu se používají?

Tvorba wireframu a prototypu – základ kvalitního a funkčního webu

Wireframe neboli drát (někdy také drátěný model) definuje základní rozvržení prvků na webových stránkách nebo v aplikacích. UX designér se při tvorbě wireframu zaměřuje pouze na základní schéma a strukturu, nikoliv na vizuální stránku.

Pro zachování funkčnosti se nedoporučuje využívat barev, ani jiných rušivých elementů jako jsou obrázky, loga apod. Smyslem náčrtu rozhodně není zahlcovat se detaily, ale přemýšlet o vznikajícím webu v širším kontextu. Návrhy drátěných modelů je vhodné vytvářet nejenom pro hlavní stránku, ale i další typy podstránek.

Podívejte se na ukázku wireframu a prototypu v praxi.

Zjednodušená skica wireframu popisuje rozvržení prvků webu, vzájemnou provázanost a objasňuje jejich účel. Naproti tomu prototyp už dostává reálnější rozměry, obsahuje větší množství detailů, je doplněný o UI a umožňuje testovat nově vznikající aplikaci.

Mimochodem, častou chybou začínajících UX designérů je, že začnou vytvářet wireframe, aniž by se před tím zeptali zákazníků, co vlastně chtějí.

Jaké faktory jsme u aplikace na wireframy a prototypy hodnotili

Před výběrem vhodného UX softwaru pro vytváření wireframů a prototypů, je vhodné se zaměřit na několik oblastí, které podrobíte bližšímu zkoumání.

My jsme se v článku zaměřili na několik důležitých faktorů, díky kterým snadno zjistíte, jestli zkoumané nástroje vyhovují vašim specifickým nárokům a individuálním požadavkům. Zaměříme se zejména na následující body:

  • Vzdělávací křivka (learning curve)
    Nejprve zhodnotíme, jak dlouho trvalo se v daném programu zorientovat a začít s ním pracovat. Jelikož na trhu existuje nespočet nástrojů pro UX designéry, je logické, že každý z nich poskytuje jiné funkce a odlišné uspořádání. Některé nástroje jsou velmi intuitivní, u jiných naopak chvíli trvá, než se uživatel rozkouká.
  • Použitelnost
    V další fázi nás budou zajímat  funkce, které daný program nabízí. Jak snadné je za pomocí nástrojů a vybraných funkcí vytvořit wireframy a prototypy? Pokud např. jenom pracujete na optimalizaci konverzního poměru, potřebujete rychle načrtnout „jak si to asi představuji“. Je ale pravda, že mnoho nástrojů na A/B testování již má tuto funkcionalitu v sobě.
  • Sdílení
    Při výběru nástroje je dobré položit si otázku, jak moc je pro vás důležité využívat funkci sdílení. Pokud UX designér pracuje v týmu, důležitá je pro něj synchronizace s vícero lidmi. Ať už je to samotný klient, copywriter, UI designér, programátor apod. 
  • Cena
    UX nástroje se od sebe pochopitelně neliší pouze funkcemi a prvky, ale také cenou. Je dobré si na začátku definovat, kolik peněz jste ochotni do programu investovat a které funkce potřebujete ke svým projektům. Většina UX nástrojů nabízí bezplatný trial (zkušební období), který jednoznačně doporučujeme využít. Zjistíte, zda vám daný program umožní plnohodnotnou práci nebo zda je na čase se porozhlédnout po jiném, který bude lépe vyhovovat vašim potřebám.
  • Výstup
    Jak moc kvalitní výstup pro prezentaci finálního návrhu potřebujete? Nároky na výsledný wireframe a prototyp se od sebe liší v závislosti na konkrétním projektu. Zodpovězte si následující otázky: Jaké požadavky musí prototyp splňovat? Resp. jak pokročilý prototyp využijete? Hledáte pokročilé a obsáhlé funkce anebo se bez nich obejdete?

Jaký nástroj je pro mě ten pravý

Před zhodnocením UX nástrojů je vhodné zmínit, že srovnání budou podrobeny pouze vybrané nástroje, které aktivně využíváme anebo jsme je v minulosti důkladně testovali.

Jak už to tak bývá, to, co vyhovuje jednomu, nemusí vyhovovat druhému. Nezoufejte tedy, pokud vám zabere nějakou chvíli než objevíte nástroj, který splňuje všechna vaše očekávání. Čím více nástrojů vyzkoušíte, tím lepší získáte představu o tom, jaké funkce budete využívat a které jsou pro vás naopak zbytečné.

Adobe XD

Adobe XD je vektorový editor, který patří do skupiny programů od Adobe. Designéři, kteří s nimi pracují mají výhodu, že programy mezi sebou umožňují interakci. Není tedy problém mezi programy sdílet ikony, prvky či jiné soubory. 

Zorientovat se v programu je poměrně intuitivní. Oproti jiným programům rodiny Adobe, je XD řešen dost minimalisticky, zejména co se týká nabídky nástrojů, což vnímáme jako výhodu. Z dostupných nástrojů se dá velmi snadno vytvořit wireframe.

XD je skvělý nástroj, pokud se chcete na projektu zaměřit na prototypování. Na první pohled se může zdát, že některé funkce u prototypování jsou náročnější pro jeho tvorbu, ale když se designér rozkouká, zjistí, že XD nabízí rozsáhlé možnosti prototypování a výstupy mají vysokou kvalitu i důvěryhodnost.

V minulosti bylo považováno za velkou nevýhodu Adobe XD,  že program neumožňoval spolupráci s týmem v reálném čase. Jinými slovy neumožňoval návrhářům pracovat na stejném projektu současně. Jelikož vývojáři od Adobe velmi dobře reagují na požadavky uživatelů, často zveřejňují nové aktualizace. V současnosti je tedy problém s absencí spolupráce s týmem v reálném čase vyřešený a uživatelé nyní mají tuto funkci k dispozici. 

Program sice nenabízí pracovat v režimu online tvorby (tzn. že je nutné si jej nainstalovat do počítače), ale sdílení projektu je možné přes online odkaz. Ostatní členové realizačního týmu tak mohou zobrazit rozpracovaný či hotový wireframe a prototyp, přidávat komentáře nebo je testovat.

A jak je to s cenou? Na výběr dává Adobe ze dvou variant. První je zcela zdarma, ale některé funkce či počet projektů jsou omezeny. Druhá varianta je placená a vychází na 12,09 € za měsíc. V případě, že vlastníte CC cloud, je XD součást balíčku.

Figma

Další místo velmi oblíbeného a rozšířeného nástroje zaujímá Figma. Často ji uživatelé porovnávají s již zmíněným XD nebo Sketchem. Stejně jako Adobe XD se jedná o vektorový nástroj. Vzhledově, rozmístěním prvků i funkcemi se navzájem hodně podobají. Pro někoho, kdo už používal buď Sketch anebo XD, je zorientování se v tomto programu poměrně snadné a rychlé.

Figma funguje jako online nástroj, ale nabízí také desktopovou verzi pro Mac i Windows. Pokud UX designér potřebuje pracovat bez internetového připojení, Figma mu tuto možnost nabízí, avšak s omezeným množstvím funkcí. Práci offline využijete třeba v začátcích projektu, kdy se zaměříte pouze na wireframe. 

Figma má jednu nespornou výhodu, a to je schopnost sdílení a spolupráce s ostatními členy týmu v reálném čase. Dokonce nástroj poskytuje skvělou vychytávku – přihlášení uživatelé ve vybraném projektu vidí pohyb myší ostatních účastníků. Tato funkce je ideální pro online meetingy, což je v dnešní době velmi rozšířený způsob komunikace. Práce z domova je díky této funkci o něco snadnější, ale dokáže být nápomocná nejen při online prezentacích. Další výhodu ocení programátoři, protože i když člověk není editorem, může si projekt procházet a veškeré komponenty (vrstvy apod.) snadno vyexportovat.

Prototypování má Figma také velmi slušně zvládnuté, ale kdybychom se zaměřili více na vytváření auto-animate prototypů, lépe se budou vytvářet v Adobe XD.

Figma nabízí tři cenové balíčky. První startovací balíček je k dispozici zcela zdarma, ale umožňuje práci maximálně na třech projektech. Druhý vychází na 12 €/měsíc a nabízí výrazně větší počet funkcí. Třetí balíček je zpoplatněn 45 €/měsíc.

Balsamiq

Oproti dalším nástrojům jako jsou Figma, XD nebo Sketch je Balsamiq svým rozhraním velmi specifický. Co si pod tím představit? Uživatelům XD na první pohled probleskne hlavou myšlenka nacházím se právě v Powerpointu nebo Malování

Hlavní rozdíl mezi Figmou, Sketchem, XD a podobnými nástroji u Balsamiqu spočívá v tom, že si designér nevytváří jednotlivé prvky, ale wireframy rovnou tvoří z přednastavených hotových ikon a ostatních položek. Vložení prvků, které nejsou v nabídce, probíhá přes možnost přidání vlastního assetu. 

Tento program je ideální pro toho, kdo se potřebuje zaměřit pouze na strukturu a obsah wireframů a nejde příliš do hloubky návrhu. Velkou výhodu spatřujeme právě v jeho jednoduchosti. Designéra nebude lákat vytvářet nová vylepšení, ale zaměří se pouze na surový drát a neřeší zbytečné detaily.

Jedinou nevýhodu spatřujeme v tom, že vytváření wireframů vám zabere spoustu času. Než v počátcích najdete správné prvky pro aplikaci do vašeho návrhu, strávíte tím několik desítek minut v závislosti na komplexnosti projektu. Nicméně věříme, že častým používáním tohoto nástroje tento problém vymizí.

Program ocení také návrháři, kteří potřebují udělat hrubý wireframe, protože jeho výstup nedosahuje velké kvality ani důvěryhodnosti. Tudíž i prototypování je značně omezené. Program umožňuje jen přechod mezi stránkami. Nedovoluje změnu stavu daného prvku na konkrétní stránce.

Sdílení je velmi snadné – Balsamiq umožňuje sdílet vytvořený projekt za pomocí odkazu. A další věc, která pro spoustu lidí může být velkou výhodou je, že nástroj funguje online. Na chatě se špatným internetovým připojením nebo v dopravním prostředku vás ale tato vlastnost naopak nepotěší.

Balsamiq si uživatel může zkusit v neplacené měsíční verzi a následně ho zakoupit za 9 $/měsíc, 49 $/měsíc nebo za 199 $/měsíc. Rozdíly mezi cenovými balíčky se odvíjejí od počtu projektů, na kterých potřebujete pracovat.

Axure

Axure, stejně jako XD, není online nástroj, tudíž si ho uživatel musí stáhnout. Počítejte s tím, že instalace programu nějakou chvíli zabere. 

Zorientování se v programu zezačátku může být obtížné, ale rozhodně to není nic náročného. Na první pohled se zdá, že nástroj Axure vznikl spojením programů Balsamiq a Figma. Alespoň na nás tak uživatelské rozhraní a jeho možnosti působí. A to hned z několika důvodů. Axure má k dispozici již několik předchystaných prvků, které designér může okamžitě použít do svého rozpracovaného projektu. Zároveň lze navrhovat i vlastní prvky za pomocí pera a tvarů. 

Pokud se chcete zaměřit především na tvorbu wireframů, je pro vás Axure perfektním nástrojem. Axure v sobě nemá tolik funkcí, které se zaměřují na vizuální stránku, takže vaše pozornost bude směřovat pouze na tvorbu wireframů, podobně jako u Balsamiqu. Lze to samozřejmě chápat i v negativním slova smyslu, ale pro účely vytváření jednoduchých a funkčních wireframů tuto vlastnost jednoznačně oceníte.

Velmi kladně hodnotíme snadnou práci s prototypy. Opět, kdybychom ho porovnali např. s XD, zjistíme, že nemá příliš mnoho funkcí, ale jelikož tento nástroj skvěle obstojí při tvorbě čistých wireframů, vytvořit z nich prototyp je snadné a přehledné.

Sdílení projektů funguje za pomoci online odkazů. Nepočítejte tedy s reálnou interakcí v několikačlenném týmu. Projekt však pohodlně nasdílíte všem zainteresovaným uživatelům, kteří si ho mohou kdykoliv prohlédnout.

Axure nabízí zkušební měsíční verzi a následně je možné si jej koupit za 25 $/měsíc, kdy má designér k dispozici neomezené prototypy, neomezený počet recenzentů, maximálně 1 000 projektů v cloudu, pokročilé vytváření prototypů, drátové rámy, diagramy a dokumentace. Dražší verze je potom nabízena za 42 $ měsíčně a navíc v ní najdete rozšířené funkce jako spoluautorství, historii verzí či hostování týmového projektu v cloudu.

UXPin

UXPin funguje jako online nástroj na webu dostupný pro Mac i Windows. Výhodou také je, že se jedná o cloudový nástroj.

UXPin zvládá jak začáteční vytváření wireframů, tak i důvěryhodné prototypy. Velmi dobře umožňuje vytvářet interaktivní prvky, animace a další věci, které podpoří kvalitu a důvěryhodnost finálního prototypu webu či aplikace.

Umožňuje práci s týmem v reálném čase a poznámky a komentáře k danému projektu jsou jednoduše řešené a přehledné. Nejen díky tomu si zaslouží přívlastek poměrně flexibilního nástroje.

Kladně hodnotíme, že program nabízí vlastní knihovny, které obsahují spoustu interaktivních prvků doplněných o texty, barevné komponenty, podklady či styly textů. Výše zmiňované prvky mohou designérům do určité míry ušetřit čas. 

UXPin nabízí spoustu možností, jak váš projekt navrhovat. Začátky práce s tímto nástrojem ale mohou být poněkud zdlouhavější. Pokud překonáte počáteční rozčarování, věříme, že má program ambice stát se skvělým parťákem na tvoření.

Všechny zpoplatněné plány umožňují nejdříve vyzkoušet bezplatnou zkušební verzi. Následně program nabízí možnost výběru ze tří plánů, které začínají na 29 $/měsíc a končí u 69 $/měsíc.

Proto.io

V nástroji Proto.io lze pracovat a vytvářet návrhy online, přičemž program disponuje velkou škálu funkcí.

Za zmínku stojí, že při tvorbě prvotních wireframů poskytuje designérům  k dispozici širokou paletu základních prvků, ale také pokročilých šablon (templatů), což může a nemusí ušetřit čas.

Záleží, jak s těmito funkcemi pracujete a zda je efektivně využíváte. Nástroj pera zde však nenajdete. Pokud si designér potřebuje vytvořit vlastní prvek či ikonu, import z jiného programu je rychlý a snadný.

Zorientování se v tomto nástroji, hodnotíme ze všech zmíněných nástrojů jako nejobtížnější, zejména pokud je řeč o prototypování. Na což je program paradoxně zaměřený. Co naopak vyzdvihujeme, je přehledné navrhování mobilních aplikací.

Pokud navrhujete mobilní aplikace, navrhujeme, abyste si zkusili Proto.io. Svoje prototypy můžete vystavit v sekci Proto.io Spaces, kde je mohou ostatní hodnotit a psát vám jejich názory. Získáte tak zpětnou vazbu ještě před tím, než začnete wireframy nebo prototyp testovat na zákaznících.

Nástroj si můžete vyzkoušet zdarma po dobu 15 dní a následně se rozhodnout pro zvolení konkrétního plánu. Cenové balíčky se pohybují v cenové relaci od 24 $/měsíc a šplhají až do výše 160 $/měsíc.

Nejlepší UX nástroj pro vás

Chtěli byste vědět, jaké UX aplikace považují za nejlepší čeští UX a UI designéři? Příští týden vydáme jejich recenze.

Ale lidi zajímají i vaše zkušenosti.

Napište nám prosím do komentářů pod článek nebo na sociální sítě, jaké UX nástroje na wireframy a prototypy používáte vy, proč a jaké s nimi máte zkušenosti.

Tereza Králová

Tereza Králová

LinkedIn | @

Komentáře

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Podívejte se, jak vám pomůžeme vydělat více peněz ->

Už jen krůček a pomůžeme vám vydělávat.

Domluvit konzultaci

Chcete být chytřejší?

Vyplňte prosím svojí pracovní e-mailovou adresu a my vám každé dva týdny pošleme newsletter s tím nejlepším obsahem.