Herramientas gratis para hacer Wireframes y Prototipos

herramientas, gratis, prototipos, wireframes, ux, ui, interfaces, adobe xd, zeplin, sketch, figma,

Existen numerosas herramientas para el Diseño UX o de Experiencia de Usuario y UI o Diseño de Interfaces en este momento. Muchas de estas herramientas para la creación de Wireframes, prototipos, generadoras de especificaciones técnicas y Sistemas de Diseño son de pago o incluyen un periodo de prueba de 15 días.

 

Herramientas gratis para crear Wireframes y Prototipos

A continuación encontraréis una recopilación de herramientas con diferentes funcionalidades para el diseño de interfaces o UI, creación de prototipos interactivos y generadoras de especificaciones técnicas que, a fecha de la publicación de este post, permiten tener una cuenta gratis sin que caduque.

Cabe destacar que, para utilizar algunas de las funciones avanzadas que incluyen estas herramientas, si será necesario pasar por caja.
 

Adobe XD

Permite el diseño de prototipos y el diseño de interacción. Es una herramienta basada en vectores para aplicaciones web y móviles. También permite crear el diseño y la interacción para aplicaciones. Tras la realización del prototipo y los Wireframes permite compartirlos con el resto de los equipos para obtener las especificaciones técnicas para el desarrollo FrontEnd.

Adobe XD dispone de numerosos Plugins desarrollados para mejorar su utilización.

Una funcionalidad interesante es que permite realizar test con usuarios grabando como los participantes de la prueba interactúan con el prototipo.

Adobe XD, prototipos, wireframes, ux, ui, diseño de interfaces,
 

Figma

Está pensada para la creación de diseño de interfaces (UI) y la creación de prototipos. Al igual que Adobe XD permite compartirlos con mucha facilidad, lo que fomenta en gran medida la colaboración entre los equipos y el recibir feedback o reportes.

Esta herramienta está a un paso de convertirse en mi herramienta favorita aunque actualmente trabajo con Adobe XD.

figma, prototipos, wireframes, ux, ui, diseño de interfaces,
 

Fluidui

Permite crear tanto prototipos para web como para aplicaciones. La creación de prototipos es realmente rápida en esta herramienta. Se pueden construir bibliotecas de símbolos o componentes como en Figma, Adobe XD o Sketch. Dispone de más de 2.000 componentes ya creados de los sistemas de diseño Material Design, iOS Human Interface entre otros.

La colaboración en tiempo real es algo a destacar de esta herramienta.

fluidui, prototipos, wireframes, ux, ui, diseño de interfaces,
 

Invision

Muy conocida en el mundo de UX o Experiencia de Usuario y del diseño de interfaces. Invision es la plataforma que utilizan grandes compañías como airbnb o amazon.

Permite crear prototipos interactivos y compartirlos con el resto de personas que componen el equipo u otros equipos que participen en el desarrollo del producto. A parte de incluir la posibilidad de animar Wireframes creados por ejemplo en Sketch o Adobe XD, dispone de una pizarra digital realmente útil para el trabajo colaborativo.

Invision, también permite a los desarrolladores FrontEnd obtener ciertas especificaciones sobre el diseño así como los Assets o recursos. Aunque para estos menesteres, recomiendo usar mejor Zeplin.

Invision, prototipos, wireframes, ux, ui, diseño de interfaces,
 

MockFlow

MockFlow permite el diseño de Wireframes y diagramas realmente rápido y de una forma muy intuitiva. La curva de aprendizaje de esta herramienta es más bien pequeña y se llega a controlar como un profesional en el momento en el que has realizado un par de Wireframes.

Al igual que el resto de herramientas permite la colaboración entre personas y equipos. Un punto a destacar de MockFlow es que la forma de crear las guías de estilo y las especificaciones para los desarrolladores FrontEnd es realmente bonita y muy cuidada.

mockflow, prototipos, wireframes, ux, ui, diseño de interfaces,
 

Marvel

Marvel permite la creación rápida de prototipos. Al igual que el resto fomenta la parte colaborativa de forma excelente. Es una de las herramientas más conocidas. Se pueden generar especificaciones de diseño para los equipos de FrontEnd y prototipos interactivos sin necesidad de implementar código.

Una funcionalidad interesante que también incluye Marvel, es que permite realizar test con usuarios grabando como los participantes de la prueba interactúan con el prototipo.

marvel, marvelapp,
 

Moqups

Esta aplicación web permite la creación de Wireframes, maquetas, diagramas y prototipos colaborando en tiempo real. Dispone de componentes ya diseñados para realizar bocetos rápidos, pero también tendremos la posibilidad de realizar prototipos complejos.

El hecho de que sea una herramienta web la hace destacar, puesto que no se necesita instalar nada y se puede trabajar desde cualquier PC o Mac, siempre y cuando se disponga de una conexión a internet.

moqups, prototipos, wireframes, ux, ui, diseño de interfaces,
 

Zeplin

Es una de las herramientas más usadas para compartir, organizar y colaborar en el ámbito del diseño de productos digitales. Esta herramienta consigue que la comunicación entre los diseñadores y los desarrolladores sea realmente fluida.

Permite la exportación de los Wireframes desde herramientas como Sketch, Adobe XD, Figma o incluso Photoshop. Los recursos y las especificaciones técnicas para los desarrolladores se realizan automáticamente.

Una herramienta muy recomendable si se quiere centralizar documentación específica del proyecto en un sólo lugar.

zeplin, prototipos, wireframes, ux, ui, diseño de interfaces,

 

Créditos

La imagen de cabecera es de Unsplash