Naše číslo jedna pro tvorbu wireframes
Jako internetová poradenská firma často potřebujeme vytvořit model
stránky, tzv. wireframe.
Dříve jsme k tomuto účelu používali Microsoft Visio, součást
kancelářského balíčku MS Office, později pak přešli na Axure RP. Od té
doby už ale uplynul nějaký čas, a protože chceme mít jistotu, že
používáme nejlepší dostupnou aplikaci, rozhodli jsme se otestovat
i další alternativy. Výsledky našeho zkoumání teď dáváme k dispozici
i vám.
Kolega Michal Pařízek vyzkoušel celkem sedm nástrojů, z nichž pět je
zpoplatněných a dva jsou k dispozici zdarma. Zajímavostí také je, že se
na seznam relativně sofistikovaných nástrojů dostala jedna čistě webová
aplikace a program, který lze dokonce používat jako rozšíření
prohlížeče Firefox. Teď ale k tomu nejdůležitějšímu – kdo
je vítěz?
Po zralé úvaze jsme se rozhodli zůstat u Axure RP. Relativně vysokou cenu
tohoto software (přes 10 000 Kč za licenci) totiž kompenzuje celá řada
vlastností, které jsou pro naši práci důležité. Patří mezi ně
především:
- Specializace na návrh webových stránek.
- Široká škála užitečných rozšíření (widgetů), která umožňují
dělat interaktivní návrhy (klikatěný kalendář, drop-down menu,
formuláře apod.).
- Propracované možnosti exportu – od PDF, přes obrázky až po sadu
odkazy provázaných HTML stránek.
- Možnost vygenerovat k wireframům detailní specifikaci obsahující popis
jednotlivých součástí stránky, komentáře apod.
- Třešničkou na dortu je pak možnost přizpůsobit šablonu specifikace,
takže z wireframu můžete vyexportovat v podstatě hotový dokument pro
klienta.
Kromě Axure RP jsme vyzkoušeli:
Pozornější z vás si možná všimli, že na seznamu chybí OmniGraffle,
software dominující na jablíčkářské platformě Mac OS X. To je pravda,
ale protože jsme rešerši prováděli především pro interní potřeby a
v H1.cz všichni používáme Windows, logicky jsme OmniGraffle vynechali.
Rádi si však přečteme váš názor v komentářích.
Stáhněte
si celou rešerši (formát PDF, velikost 1MB), a pokud vám přijde
užitečná, pošlete ji i svým známým.
Autorem článku je Václav Štrupl.
Také Axure používám každý den a také na něj nedám dopustit. Wireframy by člověk vytvořil i jinak, ale pro generování prototypů je myslím nenahraditelný. I když je dražší a má své mouchy, za ty peníze rozhodně stojí.
A nedávno jsem jej využil i při tvorbě rodokmenu. Při představě, že ladím zobrazení stromu s cca 300 osobami ve Photoshopu, mě jímá hrůza :-)
Díky za zprávu. Také používáme Axure, takže se hodí vědět jak je to s možnýma alternativama.
Tak jo, přemluvili jste mě :-) Dosud jsem žádný program na wireframy nepoužíval, ale nyní se nad sebou zamyslím a minimálně je vyzkouším. Díky.
Nepoužívám Windows, takže jsem po čase zůstal u Pencil Project a doplňuji ho FreeMindem. Pro mé potřeby zatím plně dostačující. Jinak bych volal taktéž Axure.
Používáme www.smartdraw.com. V něčem není úplně ideální ale stačí nám. Navíc v ně jde velmi rychle dělat spoustu dalších užitečných věcí. Je placený.
Na Axture je skvělé, že s dobrou knihovnou se z wireframů stane funkční prototyp se specifikací v čitelné a konzistentní formě.
Těším se, až před Vánocemi vyjde verze pro OSX.
Nechcete udělat seminář „Tvorba wireframů s Axure RP“? :-)
Díky všem za komentáře! Podle vašich ohlasů vidím, že Axure je dobrá volba.
Filosofe, máš přehled o poptávce po takovém semináři? Placené individuální školení v případě zájmu samozřejmě rádi připravíme. ;-)
Já používám na webové wireframes iplotz.com – je to startup projekt, takže občas blbne, ale jinak je fajn protože je specializovaný pro tvorbu webovek.
Klady: Specializace na webové projekty – hodně widgetů Má i šablony pro iphone aplikace cena (15 dolarů měsíčně nebo 75 za licenci) freemium model – základní verze zdarma SaaS
Zápory chybí některé funkce sem tam nějaká chyba
[7] [8] Řekl bych, že poptávka nebude valná, Axure má výborně zpracovaný online manuál.
Ja pouzivam Balsamiq Mockups a nedam na nej dopustit. Sice je pravda, ze vysledne wireframy maji svuj specificky vzhled, ale aspon si je klient nesplete s grafickym navrhem.
Hezké srovnání.
Já používám od včerejška Balsamiq – zatím vše co jsem od něj chtěl, tak splňuje, funguje pod Linuxem a cena je také dobrá.
A mimochodem, ta jednu nevýhoda („kontroverzní vzhled wireframů“) se dá odstranit jedním kliknutím (na volbu Use system fonts). Nebo ji můžete chápat jako výhodu – z wireframe je patrné, že jde o wireframe.
Také používáme Axure RP a jsme spokojeni.
Nejprve bych také všem chtěl poděkovat za komentáře a podělení se se svými zkušenostmi.
Nástrojů na tvorbu wireframů a jiných návrhů je spousta. Přiznám se, že než jsem se do této studie pustil, tak jsem nečekal, že jich existuje tolik.
Pro ty, kteří by chtěli poznat ještě další nástroje, nabízím tuto rešerši – https://c2.com/cgi/wiki?…. Nástroje jsou ale jen stručně okomentovány.
[9] Díky moc za tip. Vypadá to, že je to podobně zdatné jako Protoshare, ale o dost levnější. Časem, až opraví mouchy, jak píšete, by z toho mohl být velice dobrý online nástroj. Určitě vyzkouším.
[12] Té změny vzhledu jsem si vůbec nevšiml. Díky za upozornění. Souhlasím s Vámi, že se nemusí v každém případě jednat o nevýhodu. Někomu se tento vzhled může líbit. Setkali jsme se ale s tím, že někteří klienti preferují ten klasický (reálný) vzhled.
Používám papír, ale jen tak pro sebe.
Používám Balsamiq Mockups, protože je mohu pro návrh nekomerčních stránek používat zdarma, a takové jsou zatím veškeré mé práce. Silně uvažuji, že si je v případě komerčních zakázek koupím – líbí se mi jednoduchost ovládání a reakce vývojářů na uživatelské požadavky.
Axure. Pravda ale je, že jsme vyzkoušeli asi jen dva jiné programy a rovnou zůstali u Axure:)
Axure jednoznačná jednička. Doporučujeme.
Hezké srovnání, díky. Protože používáme ve firmě Mac OS X, tak jsme zkoušeli různé alternativy. Ale jestli vyjde Axure i pro jabka, jak píše Martin, tak se moc těšim.
Na jednoduché náčrty wireframe mi dosud stačilo Visio. Ale pokud jde o prototypy, pak se nejlepší zdá Axure. Umí některý z nástrojů pracovat dobře s dynamickým zobrazováním obsahu? Mám na mysli konkrétně zobrazení (klasické JS vyjetí) obsahu po zaškrtnutí nějakého tlačítka tak, že se veškerý další obsah posune až pod nově zobrazený dynamický obsah. S tím souvisí i nutné roztažení obalujícího bloku. V Axure nemohu přijít na způsob, jak bych dynamicky pomocí Interactions vyřešil roztažení výšky obalujícího bloku a posun ostatního obsahu níže. Díky za tipy.
Richarde, na adrese https://klient.h1.cz/axure/ najdete vypracovaný wireframe, který odpovídá na Vaši otázku dynamického měnění obsahu.
Řešení je převzato od spolenčosti A Clean Design, která připravila a zdarma zpřístupnila kníhovnu widgetů pro Axure (https://www.acleandesign.com/…-library-v2/).
Samotná realizace dynamického měnění obsahu je ale poměrně kostrbatá a především zdlouhavá (řeší se pomocí několika OnClick akcí).
V H1.cz jsme ale toho názoru, že wireframy by měly být spíše ilustrativní a měly by především reflektovat prioritu obsahu prvků dané stránky.
Pokud to není vyloženě přání klienta, veškerou interaktivitu „pouze“ slovně popisujeme. Jako mnohem efektivnější se nám jeví rychlé nakódování html prototypu, který se poté v iteracích upravuje a ladí tak, aby odpovídal zadání.
Ušetří se tím spousta práce jak při kreslení wireframů, tak i při následné tvorbě samotného webu.
[21] Děkuji, Petře. Přesně tohle jsem hledal. Jsem stejného názoru, že by často bylo rychlejší vytvořit ručně html s JS. Ale potřeboval jsem wireframe a prototypy pro uživatelské testování, takže jsem hledal co nejvíce automatizovaný způsob. Vyzkouším knihovnu widgetů, zda z toho dostanu rozumně efektivní řešení.
Hezký článek. Zkoušel jste někdo používat Screen Architect (rošíření pro Enterprice Architect)? Nedávno jsem si stáhl trial a zatím s tím trochu bojuju. Zajímaly by mě postřehy z praxe.
Před dvěma lety jsme zakoupili software Petra (https://petra.cleverlance.cz/). V některých věcech jsme se nevyznali a tak jsme žádali u Cleverlance nějaké rady – na co je toto a co dělá toto apod. Samozřejmě jsme tím mysleli, že přijedeme na placené školení. Dostali jsme odpověď, že je možné pouze dvoudenní školení za 3000,– na hodinu :-). Takže jsme to zakrátko přestali používat. Nyní používáme především tužku, papír a gumu, což nám přijde jako nejrychlejší metoda. Možná i proto, že jsme dělali spíše jednodušší projekty. Pokud jsme měli něco složitějšího použili jsme na tvorbu prototypu https://www.wysiwygwebbuilder.com/.
Axure – prvních pár dnů nadšení, později ochladnutí (při pokusu drátovými modely zobrazovat modely interaktivních prvků, kterých jsou současné webové aplikace plné), nakonec upuštění od Axure a návrat ke drátovým modelů kresleným ve Visiu nebo prototypováním přimo v HTML (komplikace s dynamickými prvky byly natolik velké, že se Axure stejně používalo jako hloupé kreslítko – a na to je Visio prostě nesrovnatelně pohodlnější).
Taky jsem hledal v čem dělat prototypy aplikací a webů a dlouho vedl Axure, ale pak to vyhrál JustInMind (https://www.justinmind.com/). Je novější, líp se ovládá a zjevně se vyvarovali nedostatků Axure. Zatím naše zkušenosti nejsou bohaté, ale něco jsme už v něm udělali. Je tam dobrá klouzavá licence, což se nám hodí.
Ještě dodám, že JustInMind je pro Mac (zatím betka) i Win.
Great post guys! This was helpful and it’s nice to see that other people see the importance of wireframes.
This is exactly what I am looking for. Thanks for the information. Glad to have stumbled upon your website.
I completely agree with you. This is a great analysis. I really appreciate your thoughts on the subject.
Ja som teraz premýšľal, ako vytvoriť drôtový model s paralaxy a ďalšími efekty pomocou HTML5. Máte nejakú radu, prosím?