Herramientas para prototipar aplicaciones web

Herramientas de prototipado de aplicaciones Web

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, 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.
• Balsamiq:
  
  Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un servicio web o bien descargarla en tu equipo (funciona con Windows, Mac y Linux).
  
  Su cuenta gratuita te permite crear un número ilimitado de wireframes que duran 7 días. También posee la función de colaboración.
• FlairBuilder:
  
  Herramienta web que te permite hacer bocetos de tus webs y de tus Apps para iPhone.
  
  No tiene posibilidad de colaborar con otras personas ni tampoco es posible exportar características.
• 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. La cuenta gratuita te deja hacer hasta 5 croquis no cifrados pero llevan publicidad.
• 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 prototipos que tengan hasta 5 páginas navegables.
• 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. 
• Justinmind:
  
  Herramienta profesional para prototipado de sitios web, aplicaciones de software y aplicaciones móviles. Puede trabajar con Windows o con Mac. Está dispinlbe de forma gratuita, sólo debes rellenar un formulario con dos campos y listo ya puedes iniciar la descarga.
• 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 en relación al número de prototipos que podemos hacer.
• Mockingbird:
  
  Se trata de un servicio web gratuito con el 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.
• Napkin:
  
  Aunque es una herramienta basada en Java, también está disponible para Windows, Mac y Linux. Los bocetos realizados solo pueden ser estáticos, pero posee una extensa biblioteca de símbolos GUI para usar en tus maquetas. No ofrece posibilidad de colaboración ni de exportar a otros formatos. Lo positivo, es totalmente gratuita y la cuenta es ilimitada.
• Pencil project:
  
  Es un complemento open-source de Firefox que permite crear wireframes dentro de Firefox. No existe la posibilidad de colaboración.
• Smartdraw:
  
  Totalmente integrada con Microsoft Office. Muy útil para hacer organigramas, cuadros de flujo,....Sin embargo, no dispone de wireframes interactivos ni diseños para móviles.
• Visio:
  
  Esta herramienta pertenece a la suite de Microsoft Office que se puede adquirir de forma independiente de otros componentes de Microsost Office. 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), así como prototipos de aplicaciones de software.
• Si trabajas con el entorno de programación Eclipse, puedes usar también WireframeSketcher, que está muy bien y se integra dentro del entorno a la perfección.

A continuación encontrarás una tabla donde hemos intentado hacer una comparativa de las características más importantes:

	Tipo de Software/ Sistema Operativo	Biblioteca de Símbolos GUI	Wireframes interactivos	Colaboración	Formatos de exportación
Axure RP	Windows, Mac	SÍ	SÍ	SÍ	HTML, JPEG, PNG, BMP, GIF
Balsamiq Mockups	Servicio web / Windows / Mac / Linux	SÍ	SÍ	SÍ	XML, PDF, PNG
FlairBuilder	Servicio web	SÍ	SÍ	NO	N/A
Gliffy	Servicio web	SÍ	SÍ	SÍ	SVG, Gliffy XML, JPG, PNG
iPlotz	Servicio web / Windows / Mac	SÍ	SÍ	SÍ	PDF, PNG, JPG, HTML
Jumpchart	Servicio web	NO	SÍ	SÍ	CSS / XHTML, WordPress
Justinmind	Windows, Mac	SÍ	SÍ	SÍ	HTML, PNG, JS
MockFlow	Servicio Web		SÍ	SÍ	HTML5, PDF, PowerPoint, PNG
Mockingbird	Servicio web	SÍ	SÍ	SÍ	PDF, PNG
Napkin	Windows / Mac / Linux	SÍ	NO	NO	N/A
Pencil Project	Complemento de Firefox	SÍ	SÍ	NO	HTML, PDF, PNG, MS Word, OpenOffice.org
SmartDraw	Windows	SÍ	NO	SÍ	PSD, SWF, JPEG, PNG, GIF, TIFF, SVG, BMP, EMF, WMF, HTML
Visio	Windows	SÍ	SÍ	SÍ	SVG, EMF, GIF, JPEG, PNG, TIF, BMP, WMF, XML, PDF, XPS, HTML
WirfraneSketcher	Windows / Mac / Linux	SÍ	NO	NO	PDF, PNG

ESTÉ POS ES ORIGINAL DE http://www.campusmvp.es