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).
[16.01.20] BIG Release! Balsamiq Wireframes for Desktop
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).
Gliffy – www.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.cc – wireframe.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.
Moqups – www.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.
Pidoco – www.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.
iPlotz – www.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 – 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í.
Mockflow – www.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.
Framebox – www.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)
InVision Studio – www.invisionapp.com/studio – je zdarma dostupné, tedy lépe řečeno, bude zdarma dostupné v lednu 2018. Nové [28.10.17]
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)
Zeplin – zeplin.io – je další platforma, kde můžete coby tvůrci webu, aplikací či grafiky sdílet tvorbu s dalšími lidmi a hlavně těmi pro které ji děláte. Prostředí přímo podporuje vytváření designů a s tím souvisejících souborů. Zdarma použitelné pro jeden projekt, od 17 USD měsíčně pro více projektů. NOVÉ [23.04.17]
TIP: Možná hledáte jak tvořit vývojové diagramy (flowcharts). Mrkněte do V čem vytvářet vývojové diagramy? a Čím nahradit Microsoft Visio? Jak na diagramy či schémata?
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.
