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