852-omnigraffie-mac-2a2x

TIP#135: V čem vytvářet wireframe, dráťáky. A složitější design webů?

Pokud potřebujete navrhovat weby, tak je super vzít papír, tužku a začít malovat. Osobně to dělám stejně většinou jako první krok. Pak to ale většinou potřebujete stejně někomu poslat a ukazovat, takže se hodí, když to do něčeho „přepíšete“ či „překreslíte“. Můžete to ale i přímo chtít malovat v něčem, co k tomu slouží. Což není Powerpoint, Excel ani Word, byť i v těchto věcech často dráťáky, wireframe, najdete.

A není to ani Photoshop či Adobe Ilustrator, byť v tom to půjde docela dobře, pokud si pořídíte nějaké vhodné předpřipravené „objekty“, ze kterých tam budete dráťák budovat. Výhoda těch skutečných řešení pro dráťáky je ale podstatně jiná, ony potom umí pokračovat ještě dále, třeba po vytváření funkčních modelů, na kterých lze testovat.

Co můžete používat pro tvorbů wireframe

Měli byste vědět, že na výběr vždy budete mít mezi online a offline pomůckami.  Dnes navíc řada z těchto pomůcek neslouží jenom pro weby, ale také pro tvorbu mobilních aplikací.

Balsamiq Mockups – balsamiq.com/products/mockups – si můžete vyzkoušet zadarmo a pak koupit. Na výběr máte mezi softwarem do počítače a webovou aplikací. Jak název trochu napovídá, jde o drátové modely, wireframe. A samozřejmě jde ještě dál, nejde jen o jednoduché malování. Lze asi bez obav říci, že tohle je jedno z nejlepších řešení a za 79 dolarů má i velmi příznivou cenu. Jde o offline řešení, tedy aplikaci (Mac, Linux i Windows).

balsamiqDesignerTest
Takhle nějak vypadá wireframe zpracovaný v Balsamiq (zdroj: Blog Balsamiq)

Axure .- www.axure.com – je další aplikace (Mac a Windows) o které také je asi také možné napsat, že patří k tomu nejlepšímu co můžete mít a odpovídá tomu i cena, od 289 do 589 dolarů. Ale získáte komplet všechno, od návrhu dráťáku až po funkční modely (to čemu se říká „mockup“).

LucidPress – www.lucidpress.com – je poměrně hodně komplexní webová (online) aplikace pro tvorbu věcí, které se běžně dělají například v Adobe Illustratoru. Včetně vychytávek, jako je práce více lidí či napojení na Dropbox. Ze stejné dílny je ještě www.lucidchart.com pro tvorbu grafů, ten už ale zadarmo není, a přidávm jen pro úplnost.

Microsoft Visio visio.microsoft.com – je, co se mě týče, jeden z mých oblíbených, dlouhé roky jsem ho používal. Není samozřejmě zdarmo ani součást Office a je to klasická aplikace a jenom pro Windows (od 599 do 999 USD).

Gliffywww.gliffy.com – je online obdoba Visia, tedy alespoň se to o téhle webové wireframovací aplikací tvrdí. A lze ji používa tjak zdarma, tak v pokročilejší podobě za cca 10 USD měsíčně.

Pencil Project pencil.evolus.vn/Default.html – je open source pro Windows a MAc, což znamená i to, že je zadarmo.

Adobe InDesign www.adobe.com/products/indesign.html – je to správnější řešení od Adobe, dnes dostupné jako součást Adobe Creative Cloud nebo samostatně snad ještě ve občas někde ve starší podobě. Offline řešení, pochopitelně, pro MAC i Windows.

Adobe Photoshop www.adobe.com/uk/products/photoshop – samozřejmě pro tvorbu dráťáků použít můžete, ale nedojdete k vytváření funkčních modelů a nemáte k dispozici předpřipravené knihovny prvků. Ale ty si můžete leckde získat, i zdarma. Photoshop samozřejmě zdarma ne.

Adobe Fireworks www.adobe.com/uk/products/fireworks – je další produkt od Adobe, použitelný pro dráťáky. Možná je ale dobré vědět, že stejně jako Photoshop slouží spíše pro webdesign jako takový.

