10 herramientas gratis para Wireframing y Mockup

El proceso de wireframing debería ser la primera fase de cualquier proyecto web. En ella, se pretende definir un esquema con el esqueleto de los elementos esenciales de la página como encabezados, pies de página, la navegación y el área de contenido y debe ilustrar cómo atender y responder a cualquier posible interacción de un usuario. Sin duda es una de las etapas más importantes de cara a la usabilidad del sitio web.

En otros post de nuestro blog os hemos referenciado recursos en los que apoyarnos para nuestros diseños web e interfaces de usuario de nuestros desarrollos, así como bocetos reales utilizados en desarrollo web que han sido implementados en sitios web y enlaces a sitios web donde podéis encontrar documentos descargables con wireframes de diseños web para distintas plataformas, con bocetos orientados a páginas web convencionales y esquemas de diseños para plataformas móviles como en iPhone o el iPad.

En esta ocasión, incluimos una colección de herramientas gratuitas para crear prototipos y maquetas.

Lumzy – Herramienta para creación rápida de maquetas y prototipos

Lumzy, nos permite puede crear maquetas de sitios web o aplicacines mediante la adición de los eventos de una extensa lista de controles. Además de ser una gran herramienta para la creación de maquetas, también puedes crear mensajes de alerta y páginas de navegación, añadir enlaces a contenidos externos, y mucho más. Por otra parte nos ofrece un conjunto de herramientas de colaboración y un motor de chat para deliberar sobre los diseños. Todo esto y es absolutamente gratis.
Página de la herramienta: Lumzy Homepage

Editor de Lumzy

Mockup Builder – Aplicación de prototipado

Mockup Builder es una herramienta para desarrollar prototipos muy versátil que nos permite crear maquetas de interfaz de usuario, wireframes interactivos, diseños web, prototipos para software de escritorio e incluso mapas de sitio y árboles de navegación.
También aporta herramientas de colaboración para compartir nuestros diseños con clientes y colegas. Y sí, es totalmente GRATIS
Página de la herramienta: Mockup Builder

Editor de Mockup Builder

Tiggr – Creación colaborativa de prototipos

La idea detrás de Tiggr (actualmente en versión beta) es aportar los recursos necesarios para crear prototipos para sitios web, aplicaciones de escritorio o aplicaciones móviles. Permite diseñar de un gran número de componentes, compartir nuestro trabajo (a través de correo electrónico, Twitter o Facebook), y generar código HTML / JS / CSS, para que pueda obtener una vista previa maquetas de la interfaz de usuario muy rápidamente. Precisa de registro en la herramienta y, es gratis.

Página de la herramienta: Tiggr

Tiggr - Apariencia del editor

Frame Box – Herramienta online para crear Mockups

Frame Box nos permite  arrastrar y soltar, cambiar el tamaño y copiar / pegar los elementos de una interfaz de usuario de forma que nos facilita la creación de maquetas y prototipos. Es gratis y sólo requiere una inscripción rápida.does not have an extensive list of features (like the web based apps above).
Página de la herramienta: Frame Box

SimpleDiagrams Edición gratuita

La versión gratuita de SimpleDiagrams es una aplicación Adobe Air que nos permite plantear, rápidamente, ideas de diseño. Cuenta con una importante librería de elementos sobre los que podemos realizar drag & drop, entre otras funcionalidades interesantes.
Página de la herramienta: SimpleDiagrams

iPhone Mockup

Con la herramienta iPhone Mockup tenemos la opción de usar ya sea el editor de estilo de lápiz (captura de pantalla anterior) o el editor de ilustraciones (imagen abajo). En cualquiera de las dos opciones nos permite crear maquetas para iPhone maquetas muy rápidamente, compartirlas con otras personas.

Página de la herramienta: iPhone Mockup

Editor de iPhone Mockup

fluidIA

fluidIA es una herramienta de diseño basada ​​en web para desarrollar prototipos de interfaces de usuario.

Pagina de la herramienta: fluidIA

Pencil Project

Pencil Project es un complemento gratuito de Firefox para el diseño de prototipos de interfaces de usuario. Cuenta con una base de plantillas para páginas y, después, exportarlas a PNG, formatos Openoffice.org, documento HTML, documentos de Word o PDF.

Página de la herramienta: Pencil Project

Editor de Pencil Project

CogTool – Herramienta de prototipado para interfaces de usuario

CogTool es una herramienta gratuita para prototipado de interfaces de usuario. Tiene, como valor añadido, que evalúa automáticamente el diseño que estamos realizando en función de modelos predictivos del comportamiento del usuario.
Página de la herramienta: CogTool

Prototype Composer

Prototype Composer cuenta con una edición para comunidades que nos posibilita la simulación de la apariencia de las aplicaciones según vamos codificándolas.
Prototype Composer Homepage ?

DUB – DENIM

DENIM es una herramienta gratuita de escritorio disponible para Windows, Unix y Mac OS X que se describe a si misma como  “an Informal Tool For Early Stage Web Site and UI Design”.
Combina los beneficios de las utilidades basadas en papel con las herramientas de prototipado electrónico.
Página de la herramienta: DUB – DENIM

Aplicaciones para creación de maquetas y prototipos que cuentan con una versión gratuita

Todas ellas cuentan con opciones gratuitas con funcionalidades restringidas:

• MockFlow: Utilidad online para crear Wireframes
• Gliffy – Herramienta online para crear diagramas de software
• Naview – Herramienta para desarrollar prototipos de elementos de navegación
• iPlotz – wireframing, mockups y prototipos
• FlairBuilder – Wireframes, maquetas y prototipos
• Cacoo – Creación online de diagramas
• Mockabilly – Maquetación de aplicaciones para iPhone

Fuente: 10 Completely Free Wireframing and Mockup Tools | Speckyboy Design Magazine.

The 10 herramientas gratis para Wireframing y Mockup by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.