7 herramientas de wireframe gratuitas y de código abierto para optimizar la experiencia de usuario

Publicado el 11/1/2019 por Kelsie Anderson y Marina Cabrera

7 herramientas de wireframe gratuitas y de código abierto

Hay personas que adoran las sorpresas. Se lanzan a hacer las cosas sin planificación y esperan a ver los resultados.

Aunque ese enfoque puede ser divertido para aprovechar el día o viajar por el mundo, no es para nada adecuado en la creación de páginas web.

Hasta el sitio web más sencillo cuenta con muchos elementos. Sin embargo, si es complicado navegar por la página, los clientes la abandonarán casi de inmediato, lo que supone perder ventas y la oportunidad de conectar con clientes potenciales.

Una manera de diseñar un sitio atractivo y agradable para los usuarios es mediante la creación de un wireframe antes de tocar el código en tu editor de HTML favorito.

Si trabajas con un equipo en el diseño de un sitio, aplicación o incluso una única página web, el wireframe también servirá para comunicar exactamente cómo quieres que sea el sitio sin tener que diseñar un prototipo.

En último término, una base de wireframe ahorrará horas de trabajo en el backend. Es la opción más segura para proporcionar la mejor experiencia de usuario posible a los visitantes.

La buena noticia es que no hay que ser desarrollador ni gastar mucho dinero en un software sofisticado para crear un wireframe. Existen unas cuantas soluciones gratuitas de wireframe; a continuación se indican algunas de ellas.

7 herramientas de wireframe gratuitas y de código abierto

Todas las herramientas de wireframe y de código abierto incluidas en este artículo ofrecen una opción gratuita ilimitada, es decir, no habrá que pagar nada para utilizarlas, ni ahora ni en el futuro.

Al igual que en la mayoría de soluciones sin cargo, el usuario obtiene una versión limitada de un sistema de pago; este artículo muestra los posibles obstáculos que se pueden encontrar.

Las soluciones se enumeran según el número de reseñas de los usuarios publicadas en Capterra en el momento de la publicación del artículo, de mayor a menor.

1. Lucidchart

(788 reseñas, 4.5 estrellas en Capterra)

Lucidchart

Un wireframe en Lucidchart (Fuente)

Lucidchart es un creador de wireframe gratuito y completo que incluye una herramienta de diseño de interfaz de usuario. Ofrece una colaboración fácil y permite que múltiples personas editen el mismo wireframe de forma simultánea. También cuenta con una extensión para Chrome que facilita la adición de un diagrama Lucidchart a Google Docs o Sheets, lo cual resulta útil si el equipo trabaja con estos programas.

Qué dicen los usuarios de Capterra: los usuarios valoran positivamente que la solución esté basada en la nube, se integre con muchos otros productos de uso común y ofrezca varias plantillas sobre las que comenzar a diseñar. Sin embargo, les gustaría que el sistema fuera más intuitivo y que permitiera personalizar los espacios de trabajo. Además, indican que la solución puede ralentizarse en ocasiones.

Limitaciones de la versión gratuita:

  • Un usuario.
  • Proyectos limitados a 60 objetos.

Coste de actualización: el plan de pago más económico de Lucidchart cuesta unos 5 dólares al mes para un usuario. Los planes de equipo cuestan a partir de 20 dólares mensuales.

Más información

2. InVision

(289 reseñas, 4.5 estrellas en Capterra)

InVision

InVision permite crear “paneles de inspiración” en los que reunir las ideas de diseño (Fuente)

La solución basada en la nube InVision permite diseñar y crear wireframe para aplicaciones móviles y sitios de escritorio, además de  generar documentación de arquitecturas y visualizar los flujos de navegación. Sus herramientas de colaboración integradas facilitan la recepción de comentarios por parte de los compañeros del equipo. Gracias a los prototipos interactivos, los usuarios que utilicen la versión de prueba pueden navegar por la aplicación o página web de forma realista.

Qué dicen los usuarios de Capterra: a los usuarios les encanta la interfaz intuitiva y elegante de InVision. También aprecian la posibilidad de crear prototipos de aspecto profesional y alta fidelidad (útiles para presentar a los clientes) y la facilidad con la que los usuarios pueden enviar y ver comentarios. Sin embargo, indican que la solución podría mejorar sus capacidades de animación. También mencionan que, en ocasiones, los prototipos se ven distintos en programas ajenos a InVision.

Limitaciones de la versión gratuita:

  • Un prototipo.
  • Un usuario.

Coste de actualización: el plan más económico de InVision tiene un coste de 15 dólares mensuales y permite hasta tres prototipos.

Más información

3. Moqups

(15 reseñas, 4.5 estrellas en Capterra)

Moqups

Tablero de diseño y biblioteca de formas en Moqups (Fuente)

Moqups es otra solución de diseño basada en la nube que incluye una completa biblioteca de plantillas y conjuntos de iconos. Permite importar imágenes propias para adaptarse al aspecto del sitio web. Su editor, de tipo “arrastrar y soltar”, facilita el diseño intuitivo de wireframes para sitios, diagramas de flujo y storyboards.

Qué dicen los usuarios de Capterra: los usuarios valoran la sencilla funcionalidad de “arrastrar y soltar”, la interfaz limpia e intuitiva de la solución y la facilidad para compartir diseños con desarrolladores y clientes. Sin embargo, desearían que la solución ofreciera más objetos entre los que elegir, y que la empresa implementara una opción sin conexión en el futuro.

Limitaciones de la versión gratuita:

  • Un proyecto.
  • Límite de 300 objetos.
  • 5 MB de almacenamiento.

Coste de actualización: el plan más económico de Moqups tiene un precio de 13 dólares mensuales para un usuario y proyectos ilimitados.