Webflow – www.webflow.com – slouží k budování webů. Až tak, že pomocí prostého Drag&Drop by měl umožnit vybudovat kompletně funkční web, bez nutnosti cokoliv kódovat.

Wireframe.ccwireframe.cc – je zcela minimalistická pomůcka, kterou oceníte třeba jen v okamžiku, kdy potřebujete něco rychlého snadno namalovat. A jde o online službu.

Moqupswww.moqups.com – je další online pomůcka, specializovaná a vytváření modelů, dráťáků a vůbec podobných věcí- s přesahem do toho, že to opravdu umí vytvořit funkční model.

Pidocowww.pidoco.com – je webová aplikace, placená měsíčně (9 až 59 dolarů) a podle toho co se o něm píše, je hodně dobrá (až tak dobrá, že ji srovnávají s Axure). Výhoda online aplikací je tady zjevně viditelná – můžete si hotové funkční modely sdílet s klienty přímo online a testovat.

iPlotzwww.iplotz.com – je tak trochu zvláštní online služba použitelná jak zdarma, tak v pokročilejší podobě za peníze. Pohání ji totiž Flash.

Protoshare www.protoshare.com – asi bude vynikat v online kolaboraci, alespoň to o této online pomůcce píší. Cena není příliš příznivá, 290 až 590 dolarů.

Penultimate evernote.com/penultimate  – je produkt od Evernote a slouží pro iPad. A je použitelný jako nástroj pro dráťáky. Ostatně, pro tablety bychom asi našli ještě řadu dalších nástroj.

omnigraffie-mac-12x
Omnigraffie toho umí daleko víc, než jenom drátové modely, wireframe (Zdroj: Omnigraffie)

OmniGraffie www.omnigroup.com – je další takový nástroj, ale existuje jak pro iPad, tak pro MAC, stojí 49 USD a bývá pozitivně hodnocen, zejména z doby kdy to byla čistě počítačová aplikace. A co hlavně, tohle není jenom pro dělání dráťáků, ale i řady dalších věcí.

Mockflowwww.mockflow.com – je online aplikace, použitelná jak zdarma, tak za 69 USD ročně s pokročilejší funkčností. Umí sdílet funkční prototypy.

Frameboxwww.framebox.org – je zdarma dostupné online řešení a jakkoliv toho asi neumí záplavu, může se vám hodit.

Justinmind www.justinmind.com – je další online řešení, placené, ale zato se slušnou knihovnou prvků.

NinjaMock – ninjamock.com – doporučil po vydání tipu Václav Vaněk a píše, že je to použitelné zadarmo pro tři projekty (jinak v akci 10 USD měsíčně verzi PRO), ale jde to použít na i na víc, tím že se dají projekty exportovat a importovat.

InVision – www.invisionapp.com – je jedna z těch hodně profesionálních a vychytaných pomůcek co pomůže od dráťáku až po interaktivní prototyp. (NOVÉ 2016/12)

Lumzy – www.lumzy.com – nemusíte instalovat (běží v prohlížeč), je zadarmo a za zkoušku stojí. (NOVÉ 2016/12)

FluidIA – github.com/linowski/fluidia  – je protypovací pomůcka pro ty, kdo vyznávají agile. Je nejen zadarmo, ale také Open Source. (NOVÉ 2016/12)

Proto.io – proto.io – je šikovný prototypovací nástroj. Bez nutnost umět kódovat. (NOVÉ 2016/12)

Mockplus – www.mockplus.com  – je další prototypovací nástroj pro web, mobily i desktop. (NOVÉ 2016/12)

Wirefy – getwirefy.com  – je další pomůcka pro vytváření dráťáků. (NOVÉ 2016/12)

PowerMockup – www.powermockup.com – vypadá zajímavě bohatou nabídkou různorodých prvků pro uživatelská rozhraní i ikon, které jsou vytvořené z věcí dostupných v PowerPointu.  (NOVÉ 2016/12)

Což by mohlo stačit, byť zdaleka není vyčerpané všechno a možná máte svůj oblíbený nástroj, který není uveden. Takže se neváhejte případně podělit na 365tipu@gmail.com, přes Twitter na @365tipu nebo na Stránce na Facebooku.