Přejít k obsahu  Přejít k hlavnímu menu

Firemní weblog poradenské společnosti H1.cz

Zobrazit všechny články
Zpět

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. 

  • Shaman
    16. 07. 2009 / 10:52

    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 :-)

  • Jiří Šebek
    16. 07. 2009 / 10:53

    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.

  • Michal Vitásek
    16. 07. 2009 / 12:26

    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.

  • TouSt
    16. 07. 2009 / 13:04

    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.

  • Marek Rolný
    16. 07. 2009 / 13:56

    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ý.

  • Martin Kopta
    16. 07. 2009 / 14:58

    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.

  • Filosof
    16. 07. 2009 / 17:11

    Nechcete udělat seminář „Tvorba wireframů s Axure RP“? :-)

  • Václav Štrupl
    16. 07. 2009 / 17:14

    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. ;-)

  • Jakub Peřich
    16. 07. 2009 / 18:19

    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

  • Shaman
    16. 07. 2009 / 18:49

    [7] [8] Řekl bych, že poptávka nebude valná, Axure má výborně zpracovaný online manuál.

  • Ondra Flidr
    17. 07. 2009 / 09:29

    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.

  • Michal Illich
    17. 07. 2009 / 16:23

    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.

  • Petr Král
    17. 07. 2009 / 16:25

    Také používáme Axure RP a jsme spokojeni.

  • Michal Pařízek
    17. 07. 2009 / 17:54

    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.

  • Petr
    17. 07. 2009 / 20:30

    Používám papír, ale jen tak pro sebe.

  • Milhaus
    20. 07. 2009 / 22:06

    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.

  • Luděk Černocký
    21. 07. 2009 / 15:54

    Axure. Pravda ale je, že jsme vyzkoušeli asi jen dva jiné programy a rovnou zůstali u Axure:)

  • Ladislav Šulc
    06. 08. 2009 / 11:33

    Axure jednoznačná jednička. Doporučujeme.

  • Mirek Rojek
    12. 08. 2009 / 16:11

    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.

  • Richard Dobiáš
    25. 08. 2009 / 19:19

    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.

  • Petr Havlík
    26. 08. 2009 / 11:08

    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.

  • Richard Dobiáš
    26. 08. 2009 / 23:46

    [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í.

  • Michal Franěk
    10. 09. 2009 / 16:32

    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.

  • Marcel Simonides
    11. 09. 2009 / 09:07

    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/.

  • Zdeněk Michálek
    22. 09. 2009 / 13:44

    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ší).

  • Berka
    11. 10. 2009 / 00:07

    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í.

  • Berka
    11. 10. 2009 / 00:09

    Ještě dodám, že JustInMind je pro Mac (zatím betka) i Win.

  • Houston Gun Trust
    05. 08. 2013 / 16:36

    Great post guys! This was helpful and it’s nice to see that other people see the importance of wireframes.

  • San Antonio Bankruptcy Lawyers
    03. 10. 2013 / 09:30

    This is exactly what I am looking for. Thanks for the information. Glad to have stumbled upon your website.

  • Eric
    04. 04. 2014 / 05:25

    I completely agree with you. This is a great analysis. I really appreciate your thoughts on the subject.

  • Karen
    15. 04. 2014 / 15:22

    Ja som teraz premýšľal, ako vytvoriť drôtový model s paralaxy a ďalšími efekty pomocou HTML5. Máte nejakú radu, prosím?

RSS feed komentářů k tomuto článku
RSS feed komentářů ke všem článkům



(nebude zveřejněn)



Položky označené * jsou povinné
Vaše osobní údaje jsou u nás jako v bavlnce, nikomu je nedáme. Informujte se zde.