Más información

4. MockFlow

(7 reseñas, 4 estrellas en Capterra)

MockFlow

Editor de wireframe de MockFlow (Fuente)

MockFlow ofrece una completa biblioteca completa de diseño con plantillas para la creación de sitios web, borradores de interfaz de aplicaciones, mapas del sitio y mucho más. También permite elegir plantillas, diseños y componentes de terceros. Las colecciones de imágenes y componentes incluyen siluetas, elementos de navegación, formas e iconos que permiten usar una gran variedad de elementos en maquetas y wireframes.

Qué dicen los usuarios de Capterra: según las reseñas, MockFlow ofrece muchas funciones y es fácil de usar. Sin embargo, el programa adolece de algunos errores que aún no se han resuelto.

Limitaciones de la versión gratuita:

  • Un proyecto.
  • Hasta dos revisores.
  • Acceso limitado a la biblioteca e integraciones con soluciones de terceros.

Coste de actualización: MockFlow ofrece planes de pago desde 14 dólares mensuales para un usuario y proyectos ilimitados.

Más información

5. Wireframe.cc

(6 reseñas, 4 estrellas en Capterra)

Wireframe.cc

Un proyecto wireframe en Wireframe.cc (Fuente)

Wireframe.cc es una fantástica opción para quienes buscan una interfaz de usuario sencilla y despejada. En lugar de barras de herramientas, Wireframe.cc ofrece opciones que aparecen en ventanas emergentes y se ocultan cuando no son necesarias. Permite compartir wireframes en vivo con el equipo para una edición colaborativa, y cualquiera que acceda a través de un enlace puede comentar en el wireframe (aunque esta función no es gratuita).

Qué dicen los usuarios de Capterra: Las reseñas destacan que la interfaz de usuario minimalista es excelente para crear maquetas de baja fidelidad. Sin embargo, puede que la versión gratuita de Wireframe.cc no resulte útil para necesidades más complejas. Los usuarios también desearían que hubiera más tutoriales en línea que ofrecieran ayuda para empezar a usar el programa.

Limitaciones de la versión gratuita:

  • Sin cuentas de usuario.
  • Todos los wireframes creados son públicos.
  • Los wireframes se limitan a una página.

Coste de actualización: Wireframe.cc cuenta con versiones prémium desde 16 dólares mensuales para un usuario y proyectos ilimitados.

Más información

6. Pencil

(6 reseñas, 4 estrellas en Capterra)

Pencil

Un diagrama en Pencil (Fuente)

Pencil es la única herramienta de wireframe basada en escritorio de esta lista. Es de código abierto, lo que significa que todas las funciones se encuentran disponibles de manera gratuita para todos los usuarios. Su última actualización fue en es de junio de 2017.

Esta solución permite crear múltiples wireframes con enlaces entre páginas. Además, ofrece una ventaja para los desarrolladores web: al exportar wireframes a una página web HTML, Pencil conserva los enlaces, por lo que es posible compartir maquetas de una página web o aplicación completa con las páginas enlazadas. Pencil también ofrece varias plantillas y una biblioteca de formas, y permite importar objetos externos. Cuenta con plantillas para Android e iOS que facilitan el diseño para entornos móviles.

Qué dicen los usuarios de Capterra: los usuarios destacan la facilidad de manejo para no profesionales y la rapidez con la que se pueden realizar los wireframes. También destacan sus funcionalidades a la hora de crear diagramas.

Limitaciones de la versión gratuita:

  • Pencil es una herramienta de código abierto, así que la versión gratuita ofrece todas las funciones.

Más información

7. Fluid UI

(Sin reseñas ni puntuaciones en Capterra)

Fluid UI

Herramienta de diseño de Fluid UI (Fuente)

La solución de creación de wireframe de Fluid UI, con base en la nube, ofrece a los diseñadores una biblioteca de más de 2000 elementos. Permite crear prototipos interactivos y animaciones de página para imitar en la medida de lo posible el aspecto del producto final. También se pueden previsualizar los prototipos en interfaces móviles con las aplicaciones para Android e iOS de Fluid UI.

Qué dicen los usuarios de Capterra: Fluid UI aún no cuenta con reseñas en Capterra.

Limitaciones de la versión gratuita:

  • Un proyecto.
  • Diez páginas.
  • Sin posibilidad de cargar o subir archivos.
  • Limitado a la biblioteca de wireframe.
  • Sin posibilidad de que los miembros del grupo dejen comentarios o sugerencias.

Coste de actualización: el plan más económico de Fluid UI tiene un precio de 8.95 dólares mensuales y permite acceder a funciones de diseño más avanzadas, como las transiciones animadas. Para colaborar con compañeros y equipos, es necesario contratar el plan “Pro” de Fluid UI, con un coste de unos 19 dólares mensuales.

Más información

¿Qué herramientas usas para la creación de wireframes?

Existen muchas herramientas digitales gratuitas que permiten crear wireframes y recibir comentarios en tiempo real. Si ninguna de estas opciones de wireframe es adecuada para ti, puedes echar un vistazo a las más de 30 opciones incluidas en el directorio de software wireframe de Capterra.

¿Prefieres herramientas de colaboración digital para los proyectos de creación de wireframes y maquetas de producto? Si es así, ¿cuáles son tus favoritas? ¿Qué solución recomiendas? Deja un comentario a continuación.

¿Quieres saber más? Mira nuestro catálogo de software para wireframe y descubre más productos.

Este artículo puede referirse a productos, programas o servicios que no están disponibles en tu región, o que pueden estar restringidos según las leyes y regulaciones de tu país. Te sugerimos que consultes directamente con el proveedor de software para obtener información sobre la disponibilidad del producto y conformidad con las leyes locales.