Při mé práci potřebuji velmi často připravovat WireFramy – česky drátěné modely – webových stránek či aplikací. Kromě návrhu interface, tedy jak bude aplikace vypadat, je pro mě také často důležité ukázat funkční prototyp. Protyp umožňuje ukázat celou řadu interakcí jako je například přejetí myši, kliknutí a otevírání jednotlivých stránek – je tak možné navrhnout třebas i celý e-shop.

Osobně používám nástroj Axure RP Pro, nově ve verzi 6. Používám ho už téměř třetím rokem a jsem s tímto nástrojem velmi spokojený. Nicméně je potřeba se čas od času podívat, jestli není k dispozici nějaký jiný nástroj, který by byl lepší nebo levnější.

A tak jsem se pustil do testování 8 nástrojů pro tvorbu WireFramů a prototypů.

Disclaimer: Testování jsem se snažil postavit co nejvíce objektivně. Nicméně jsem velmi silně ovlivněn nástrojem Axure RP, který jsem aktivně využíval.

Navíc, každý máme jiné požadavky a očekávání od těchto nástrojů.
Nemusíte tedy vždy s mým verdiktem souhlasit.

Jaké nástroje jsem testoval?

Z dostupných nástrojů a na doporučení od ostatních jsem dal dohromady seznam těchto nástrojů:

Níže najdete stručný popis a moje zhodnocení každého nástroje.

Balsamiq Mockups

Velmi zajímavý nástroj. Pracuje se s ním dobře a má celou řadu zajímavých věcí. Online verze je na mě trochu pomalá. Export na hodně jednoduché bázi, naštěstí ale nabízí i PNG. Nástroji chybí pokročilé funkce a není možné s ním dělat prototypy.

Balsamiq Mockups se hodí zejména pro malé jednostránkové projekty, kde stačí navrhnout interface. Pracuje se s ním velmi dobře a rychle. Obrovskou výhodu vidím především v možnosti návrhu skicy online a to zadarmo.

Velmi mě potěšila předpřipravená řada často používaných prvků (video, záložky, stránkování, prvky iPhonu, apod.), díky kterým mohu rychle a snadno připravit hezky vypadající interface.

FlairBuilder

Konkurence schopný nástroj pro Axure. Knihovna je velmi dobrá. Umožňuje dělat prototypy včetně pokročilejších funkcí jako je např. hover efekt. Dynamické panely sice nejsou k dispozici, ale je možné zobrazovat a skrývat objekty. Je zde práce s vrstvami. Škoda, že zde nefungují klávesové zkratky – zpomaluje to práci. A navíc neumím pracovat s těmi stále vyskakujícími okny s vlastnostmi objektů. Prostě otravují život. Také se mi nepodařilo pořádně objekty zarovnat – vskutku zvláštní.

S tímto nástrojem se dá pracovat dobře, ale na můj vkus je trochu pomalý a neohrabaný. Nicméně připravíme velmi pěkné a funkční prototypy většího rozsahu s cenově dostupným nástrojem.

K dispozici je řada knihoven. Možnost spolupráce s kolegy. Výsledný prototyp je možné ukázat přes speciální viewer – dostupný zdarma. Oproti Axure má pěkně řešené boxy se záložkami: nemusím nic složitě připravovat. Export je možný do PNG, ale je problematický u složitějších projektů: špatně vypadají skryté prvky, apod.

Lumzy

Nástroj je pouze online, za to zcela zdarma. Pojetí je trochu netradiční – většina prvků vypadá jinak, než jsme u WF zvyklí.

I přes výbornou cenu (zdarma) si neumím představit používat tento nástroj v praxi a prezentovat v něm projekt klientovi. Díky ceně může být vhodný pro nízkorozpočtové projekty a organizace.

Umožňuje spustit částečně interaktivní stránku v simulaci (např. rozbalení selectu, apod.) včetně procházení mezi stránkami.

App Sketcher

Pěkný panel nástrojů se vším, co je potřeba. Zaujal mě kontejner, do kterého mohu vkládat objekty. Prototyp se spouští přímo v mém prohlížeči. Tento je pak také možné jako jediný druh exportu získat v archivu (zip) v podobě webové stránky. Z interakcí je možné klikat, ale už chybí např. hover efekt.

Dražší nástroj, který mi nesedl. Chování nástroje je jiné, než očekávám a to mě děsí. Jinak má nástroj docela velký potenciál.

S nástrojem se mi divně pracovalo: asi jsem si nezvykl na chytání objektů, absenci seskupení objektů a možnosti jinde, než bych je čekal. A některé věci do WF prostě nepatří: Google mapa, YouTube video, apod.

