Grado y Máster de Multimedia Universitat Oberta de Catalunya
Diseño de Interfaces Grado y Máster de Multimedia

Herramientas recomendadas

En la red hay multitud de herramientas para construir prototipos, desde programas profesionales hasta pequeñas aplicaciones web que nos permiten añadir enlaces a nuestros diseños para hacerlos navegables. A continuación os mostramos una selección de herramientas y recursos destacados por su utilidad, facilidad de uso y popularidad.

  • Cooper.com – Prototyping tools. Interesante comparativa de herramientas de prototipado.
  • Quirktools. Ofrece acceso a tres útiles herramientas para el desarrollo de nuestros proyectos y prototipos. La versión gratuita (mediante registro) nos deja guardar hasta tres proyectos. Smaps permite crear rápidamente sitemaps u organizar jerárquicamente la información en nuestro proyecto. Wires ofrece una librería de widgets para crear wireframes fácilmente. Por último, Screenfly es un visor útil de páginas web en diferentes dispositivos.
  • FROONT. Interesante herramienta que permite diseñar páginas web responsivas directamente en nuestro navegador, pudiendo exportar luego el código generado. Requiere registro.

Wireframes

  • Balsamiq. Una de las herramientas más populares por su facilidad de uso, permite realizar nuestros wireframes directamente en el navegador.
  • Mockupstogo. Librería con controles de Android y otros SO para utilizar con Balsamiq.
  • Moqups. Herramienta en línea que permite desarrollar prototipos rápidamente, gracias a una interfaz intuitiva con más de 300 elementos para construir nuestro prototipo. La versión gratuita permite tener dos proyectos activos, con algunas funciones limitadas.
  • MockFlow. Herramienta web que permite construir el esqueleto de una página web o aplicación, añadiendo enlaces entre sus páginas para evaluar su estructura de navegación. La versión gratuita solo permite un proyecto por usuario, sin límite de páginas.
  • iPlotz. Permite crear prototipos navegables y compartirlos con otros usuarios para su revisión. La versión gratuita está limitada a un único proyecto con un máximo de cinco páginas.

Prototipos

  • Axure. Una de las herramientas más usadas en el ámbito profesional, permite crear prototipos de páginas web o aplicaciones móviles con gran nivel de detalle e interacción. Cuenta con multitud de tutoriales y una activa comunidad de usuarios.
  • Justinmind. Esta startup española con oficinas en San Francisco ofrece Prototyper, un potente programa para construir prototipos en alta fidelidad de páginas web y apps. La versión gratuita, aunque con menos opciones, es plenamente funcional y permite publicar el prototipo en internet para su revisión por otros usuarios.
  • Invision. Herramienta que permite añadir enlaces a nuestros diseños (web o apps), permitiéndonos así navegar adelante y atrás por lo que antes eran imágenes estáticas. Incluye un práctico sistema para invitar a otros usuarios para que prueben nuestro prototipo y puedan ofrecer feedback. La versión gratuita es plenamente funcional, pero está limitada a un solo proyecto.

Específicas para prototipos de apps

  • Fluid UI. Ofrece más de 2000 widgets para construir prototipos de apps para Android, iOS o Windows Phone. La versión gratuita está limitada a diez páginas por proyecto. Los prototipos se pueden probar en el navegador web o directamente en el dispositivo móvil (mediante una app disponible para iOS y Android).
  • Proto.io. Permite reproducir en nuestros prototipos los gestos más habituales sobre una pantalla (tocar, tocar y aguantar, pellizcar con dos dedos, etc.) y animar las transiciones entre pantallas, dotando de mayor realismo a nuestros prototipos. Ofrece una versión de prueba plenamente funcional durante 15 días.
  • Concept.ly. Esta herramienta permite subir nuestros diseños (imágenes planas) y añadirles zonas activas para crear interacciones o simplemente enlazar las páginas entre ellas para navegar por el prototipo. Sencillo, pero útil.
  • Appery.io. Además de crear prototipos, este programa permite incluso desarrollar las aplicaciones enteras (híbridas, usando PhoneGap), incluido el servicio de backend.

Aplicaciones

  • POP. Esta original aplicación nos permite fotografiar con el móvil nuestros wireframes hechos a papel y lápiz y añadirles interacciones mediante enlaces, de modo que nuestros dibujos cobren vida. Los prototipos resultantes se pueden compartir con otros usuarios para que aporten feedback. Disponible de forma gratuita para iOS y Android.
  • Launch. Permite crear prototipos tanto mediante su herramienta de diseño como añadiendo interacciones a imágenes creadas con otros programas o incluso fotografías de wireframes hechos en papel. Funciona tanto sobre el navegador web como en aplicación para iOS y Android.
  • Realizer. Disponible solo para iOS, permite probar prototipos de aplicaciones para iPhone o iPad mediante la carga de las imágenes de las diferentes pantallas, que se pueden enlazar después.
  • Form. Disponible solo para iOS, permite crear prototipos directamente en el dispositivo.

Enlaces relacionados:
Comparing four popular, page-based, interactive prototyping tools.
54 amazing wireframing tools and apps
20 excellent wireframing tools for mobile