Si eres diseñador UX en todo proyecto llega el momento mágico en el que coges lápiz y papel y comienzas a bocetar la interfaz. Borras, tachas, corriges y vuelves a empezar. Quemas etapas rápidamente hasta que compruebas que avanzas por el camino correcto. 

El lápiz o el bolígrafo son geniales para esta etapa pero ¿y si tienes que presentar tus bocetos a un cliente, un compañero de trabajo o a tu superior? Unas hojas emborronadas no siempre son lo más adecuado. ¿Fotografiarlo? ¿escanearlo?

En estos casos son muy útiles los programas para dibujar wireframes. El listado de herramientas disponibles es muy extenso, entre otros motivos porque al ser dibujos muy esquemáticos, casi cualquier software de diseño permite realizar wireframes. Lo que vamos a describir en este post, no obstante, es qué características son necesarias en una herramienta de wireframes.

Hemos preseleccionado dos pensando en las distintas preferencias de cada tipo de público:

Balsamiq

Balsamiq se fundó en 2008 y soy usuaria de su software casi desde sus inicios.

La gran ventaja de Balsamiq es su suave curva de aprendizaje. Al no ser una herramienta de diseño sino de wireframing no son necesarios conocimientos de programas como Photoshop, Sketch o Figma para poder usarla. Está basada en “drag & drop” (arrastrar y soltar) de elementos prediseñados. Es un software que está más próximo a un powerpoint o keynote que a software de diseño gráfico o visual. De hecho, podría usarla un profesional no familiarizado con programas de diseño.

Con Balsamiq es abrir el programa y comenzar a diseñar. El primer paso es decidir si diseñaremos una app o un web e inmediatamente comenzar a arrastrar los elementos: un contenedor de imágenes, líneas, recuadros… Las opciones tipográficas son limitadas precisamente para no distraer del objetivo (esbozar soluciones) y no confundir el wireframe con un diseño final.

La gran baza de Balsamiq es su biblioteca de iconos. Al fin y al cabo, cuando diseñamos una app un gran porcentaje de su interfaz la componen símbolos: avatar, buscar, añadir, play/pausa… 

Otra característica interesante de Balsamiq es que tiene dos niveles de acabado: uno más tosco y abocetado, que semeja trazos de rotulador y otro más limpio y nítido listo para presentar. No hace falta repetir el trabajo para cambiar entre una vista y la otra.

Son muchas más las características de Balsamiq pero estas son las más interesantes y necesarias para decidir si es la herramienta adecuada para nuestro trabajo.

Balsamiq está disponible en 3 modalidades

Todas disponen de un período de prueba gratuito y hay descuentos por volumen o para el sector educativo.

Revisa todas las características en la web de Balsamiq.

Aunque no creo que sea necesario aclararlo, no tengo ninguna vinculación con Balsamiq ni recibo comisiones o incentivos por recomendar su software.

Los componentes de Balsamiq tienen un característico look abocetado.

¿Sabes lo que es un wireframe? ¿podrías diferenciarlo de un prototipo o un mockup? Descúbrelo en el post ¿Qué es un wireframe? Diferencias entre boceto, wireframe, prototipo y mockup.

Miro

Miro se hizo muy popular en 2020. Debido a la pandemia global, a los confinamientos y al trabajo en remoto diseñadores, profesores y multitud de profesionales se lanzaron a la búsqueda de herramientas colaborativas que permitieran trabajar en equipo sin ir a la oficina.

Su producto Whiteboard (pizarra) es muy versátil y permite múltiples usos: brainstorming e ideación, metodologías ágiles, reuniones y talleres… El que nos interesa a nosotros, no obstante, es el de Diseño UX. 

Miro está basado en plantillas o templates. Para la función de diseño y experiencia de usuario cuentan con un set llamado Wireframing que es el equivalente a la librería de componentes de Balsamiq. Con una filosofía similar, es posible armar un wireframe en minutos simplemente arrastrando los elementos al canvas (espacio de trabajo) infinito.

Si eres un usuario que busca una herramienta fácil de usar para crear wireframes y te gusta tener todo alojado en la nube Miro puede ser una buena opción. Tiene una versión gratuita un poco limitada ya que solo permite tres boards o tableros pero suficiente para probarla o si haces un uso esporádico. Desde 8 dólares al mes puedes acceder a la versión Teams. Para empresas de más de 20 empleados tienen la solución Business y las grandes corporaciones pueden consultar al equipo de ventas.

Más información en la web de Miro.

Ejemplos de componentes de la plantilla Wireframing de Miro.

Recomendación

Después de probar múltiples herramientas de wireframing me ha convencido Miro por su similitud con la filosofía de Balsamiq, que sigue siendo mi favorita. No obstante, entiendo que los tiempos cambian, la tecnología evoluciona y son muchos los diseñadores UX que buscan soluciones en la nube, independientes del sistema operativo de su ordenador, que facilitan la colaboración y el trabajo en remoto y a quienes no les importa su modelo de suscripción. 

Competidores

Existen muchas otras herramientas de wireframing pero, si estás empezando y buscas una solución económica las opciones más asequibles son las ya mencionadas.

Si por el contrario te dedicas profesionalmente al Diseño y los wireframe son una herramienta habitual en tu trabajo tal vez puedas explorar soluciones en un rango de precios superior.

JustinMind. De origen español, triunfa desde hace años en todo el mundo. Se puede optar por un modelo de suscripción (19 dólares/mes) o por una licencia perpetua (desde 455 dólares por usuario). Dispone de una versión gratuita que afirman que se puede usar sin restricciones.

Web: https://www.justinmind.com/pricing

Mockflow. “An end-to-end pipeline for product design”. Engloba utilidades que te ayudan desde la fase de investigación hasta la evaluación con usuarios pasando por la arquitectura de información. Desde 14 dólares/mes si se paga anualmente.

Web: https://www.mockflow.com/solutions/

UXPin. Se definen como “The only design and prototyping tool you need. Replaces Figma, Sketch, Axure, InVision, and Zeplin”. Disponible desde 19 dólares/mes si se contrata un año completo.

Web: https://www.uxpin.com/

Marvel. “Wireframe, design and prototype fast with our intuitive design and prototyping tools. Instantly generate design specs and connect integrations that power up your workflow. From low to high-fidelity, Marvel supports you every step of the way.” El precio, si pagas un año completo, comienza en 9 euros/mes para la opción Pro

Web: https://marvelapp.com/

Invision. Se posiciona en el segmento de las herramientas de prototipado (que no son lo mismo que los wireframes). Precios desde 7,95 dólares/mes por usuario.

Web: https://www.invisionapp.com/plans

Proto.io. En el mismo segmento se sitúa proto.io. El precio comienza en 24 dólares/mes si se contrata anualmente.

Web: https://proto.io/en/pricing/

En una categoría distinta se clasifica Axure, un veterano software que se define como “A powerful & flexible all-in-one UX platform”. El precio de la opción más económica se sitúa en los 25 dólares/mes si se contrata por un año.

Web: https://www.axure.com/

Se puede observar cómo, independientemente de sus orígenes, todos aspiran a convertirse en la única herramienta que utilicen los diseñadores: desde los primeros conceptos hasta las pruebas con usuarios.

Dejamos fuera de este análisis las herramientas específicas para diseño visual como Figma o Sketch ya que, aunque se pueden diseñar wireframes con ellas no es su objetivo principal.

Si quieres aprender qué es un wireframe y cómo integrarlo en el proceso de diseño de la experiencia de usuario de productos digitales conoce nuestro Curso UX: clases particulares online de Diseño UX.