Las mejores herramientas para crear wireframes

Wireframe

Fotografía: baldiri (Creative Commons)

Un wireframe representa la estructura visual de una web a modo de esquema, con la ordenación de los diferentes elementos que formarán parte de la interfaz. Su definición, con mayor o menor nivel de detalle, es el paso previo al desarrollo del código de un sitio. Además, es un valioso recurso para obtener la aprobación de un cliente, que contará con una referencia gráfica de la idea que pretendes llevar a cabo. Normalmente suelo dibujar los wireframes a mano, pero hay ocasiones en las que acudo a herramientas informáticas. Entre todas las que existen en el mercado, he seleccionado estas cinco por las funcionalidades que aportan:

Cacoo

Empresa desarrolladora
Nulab Inc. (cacoo.com)

Principales características
‐ Herramienta sencilla y fácil de utilizar.
‐ Cuenta con una amplia plantilla que permite a los usuarios crear mapas de sitio, wireframes, diagramas de flujo, diagramas de red, mapas de sitio, diagramas UML y otros.
‐ Los diagramas se pueden vincular directamente a sitios web y aplicaciones web.
‐ Cuando se realiza una actualización al diagrama, cualquier imagen con enlaces también se actualiza.
‐ Da la posibilidad de colaborar entre usuarios en tiempo real.
‐ Exporta a PDF, PNG, SVG…

¿Gratuita o comercial?
Gratuita. Comercial para aumentar las prestaciones.

Pencil Project

Empresa desarrolladora
Evolus (pencil.evolus.vn)

Principales características
‐ Herramienta que simplifica las operaciones de dibujo.
‐ Cuenta con diferentes tipos de interfaz también para plataformas móviles (Android y iOs, GUI con plantillas).
‐ Incluye elementos de diagrama de flujo, escritorio / web, formas de interfaz de usuario…
‐ Permite la exportación, entre otros formatos, a HTML, PNG, PDF.
‐ Con extensión para Firefox.
‐ Se puede descargar como aplicación independiente para Linux, Windows y MacOS.

¿Gratuita o comercial?
Gratuita.

Gliffy

Empresa desarrolladora
Gliffy, Inc (www.gliffy.com)

Principales características
‐ Proporciona diagramas de flujo de calidad profesional, planos, dibujos técnicos…
‐ Trabaja directamente en el navegador.
‐ Si se utiliza Gliffy como un plugin o en línea, permite compartir y colaborar con los diagramas al instante.
‐ Cuenta con una librería de esquemas.
‐ Permite la exportación a SVG, XML Gliffy, JPG o PNG.

¿Gratuita o comercial?
Gratuita hasta 5 wireframes. A partir de ahí, el software es comercial.

Lumzy

Empresa desarrolladora
Crunch Frog LLC (www.lumzy.com)

Principales características
‐ Herramienta rápida de maqueta y prototipo para sitios web y aplicaciones.
‐ Amplia biblioteca de símbolos para la interfaz gráfica del usuario con el fin de añadir más realismo al proyecto.
‐ Da la opción de invitar a que otros colaboren en el proyecto y recibir retroalimentación del modelo.
‐ Los formatos de exportación disponibles son: PDF, PNG, JPG.

¿Gratuita o comercial?
Comercial.

MockFlow

Empresa desarrolladora
MockFlow Design Cloud (www.mockflow.com)

Principales características
– Posee una configuración suficiente para la creación de pequeños sitios web.
– Cuenta con una amplia librería para organizar el contenido web.
– En la versión gratuita, la herramienta de wireframing online es abierta sólo para proyectos de 4 páginas, con 2 colaboradores máximo.

¿Gratuita o comercial?
Gratuita. Comercial para usuarios que necesiten funciones más avanzadas.