14 Herramientas de prototipado de aplicaciones Web

ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.

Algo muy habitual en los equipos de desarrollo Web es dibujar maquetas de las pantallas de las aplicaciones y sus elementos, de forma que podamos transmitir mejor la idea de lo que queremos a los programadores que lo van a implementar. Esto es válido también para los clientes, que a veces no se hacen una idea de lo que les estamos contando si no lo ven dibujado.

Este tipo de croquis o prototipos pintados a mano de las Webs (llamados generalmente wireframes) son muy útiles, pero hacerlos realmente a mano es problemático porque no suelen quedar muy bien y luego muchas veces ni siquiera se hacen. Una herramienta especializada viene de maravilla para hacerlo mejor, más rápido y que quede de manera presentable.

A continuación proponemos una lista de productos, por orden alfabético, tanto gratuitos como comerciales, que sirven para hacer este tipo de prototipos y que te resultarán muy útiles:

• Axure RP: es una herramienta de prototipado profesional que permite crear wireframes para hacer el pre-diseño de una página web. Disponible tanto para plataforma Windows como Mac. Puedes dibujar tanto wireframes estáticos como interactivos que simulan una experiencia de navegación del usuario real. Tiene una función de colaboración para compartir las maquetas Web con otras personas y poder recibir feedback en tiempo real. Es comercial, con precios a partir de $29 al mes. Es gratuito para estudiantes.
• Balsamiq: con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un servicio en el navegador o bien descargarla en tu equipo (funciona con Windows, Mac y Linux). También posee la función de colaboración. Su cuenta gratuita te permite crear un número ilimitado de wireframes que duran 7 días. La versión de pago "Cloud" cuesta a partir de $9/mes para dos proyectos. La edición para usar desde Google Drive cuesta $5/mes. Puedes comprar la versión de escritorio sin límite de uso por un único pago de $89.
• FlairBuilder: herramienta de escritorio para Mac y Windows que te permite hacer bocetos de tus webs y de tus Apps móviles. No tiene posibilidad de colaborar con otras personas. La versión de prueba dura 15 días, tras los cuales no te dejará grabar, aunque sí abrir lo que hayas grabado antes. No son muy transparentes con el precio (en la web no aparece) pero todos los indicios indican que cuesta $99 en una sola vez. Tienen descuentos del 50% para estudiantes.
• gliffy: basada en un servicio web, permite dibujar bocetos de tu página web y crear wireframes tanto estáticos como dinámicos. También puedes colaborar con otras personas y recibir su opinión en tiempo real. Se integra con Jira y Confluence. El precio parte de $7.99/mes.
• iPlotz: esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio vía web. Tiene una cuenta gratuita con la que puedes hacer 1 prototipo con 5 páginas navegables. La versión de pago empieza en $15/mes.
• Jumpchart: es una aplicación de planificación de webs basadas en el navegador la cual posibilita esbozar el contenido de la página web. Es posible crear wireframes tanto estático como interactivos que simulan la navegación entre las páginas web de la maqueta. La versión gratuita te permite tener un único proyecto de 10 páginas y colaborar con otro usuario. Las de pago comienzan en $5/mes.
• Justinmind: herramienta profesional para prototipado de sitios web, aplicaciones de software y aplicaciones móviles. Puede trabajar con Windows o con Mac. Es una de las más especializadas y completas junto con Axure RP. Su precio parte de $19/mes o bien existe la posibilidad de pagar una única vez por el programa (a partir de $499).
• Lucidchart: una de las herramientas más conocidas para diagramación y diseño, frecuentemente comparada por su potencia con Microsoft Visio. Aparte de todas las potentes características que posee para crear todo tipo de diagramas (flujos, para ingeniería,redes...) tiene una parte específica de wireframing y prototipado de apps. Se utiliza totalmente online, en tu navegador, y permite la colaboración con otros usuarios. Tiene una versión gratuita sin límite de tiempo (pero sí con límite de diseños). Su versión comercial parte de 4,95€/mes. Tienen una versión gratuita mejorada para estudiantes y profesores y precios especiales para éstos.
• MockFlow: herramienta web muy sencilla de utilizar para diseñar sitios web y aplicaciones de software. Permite colaboración y navegar por la página web además de visualizar su estructura. La versión gratuita está limitada a 1 proyecto y 2 revisores, con algunas limitaciones de características. La de pago parte de $14/mes.
• Mockingbird: se trata de una aplicación web con la que se pueden hacen prototipos de páginas web. Puedes diseñar tu sitio web en el propio navegador aprovechando que dispone de una gran biblioteca de objetos web para personalizar tus páginas. La versión gratuita se vuelve de solo lectura al cabo de 6 días. Parte de $12/mes para 3 proyectos simultáneos y $85/mes para proyectos ilimitados.
• Pencil project: se trata de una aplicación open-source que nació como complemento para Firefox hace años pero que ahora es una app independiente y muy fácil de instalar y utilizar. Permite crear wireframes de webs y aplicaciones móviles y dispone de algunas bibliotecas de símbolos (difíciles de encontrar a veces) para simular interfaces con Bootstrap, Material Design y otros. No existe la posibilidad de colaboración. Es totalmente gratuita.
• Visio: esta herramienta pertenece a la suite de Microsoft Office que se puede adquirir de forma independiente de otros componentes de esta suite ofimática. Sólo está disponible para equipos que trabajen con Windows. Puedes crear varios tipos de proyectos visuales como diagramas de flujo, diagramas de Venn, mapas y maquetas de sitios web (estándar y móvil), planos, así como prototipos de aplicaciones de software. Existen muchas bibliotecas de símbolos que puedes descargar. Los planes parten de $5/mes para Visio Online o $15/mes si compras la versión de escritorio, que incluye también Visio Online y almacenamiento en OneDrive.
• WireframeSketcher: es una aplicación de wireframing que da un aspecto "manual" a los bocetos finales. Su principal ventaja es que se integra a la perfección con el entorno de desarrollo Eclipse. Su precio es de $99 (licencia perpetua).

A continuación encontrarás una tabla resumen de todos ellos, por orden alfabético:

Nota: Autor de la imagen de la cabecera Jayel Aheram. Uso de la imagen bajo licencia CC