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

Jaké nástroje používají nejlepší UX designéři pro tvorbu wireframů

Jaké nástroje používají nejlepší UX designéři pro tvorbu wireframů

Pokud se zeptáte těch nejlepších českých UX designérů, jaký nástroj zaměřený na tvorbu wireframů a prototypů považují za nejlepší, dost pravděpodobně vám každý odpoví jinak.

V předchozím článku jsme udělali recenzi UX nástrojů na wireframy a prototypy. Tentokrát jsme oslovili nejlepší české UX designéry, kteří nám sdělili své zkušenosti s každodenním používáním UX nástrojů. Které považují za nejlepší? A proč?

Marek Čevelíček

Marek Čevelíček působí jako UX designér a také CEO ve společnosti Liquid design. K tvorbě wireframů a prototypů ve firmě využívají kombinaci dvou nástrojů. Jedním z nich je Moqups.com, který považují za hlavní a nejvíce používaný nástroj pro vytváření wireframů.

„Vyhovuje nám cena, snadné používání, má dobře nastavitelné komponenty, je v cloudu, takže se dá na prototypu pracovat doma, přejít do kanclu a pracovat dál. Hezky funguje sdílení prototypu a je vyřešeno přehledné komentování, což i pro klienty je super. Nevýhoda je, že prototypy nejsou responzivní a trochu krkolomně se navrhují interakce. Naštěstí často nepotřebujeme moc interaktivní wireframy.“

Dobře jim slouží i nástroj Adobe XD, který využívají k tvorbě hi-fidelity prototypů. Kladně hodnotí především kompatibilitu nástroje pro platformu Windows, rychlost programu i pro tvorbu větších prototypů a také základní verzi zdarma. Po instalaci mohou program využívat i vývojáři pro export assetů a manipulaci s prototypem bez nutnosti kupovat plnou licenci.

Jan Řezáč

Jan Řezáč, společně se svým týmem z House of Řezáč, dříve využívali ke své tvorbě wireframů Axure, ale aktuálně od wireframů opouští. 

„Místo wireframů skicujeme na workshopech spolu s klienty. Buy-in klienta díky tomu přichází přirozeně jako součást workshopu. Skici digitalizujeme a vytváříme z nich elektronické-papírové prototypy, které je možné testovat. Našim výstupem je pak nejčastěji přímo grafický návrh webu nebo aplikace.”

Picards – Vojta Mikula, Honza Smékal a Michal Mrskoč

UX tým z Picards, konkrétně Honza Smékal, Vojta Mikula a Michal Mrskoč se primárně zabývají návrhem wireframů a funkčních prototypů. Při své práci využívají dva nástroje: Axure a Invision. 

Prozradili nám hned několik důvodů, proč u nich vítězí Axure:

  • Pro tvorbu low-fi wireframů je po stránce rychlosti a efektivity práce nejlepší ze všech nástrojů, které jsme vyzkoušeli,
  • dají se v něm vytvářet komplexní prototypy, takže když občas potřebujeme něco rozhýbat, nemusíme přeskakovat mezi nástroji,
  • umí vytvořit návrh v responzivním designu,
  • umožňuje týmovou kolaboraci – tohle by teda mohl umět i lépe (ahoj Figmo), ale dokážeme s tím žít (resp. je to vyváženo body výše)
  • není to grafický editor a moc toho po této stránce neumí, což je fajn, protože to nesvádí úplně zabrušovat do vizuálních detailů.

K dalšímu nástroji, ve kterém občas vytváří rychlé prototypy, řadí Invision.

„Je to trochu jednodušší než v Axure, ale používáme ho pro tenhle účel méně a méně, protože se snažíme držet vše pohromadě. Nicméně Invision používáme běžně pro spolupráci a iterace nad grafikou anebo wireframy s klienty.“

Kromě těchto dvou nástrojů si vyzkoušeli i Figmu, která ale využití v jejich týmu nenašla. 

Honza Smékal vysvětluje proč: „Dokážu si docela dobře představit v ní pracovat někde na produktu, ve větším týmu a s design systémem, kde návrh stavím víceméně z hotových komponent. V té chvíli využiji parádní kolaboraci a skvěle řešený handoff. A protože nic nestavím „od píky”, mi vlastně tolik nevadí, že je to grafický editor. Ale pro naši práci bych ji nevolil.”

