Grau i Màster de Multimèdia Universitat Oberta de Catalunya
Disseny d'Interfícies Grau i Màster de Multimèdia

Eines recomanades

A la Xarxa hi ha multitud d’eines per a construir prototips, des de programes professionals fins a petites aplicacions web que ens permeten afegir enllaços als nostres dissenys per a fer-los navegables. A continuació, hem seleccionat un sèrie d’eines i recursos que destaquen per la seva utilitat, facilitat d’ús i popularitat.

  • Cooper.com – Prototyping tools. Interessant comparativa d’eines de prototipatge.
  • Quirktools. Ofereix accés a tres eines útils per a desenvolupar els nostres projectes i prototips. La versió gratuïta (mitjançant registre) ens deixa desar fins a tres projectes. Smaps permet crear ràpidament sitemaps o organitzar jeràrquicament la informació en el nostre projecte. Wires ofereix una biblioteca de ginys (widgets) per a crear wireframes fàcilment. Finalment, Screenfly és un útil visor de pàgines web en diferents dispositius.
  • FROONT. És una eina interessant que permet dissenyar pàgines web responsives directament en el nostre navegador, i després es pot exportar el codi generat. Requereix registre.

Wireframes

  • Balsamiq. És una de les eines més populars per la facilitat d’ús, i permet realitzar els nostres wireframes directament en el navegador.
  • Mockupstogo. Llibreria amb controls d’Android i altres SO per utilitzar amb Balsamiq.
  • Moqups. És una eina en línia que permet desenvolupar prototips ràpidament, gràcies a una interfície intuïtiva amb més de tres-cents elements per a construir el nostre prototip. La versió gratuïta permet tenir dos projectes actius amb algunes funcions limitades.
  • MockFlow. És una eina web que permet construir l’esquelet d’una pàgina web o aplicació afegint enllaços entre les pàgines per a avaluar-ne l’estructura de navegació. La versió gratuïta només permet un projecte per usuari, sense límit de pàgines.
  • iPlotz. Permet crear prototips navegables i compartir-los amb altres usuaris per a revisar-los. La versió gratuïta està limitada a un sol projecte amb un màxim de cinc pàgines.

Prototips

  • Axure. És una de les eines més usades en l’àmbit professional, permet crear prototips de pàgines web o aplicacions mòbils amb molt de detall i amb un gran nivell d’interacció. Disposa d’una multitud de tutorials i una activa comunitat d’usuaris.
  • Justinmind. Aquesta empresa emergent (o startup) espanyola amb oficines a Sant Francisco ofereix Prototyper, un potent programa per a construir prototips en alta fidelitat de pàgines web i apps. La versió gratuïta, encara que amb menys opcions, és plenament funcional, i permet publicar el prototip a Internet perquè la puguin revisar altres usuaris.
  • Invision. Eina que permet afegir enllaços als nostres dissenys (web o apps), cosa que ens permet navegar endavant i enrere pel que abans eren imatges estàtiques. Inclou un pràctic sistema per convidar altres usuaris a provar el nostre prototip i puguin aportar feedback. La versió gratuïta és plenament funcional, però està limitada a un sol projecte.

Específiques per a prototips d’apps

  • Fluid UI. Ofereix més de dos mil widgets per construir prototips d’apps per a Android, iOS o Windows Phone. La versió gratuïta està limitada a deu pàgines per projecte. Els prototips es poden provar en el navegador web o directament en el dispositiu mòbil (mitjançant una app disponible per a iOS i Android).
  • Proto.io. Permet reproduir en els nostres prototips els gestos més 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és realisme els nostres prototips. Ofereix una versió de prova plenament funcional durant quinze dies.
  • Concept.ly. Aquesta eina permet pujar els nostres dissenys (imatges planes) i afegir-los zones actives per a crear interaccions o simplement enllaçar les pàgines per a navegar pel prototip. Senzill però útil.
  • Appery.io. A més de crear prototips, aquest programa permet fins i tot desenvolupar les aplicacions senceres (híbrides, usant PhoneGap), incloent el servei de backend.

Aplicacions

  • POP. Aquesta original aplicació ens permet fotografiar amb el mòbil els nostres wireframes fets amb paper i llapis i afegir-los interaccions mitjançant enllaços, de manera que els nostres dibuixos cobrin vida. Els prototips resultants es poden compartir amb altres usuaris perquè aportin feedback. Disponible de manera gratuïta per a iOS i Android.
  • Launch. Permet crear prototips tant mitjançant 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ó per a iOS i Android.
  • Realizer. Disponible només per a iOS, permet provar prototips d’aplicacions per a iPhone o iPad carregant les imatges de les diferents pantalles, les quals es poden enllaçar després.
  • Form. Disponible només per a iOS, permet crear prototips directament en el dispositiu.

Enllaços relacionats:
Comparing four popular, page-based, interactive prototyping tools.
54 amazing wireframing tools and apps
20 excellent wireframing tools for mobile