{"id":596,"date":"2015-03-25T13:31:40","date_gmt":"2015-03-25T12:31:40","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=596"},"modified":"2015-03-28T12:46:31","modified_gmt":"2015-03-28T11:46:31","slug":"eines-recomanades","status":"publish","type":"page","link":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/prototipatge\/eines-recomanades\/","title":{"rendered":"Eines recomanades"},"content":{"rendered":"<p>A la Xarxa hi ha multitud d&#8217;eines per a construir prototips, des de programes professionals fins a petites aplicacions web que ens permeten afegir enlla\u00e7os als nostres dissenys per a fer-los navegables. A continuaci\u00f3, hem seleccionat un s\u00e8rie d&#8217;eines i recursos que destaquen per la seva utilitat, facilitat d&#8217;\u00fas i popularitat.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.cooper.com\/prototyping-tools\" target=\"_blank\">Cooper.com &#8211; Prototyping tools<\/a>. Interessant comparativa d&#8217;eines de prototipatge.\n<\/li>\n<li><a href=\"http:\/\/quirktools.com\/\" target=\"_blank\">Quirktools<\/a>. Ofereix acc\u00e9s a tres eines \u00fatils per a desenvolupar els nostres projectes i prototips. La versi\u00f3 gratu\u00efta (mitjan\u00e7ant registre) ens deixa desar fins a tres projectes. <a href=\"http:\/\/quirktools.com\/smaps\/\" target=\"_blank\">Smaps<\/a> permet crear r\u00e0pidament <em>sitemaps<\/em> o organitzar jer\u00e0rquicament la informaci\u00f3 en el nostre projecte. <a href=\"http:\/\/quirktools.com\/wires\/\" target=\"_blank\">Wires<\/a> ofereix una biblioteca de ginys (<em>widgets<\/em>) per a crear wireframes f\u00e0cilment. Finalment, <a href=\"http:\/\/quirktools.com\/screenfly\/\" target=\"_blank\">Screenfly<\/a> \u00e9s un \u00fatil visor de p\u00e0gines web en diferents dispositius.<\/li>\n<li><a href=\"https:\/\/froont.com\" target=\"_blank\">FROONT<\/a>. \u00c9s una eina interessant que permet dissenyar p\u00e0gines web responsives directament en el nostre navegador, i despr\u00e9s es pot exportar el codi generat. Requereix registre.<\/li>\n<\/ul>\n<h2>Wireframes<\/h2>\n<ul>\n<li><a href=\"http:\/\/balsamiq.com\/products\/mockups\/\" target=\"_blank\">Balsamiq<\/a>. \u00c9s una de les eines m\u00e9s populars per la facilitat d&#8217;\u00fas, i permet realitzar els nostres <em>wireframes<\/em> directament en el navegador.<\/li>\n<li><a href=\"https:\/\/mockupstogo.mybalsamiq.com\/projects\/\" target=\"_blank\">Mockupstogo<\/a>. Llibreria amb controls d\u2019Android i altres SO per utilitzar amb Balsamiq.<\/li>\n<li><a href=\"https:\/\/moqups.com\" target=\"_blank\">Moqups<\/a>. \u00c9s una eina en l\u00ednia que permet desenvolupar prototips r\u00e0pidament, gr\u00e0cies a una interf\u00edcie intu\u00eftiva amb m\u00e9s de tres-cents elements per a construir el nostre prototip. La versi\u00f3 gratu\u00efta permet tenir dos projectes actius amb algunes funcions limitades.<\/li>\n<li><a href=\"http:\/\/mockflow.com\/apps\/wireframepro\/\" target=\"_blank\">MockFlow<\/a>. \u00c9s una eina web que permet construir l&#8217;esquelet d&#8217;una p\u00e0gina web o aplicaci\u00f3 afegint enlla\u00e7os entre les p\u00e0gines per a avaluar-ne l&#8217;estructura de navegaci\u00f3. La versi\u00f3 gratu\u00efta nom\u00e9s permet un projecte per usuari, sense l\u00edmit de p\u00e0gines.<\/li>\n<li><a href=\"http:\/\/iplotz.com\/\" target=\"_blank\">iPlotz<\/a>. Permet crear prototips navegables i compartir-los amb altres usuaris per a revisar-los. La versi\u00f3 gratu\u00efta est\u00e0 limitada a un sol projecte amb un m\u00e0xim de cinc p\u00e0gines.<\/li>\n<\/ul>\n<h2>Prototips<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.axure.com\/\" target=\"_blank\">Axure<\/a>. \u00c9s una de les eines m\u00e9s usades en l&#8217;\u00e0mbit professional, permet crear prototips de p\u00e0gines web o aplicacions m\u00f2bils amb molt de detall i amb un gran nivell d&#8217;interacci\u00f3. Disposa d&#8217;una multitud de tutorials i una activa comunitat d&#8217;usuaris.<\/li>\n<li><a href=\"http:\/\/www.justinmind.com\/\" target=\"_blank\">Justinmind<\/a>. Aquesta empresa emergent (o <em>startup<\/em>) espanyola amb oficines a Sant Francisco ofereix Prototyper, un potent programa per a construir prototips en alta fidelitat de p\u00e0gines web i apps. La versi\u00f3 gratu\u00efta, encara que amb menys opcions, \u00e9s plenament funcional, i permet publicar el prototip a Internet perqu\u00e8 la puguin revisar altres usuaris.<\/li>\n<li><a href=\"http:\/\/www.invisionapp.com\/\" target=\"_blank\">Invision<\/a>. Eina que permet afegir enlla\u00e7os als nostres dissenys (web o apps), cosa que ens permet navegar endavant i enrere pel que abans eren imatges est\u00e0tiques. Inclou un pr\u00e0ctic sistema per convidar altres usuaris a provar el nostre prototip i puguin aportar <em>feedback<\/em>. La versi\u00f3 gratu\u00efta \u00e9s plenament funcional, per\u00f2 est\u00e0 limitada a un sol projecte.<\/li>\n<\/ul>\n<h2>Espec\u00edfiques per a prototips d&#8217;apps<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.fluidui.com\/\" target=\"_blank\">Fluid UI<\/a>. Ofereix m\u00e9s de dos mil <em>widgets<\/em> per construir prototips d&#8217;apps per a Android, iOS o Windows Phone. La versi\u00f3 gratu\u00efta est\u00e0 limitada a deu p\u00e0gines per projecte. Els prototips es poden provar en el navegador web o directament en el dispositiu m\u00f2bil (mitjan\u00e7ant una app disponible per a iOS i Android).<\/li>\n<li><a href=\"http:\/\/proto.io\" target=\"_blank\">Proto.io<\/a>. Permet reproduir en els nostres prototips els gestos m\u00e9s habituals sobre una pantalla (tocar, tocar i aguantar, pessigar amb dos dits, etc.) i animar les transicions entre pantalles, la qual cosa dota de m\u00e9s realisme els nostres prototips. Ofereix una versi\u00f3 de prova plenament funcional durant quinze dies.<\/li>\n<li><a href=\"http:\/\/concept.ly\/\" target=\"_blank\">Concept.ly<\/a>. Aquesta eina permet pujar els nostres dissenys (imatges planes) i afegir-los zones actives per a crear interaccions o simplement enlla\u00e7ar les p\u00e0gines per a navegar pel prototip. Senzill per\u00f2 \u00fatil.<\/li>\n<li><a href=\"http:\/\/appery.io\" target=\"_blank\">Appery.io<\/a>. A m\u00e9s de crear prototips, aquest programa permet fins i tot desenvolupar les aplicacions senceres (h\u00edbrides, usant PhoneGap), incloent el servei de <em>backend<\/em>.<\/li>\n<\/ul>\n<h2>Aplicacions<\/h2>\n<ul>\n<li><a href=\"https:\/\/popapp.in\/\" target=\"_blank\">POP<\/a>. Aquesta original aplicaci\u00f3 ens permet fotografiar amb el m\u00f2bil els nostres wireframes fets amb paper i llapis i afegir-los interaccions mitjan\u00e7ant enlla\u00e7os, de manera que els nostres dibuixos cobrin vida. Els prototips resultants es poden compartir amb altres usuaris perqu\u00e8 aportin <em>feedback<\/em>. Disponible de manera gratu\u00efta per a iOS i Android.<\/li>\n<li><a href=\"http:\/\/getlaunch.com\" target=\"_blank\">Launch<\/a>. Permet crear prototips tant mitjan\u00e7ant la seva eina de disseny com afegint interaccions a imatges creades amb altres programes o fins i tot fotografies de wireframes fets en paper. Funciona tant sobre el navegador web com en aplicaci\u00f3 per a iOS i Android.<\/li>\n<li><a href=\"http:\/\/realizerapp.com\/\" target=\"_blank\">Realizer<\/a>. Disponible nom\u00e9s per a iOS, permet provar prototips d&#8217;aplicacions per a iPhone o iPad carregant les imatges de les diferents pantalles, les quals es poden enlla\u00e7ar despr\u00e9s.<\/li>\n<li><a href=\"http:\/\/www.relativewave.com\/form\/\" target=\"_blank\">Form<\/a>. Disponible nom\u00e9s per a iOS, permet crear prototips directament en el dispositiu.<\/li>\n<\/ul>\n<p><strong>Enlla\u00e7os relacionats:<\/strong><br \/>\n&#8211; <a href=\"http:\/\/uxmag.com\/articles\/comparing-four-popular-page%E2%80%93based-interactive-prototyping-tools\" target=\"_blank\">Comparing four popular, page-based, interactive prototyping tools<\/a>.<br \/>\n&#8211; <a href=\"http:\/\/theappentrepreneur.com\/54-amazing-wireframing-tools-apps\" target=\"_blank\">54 amazing wireframing tools and apps <\/a><br \/>\n&#8211; <a href=\"http:\/\/mashable.com\/2013\/04\/02\/wireframing-tools-mobile\/\" target=\"_blank\">20 excellent wireframing tools for mobile<\/a> <\/p>","protected":false},"excerpt":{"rendered":"<p>A la Xarxa hi ha multitud d&#8217;eines per a construir prototips, des de programes professionals fins a petites aplicacions web que ens permeten afegir enlla\u00e7os als nostres dissenys per a fer-los navegables. A continuaci\u00f3, hem seleccionat un s\u00e8rie d&#8217;eines i recursos que destaquen per la seva utilitat, facilitat d&#8217;\u00fas i popularitat. Cooper.com &#8211; Prototyping tools. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/dii\/prototipatge\/eines-recomanades\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abEines recomanades\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":8,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-596","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":5,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/596\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/596\/revisions\/618"}],"up":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/8"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}