Šimon Jůn

Šimon Jůn, UX a product designér, ke své práci nejraději využívá Figmu. A to hned z několika důvodů. Plusové body u něj získává především za možnost kolaborace celého týmu v prostředí cloudu.

Je běžné, že navrhuji wireframy jedné stránky mezitím, co grafik připravuje UI další stránky a kodér s programátorem si z Figmy exportují styly, aby mohli pracovat na dalších částech projektu. Vše je automaticky synchronizované, takže už žádné soubory s názvy fina-final-version-2 a podobně.“

Pochvaluje si také velmi intuitivní ovládání pro tvorbu prototypů a rychle viditelné provedené změny.

„Figma má úžasnou mobilní aplikaci, kde se změny co děláte na PC hned propisují do aplikace. Toto se mi už několikrát osvědčilo jako ideální řešení na meetingy se stakeholdery, protože jste schopni dělat rychlé úpravy designu mobilní aplikace/mobilního webu a klient to hned vidí a může reagovat. Žádný jiný nástroj tuto funkci nemá (nebo o ní nevím) u Adobe XD to vždy muselo stahovat celý soubor znovu atd.“

Roman Maštalíř

Roman Maštalíř, CEO ve společnosti Eventee, ke své práci hledal nástroj, který mu umožní efektivně navrhovat své projekty. 

“Jako produktový manažer jsem hledal aplikaci, která mi umožní rychle načrtnout obrazovku aplikace a poslat k realizaci týmu. Nejsem designér, proto pro mne bylo důležité najít řešení, které obsahuje velkou databázi designových prvků.“

Výsledky jeho bádání můžeme shrnout následovně: po několika letech po boku aplikace Balsamiq přešel k programu Mockitt, který v omezené míře funguje i v bezplatné verzi. 

Proč zrovna Mockitt?

„Mockitt mi umožňuje velmi rychle a efektivně vytvořit prototyp pro jednotlivé obrazovky a funkce naší aplikace eventee.co. Je to ideální startovací bod pro další diskuzi v týmu nebo jako podklady pro skutečného grafika. :) Zejména v dnešní době, kdy všichni pracujeme z domu, jsou jednoduché nástroje pro asynchronní komunikaci v rámci týmu velmi důležité.“

„Tento nástroj uživatelům nabízí opravdu širokou škálu grafických prvků a sad ikon pro webové i mobilní aplikace,“ dodává Roman Maštalíř. Díky nim je pro něj práce v Mockittu velmi rychlá a jednoduchá. 

Místo navrhování jednotlivých tvarů a prvků jednoduše vytvářím wireframy z existujících elementů a obratem pošlu týmu.“

Robert Němec

K používání UX nástrojů se vyjádřil i Robert Němec, ředitel naší strategické reklamní agentury RobertNemec.com.

Jakožto odchovanec UXPinu na návrhy wireframů používá právě tento nástroj. Bohužel UXPinu se podle něj stalo to stejné, co mnoha jiným službám: začali přidávat další a další funkce. Díky tomu se v něm dnes špatně orientuje, křivka učení je dost dlouhá a práce s ním zdlouhavá. 

Na druhou stranu, jeho funkce jsou dnes tak pokročilé, že jej můžete skvěle používat na prototypování. Prototypování znamená, že vytvoříte něco, co se chová velmi podobně, jako reálný funkční web. UXPin má snad všechno, na co si jen vzpomenete.

Za to si ale také vezme hodně. Jeho cena začíná na 24 dolarech na uživatele a měsíc.  

Nedoporučuje používat UXPin na tabletu.

„Jednou jsem musel dělat složité wireframy do jedné finanční instituce, takže to muselo „nějak vypadat“. Přelétával jsem mezi ostrovy kdesi v Indonésii a měl jsem s sebou jenom tablet. Práce na tabletu v UXPinu byla otřesná a trvalo mi to minimálně 2x delší dobu než standardně, možná i 3x. Pokud si to dobře pamatuji, časem jsem to vzdal a nakreslil to v mobilním PowerPointu (teď mě asi někdo ukamenuje :-)). PowerPoint mimochodem občas používám na bleskové náčrtky v notebooku, iPadu i na mobilu.“