iPlotz

Online FLASHový nástroj, který běží opravdu solidně. Kromě WF nabízí nástroj i další záležitosti k řízení projektu (termíny, apod.). V nabídce je hodně funkcí včetně vrstev (ála Corel). Stránek je možné připravit libovolně, ale dynamické prvky nenajdeme. Skvělá je možnost ukázat projekt online na webu (dokonce jen zadám adresy pro rozeslání linku). Export je možný do PNG, PDF a HTML.

Celkově velmi schopný nástroj, ale já se nemohu se smířit s tím, že jsem nenašel obdélník – ten já používám často! Nástroj jde za potřeby klasického WF, což může někdo ocenit.

Nepodařilo se mi najít obyčejný obdélník, škoda. Po seskupení už není možné editovat jeden objekt ve skupině, což mi opravdu vadilo. A trochu jsem se ztrácel v seznamu nástrojů – dlouhý a malým písmem.

Serena Prototype Composer

Nástroj se mi nepodařilo na webových stránkách vůbec najít. Podle demo videa se však nejedná přímo o nástroj pro tvorbu WF, ale spíše o modelování projektu (průběh, apod.)

Bohužel jsem nestáhl a nemohl tak nástroj vyzkoušet.

Protoshare

Měl jsem velký problém s editací textu: přijde mi to jako hrozně nešťastný způsob. Text edituji velmi často a také potřebuji nastavovat libovolnou velikost, což zde nejde. Umí pracovat s templates a masters. Nástroj nabízí řadu neužitečných prvků jako je box s FLASHem nebo RSSbox. Další prvky WF jsou řešeny nestandardně.

S nástrojem jsem se vůbec nenaučil pracovat. Neskutečně hloupá práce s textem mi vadila už od začátku a nebyl jsem schopen shlédnout ani tutoriál do konce, jak byl nudný.

Je zde i nějaký náznak práce s dynamickými panely, bohužel jsem nepochopil, jak fungují. Evidentně by mělo být možné je zobrazovat a skrývat.

Pencil project

Nástroj je zcela zdarma a je možné ho používat i jako plugin do Firefoxu. Export je možný do PNG, PDF i Wordu. Problémem není vytvořit ani šablonu. Částečně podporuje i klávesové zkratky.

Užitečný nástroj pro malé projekty. Pokud potřebuji v rychlosti udělat návrh interface a nejsem online, tohle je ten správný nástroj.

Bohužel nástroj neumí nic interaktivního (ani záložky, selecty, apod.).

Justinmind Prototyper

Bohužel se mi nepodařilo nainstalovat a otestovat. Časem bych ještě rád otestoval. Vypadá na velmi silnou konkurenci Axure.

Axure RP Pro 6

Profesionální nástroj na tvorbu prototypů. Obsahuje snad vše, co můžeme při prototypování potřebovat. Nástroj jde mnohem dále a nabízí i možnost „programování“ nad prototypem (přenos proměnných, logické vyhodnocování, apod.). Výborná je možnost vygenerování dokumentace přímo do Wordu. Export je možný hned do několika typů obrázků.

Jestli to myslíte s tvorbou prototypů vážně, pak musíte obětovat těch pár set dolarů do tohohle nástroje. Pro jakékoliv větší či náročnější projekty je jasnou volbou.

Axure je velmi svižný, pracuje se s ním rychle. Komfortu přispívá i velmi pohodlné ovládání klávesovými zkratkami. Sketchy design je volitelně nastavitelný (včetně „úrovně kreslenosti“) a vypadá velmi dobře.

Srovnávací tabulka

Vybrané položky pro všechny nástroje jsem srovnal v tabulce:

Závěrem

Překvapilo mě, kolik je k dispozici nástrojů na tvorbu WireFramů. Bohužel jejich kvalita a použitelnost je často vhodná jen pro „sranda projekty“ velmi malého rozsahu bez požadavků na cokoliv náročnějšího.

Pokud potřebujete kvalitní nástroj pro tvoru WireFramů, sáhněte po Axure RP.

Jako alternativu bych doporučil Flair Builder, který je použitelný pro většinu středně velkých a ne moc náročných projektů. Jeho poměr cena / výkon je velmi příznivý.

A konečně, pokud si potřebujete jenom „uskicnout“ jednoduchý interface, zkuste desktopový Pencil project nebo online nástroj Balsamiq Mockups (pozor: u free verze obtěžuje často vyskakující tabulka).