A co stará dobrá tužka a papír? Odzvonilo již této metodě? 

„Pokud potřebuji běžně rychle nakreslit wireframe, používám doslova tužku (v horším případě propisku) a papír. Kolegové jsou na to zvyklí. Klienti se občas vyděsí, že jim pošlu fotku nafocenou mobilem.“

V poslední době začal experimentovat také s Figmou. „Je rychlá. Prostě hned vytváříte,“ zmiňuje pro něj hlavní výhodu.

Základní orientace je podle něj lepší ve Figmě, pokročilejší ale v UXPinu. „Ve UXPinu máte problém se zorientovat zpočátku, ve Figmě to vypadá zpočátku vše jednoduše. Ale když chcete najít něco pokročilejšího ve Figmě, je to pěkně schované.“

O Figmě Němec tvrdí, že má divnou logiku. „Logiku UXPinu pochopíte hned. Figma sice vypadá jednoduše, ale když chcete vytvořit něco složitějšího s mnoha viewporty, má, alespoň pro mne, Figma divnou logiku. Musíte si projít dlouhá videa, abyste ji pochopili.“

Dost jej ve Figmě štve práce s ikonami. Zatímco v UXPinu je ohromná databáze ikon zdarma, do Figmy musíte ikony složitě instalovat a za ty lepší ještě platit.

Figma také podle něj skvěle pracuje s mobilními verzemi. Nejenom, že vidíte, jak bude váš web nebo aplikace vypadat na různých mobilních telefonech. Ale dokonce si můžete zvolit, jak bude váš web vypadat na zlatém iPhonu 11 Pro Max a jak na stříbrném.

„Stále mám s Figmou omezené zkušenosti. Ale přijde mi, že je skvělá, když chcete něco rychle vytvořit. Pro kreativní duše je jako dělaná. Wireframe tam uděláte bleskově. Ale pokud si chcete s něčím do detailu hrát, tedy vytvářet mockupy nebo prototypy, je lepší UXPin.“

Mockupy a prototypy jsou propracovanější než wireframy. Mockup je statický, kdežto prototyp je dynamický.

Robert Němec ale používá Figmu i pro rychlé návrhy jiných návrhů. „Ve Figmě třeba rychle navrhnete prezentaci a pak to předáte grafikovi, aby ji udělal v PowerPointu. Nebo můžete udělat bleskově skicu banneru. Nebo třeba vytvořit skicu newsletteru.“

Na závěr jsme ho poprosili o stručné shrnutí, kdy nástroj považuje za nejlepší. Používá od začátku až do konce každého projektu pouze jeden program?

„Pokud bych měl jenom jednodušší weby nebo wireframy, používal bych Figmu. U složitějších webů nebo wireframů bych si to nejprve rychle navrhl ve Figmě. A pak návrh dodělal v UXPinu.

Ale jak říkám, moje zkušenosti s Figmou jsem zatím jenom omezené.“

Proč používat dva programy? Jak říká staré heslo UX designérů: „Wireframe opravíte kliknutím myši, opravit web bude práce pro celý tým.“ Takže je lepší promýšlet a opravovat věci od začátku – i za cenu dvou programů.

Jeho kolegové-designéři v agentuře RobertNemec.com používají na tvorbu wireframů Adobe XD. On sám však jeho příznivcem není, nicméně akceptuje fakt, že spolupracovníkům vyhovuje.

„Když musím v Adobe XD něco komentovat, přijde mi, že UI  a vlastně i UX je tam mizerně udělané a samotný návrh zabírá zbytečně málo místa a serepetičky kolem naopak zbytečně moc.

U Figmy se naopak můžete plně soustředit na to, jak to bude vypadat – a ještě si můžete vybrat, jak to bude vypadat na různě barevných iPhonech. Ale jak říkám: Pokud to jenom trochu jde, akceptuji nástroj, se kterým se mým kolegům pracuje nejlépe.“

Jaký nástroj je nejlepší pro vás?

Napište nám prosím do komentářů pod článek anebo na sociálních sítích.

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.