Top 15 Mobile App Wireframing & Mockup Tools 18 Nov 2019

El primer paso en prácticamente cualquier proceso es mapearlo y plantear un plan de ataque. Piensa en ello. Antes de construir una casa, creas un plano. Antes de jugar un partido de fútbol, tú y tu equipo elaboráis un plan de juego. Antes de escribir una redacción para la clase de inglés, elaboras un esquema detallado. Pues lo mismo ocurre con la creación de una aplicación móvil. De hecho, uno de los pasos más importantes en el proceso de desarrollo de una aplicación móvil es crear una estructura para tu aplicación. Y cuando digo estructura, me refiero a contenidos y elementos organizados y simplificados.

Crear una estructura para tu aplicación, sin embargo, puede llevar mucho tiempo y energía, a menos que, por supuesto, tengas la herramienta adecuada. Por este motivo, muchos desarrolladores de aplicaciones móviles comienzan con una herramienta de creación de esquemas o maquetas de aplicaciones móviles. Los wireframes de aplicaciones móviles no sólo pueden ayudar a ahorrar un tiempo valioso (y dinero), sino que también ayudan a los desarrolladores a centrarse en la experiencia del usuario.

¿Qué hace un gran wireframe o herramienta de maqueta?

Aquí está la parte difícil. No hay realmente una solución única para todos cuando se trata de wireframing. Cada equipo de diseño tiene un proceso de diseño y una aplicación móvil únicos. Entonces, ¿qué puedes buscar? Bueno, para empezar, es importante que emplees un software actualizado (no te preocupes – todas las herramientas a continuación están actualizadas y son estables) Luego es clave buscar un software que incluya un kit de interfaz de usuario o una opción de carga, lo que significa que tiene una biblioteca de componentes de interfaz de usuario incorporada o puedes cargar kits de interfaz de usuario.

Dicho esto, no dudes en echar un vistazo a nuestras 15 herramientas favoritas de Wireframing &para aplicaciones móviles y ver cuál es la que mejor te funciona.

Justinmind

Justinmind es una herramienta todo en uno capaz de crear wireframes y prototipos de alta fidelidad para aplicaciones. Es más exclusiva en el diseño de aplicaciones móviles que las actuales herramientas de diseño convencionales, debido al buen soporte en operaciones gestuales, transiciones y efectos interactivos. Puedes crear wireframes interactivos con la ayuda de animaciones e interacciones sin necesidad de código. Empiece rápidamente con una serie de plantillas personalizables mediante su interfaz de arrastrar y soltar. La herramienta también ofrece soporte de presentación en línea, permitiendo a los usuarios compartir wireframes de forma remota.
Precios: A partir de 19 dólares al mes
Sitio web: www.justinmind.com

Mockplus

Con una aplicación basada en el escritorio como Mockplus, puedes crear prototipos en tu aplicación móvil de forma fácil y rápida. Mockplus hizo su aplicación muy fácil de usar por lo que no necesita datos o conocimientos técnicos para llevarlo a cabo. Puedes encontrar plantillas para Android, iPad y iPhone en cada tamaño según tus necesidades específicas. Además, Mockplus cuenta con más de 200 componentes y más de 3000 iconos. Con un simple arrastrar y soltar, puedes construir prototipos interactivos sin esfuerzo.
Precios: 199 dólares (Pro) al año/ 399 dólares (ilimitado) por usuario de por vida
Sitio web: www.mockplus.com

Balsamiq

Balsamiq Wireframes es una popular herramienta de wireframing para aplicaciones móviles que es fácil de usar gracias a su funcionalidad de arrastrar y soltar. También tiene un modo de boceto para la lluvia de ideas y un modo de wireframe limpio para la presentación, y se puede cambiar fácilmente entre ellos. Otra cosa buena es que ofrece una prueba gratuita de 30 días para probarla antes de comprometerse. Si usted está buscando una herramienta de wireframe flexible, conveniente, rápida, esto podría ser it.
Pricing: $ 9 (2 proyectos) / $ 49 (20 proyectos) / $ 199 (200 proyectos) por month
Website: www.balsamiq.com

Proto.io

Proto.io es una herramienta de wireframing y prototipado que se atiende a las pruebas de experiencia de usuario. Como herramienta de wireframing, no sólo te permite crear wireframes interactivos, sino que también puedes probar cómo los usuarios interactúan con tus wireframes y recoger los primeros comentarios de los usuarios. Es un gran software para la creación de wireframes y prototipos para móviles, ya que también permite a los usuarios ver los prototipos fuera de línea y viene con un montón de widgets móviles. Proto.io está disponible en Android, iOS, escritorio o en el navegador web. También ofrece una prueba gratuita de 15 días sin riesgo.
Precios: 24 dólares (autónomos)/40 dólares (startups)/80 dólares (agencias)/160 dólares (empresas) al mes, facturados anualmente
Sitio web: www.proto.io

Moqups

Moqups es una plataforma puramente basada en la web que se utiliza para crear un wireframe para aplicaciones web y móviles. La mayor ventaja de las plataformas basadas en la web es que se puede trabajar en cualquier lugar. Moqups se puso a disposición de la comunidad de desarrolladores de todo el mundo de forma gratuita. Puedes crear un wireframe simple, un modelo sólido y conceptos de interfaz de usuario utilizando esta maqueta en línea y sus plantillas incorporadas se pueden utilizar directamente. Los planes de pago van desde los 13 a los 20 dólares al mes con un número definido de usuarios.
Precios: 20 dólares (trío, 7 dólares por cada usuario adicional)/ 13 dólares (usuario único)/ Personalizado (empresa) al mes, facturado anualmente
Sitio web: www.moqups.com

InVision

InVision es una gran herramienta creada por diseñadores para diseñadores. ¿Prefieres crear tus wireframes en una pizarra donde todo el mundo puede contribuir y revisar? Entonces esta puede ser la herramienta para ti. Con InVision, creas maquetas interactivas y las compartes con tu equipo, que puede dejar comentarios directamente en la pantalla. También tiene acceso a las listas de tareas en tiempo real, lo que permite que otros participen en el debate.
Precios: Gratis
Sitio web: www.invisionapp.com

Fluid UI

Fluid UI es otra de las principales y más populares herramientas de wireframing y mockups. Fluid UI utiliza las últimas tecnologías como HTML5, JavaScript y CSS. Puedes crear diseños fácilmente arrastrando elementos de estas bibliotecas. Fluid UI proporciona una gran manera de mapear tus proyectos visualmente creando enlaces para unir pantallas, formando un diagrama de cómo todo encaja. Fluid UI tiene una característica única que permite a un usuario interactuar con el diseño de la interfaz de usuario a través de diferentes dispositivos como móviles, tabletas y ordenadores de sobremesa.
Precios: $8,25 (solo) / $19,08 (pro) / $41,58 (equipo) al mes
Sitio web: www.fluidui.com

Pidoco

Pidoco es un software de maquetas alojado en la nube que viene con plantillas personalizadas, elementos interactivos y bocetos fáciles para un wireframing rápido y eficiente. En cuanto a la colaboración, los usuarios pueden compartir y editar pantallas junto con otros usuarios y recopilar comentarios en tiempo real. También se pueden crear bloques de construcción personalizados y reutilizarlos. Es posible integrar Pidoco con varios otros software como Jira, Planio y más a través de su API.
Precios: Gratis con funciones limitadas/ 9,99 $ (Basic)/ 59 $ (Pro)/ 199 $ (ilimitado) al mes
Sitio web: www.pidoco.com

Protoshare

ProtoShare es una herramienta de wireframing y mockups basada en la web que puedes utilizar para crear wireframes interactivos para aplicaciones móviles (así como para sitios web). Incluye una biblioteca de elementos de arrastrar y soltar, un mapa del sitio y la posibilidad de utilizar CSS personalizado e insertar tus propios elementos. Agiliza tu trabajo creando Maestros y Plantillas desde cero y reutilizándolos en múltiples páginas o proyectos.
Precios: 29$ (estándar) / 49$ (profesional) / 59$ (empresa) por persona y mes
Sitio web: www.protoshare.com

Wireframe.cc

Wireframe.cc es una herramienta de wireframe simple y directa que es ideal para aquellos que acaban de empezar. Te permite añadir anotaciones a áreas de marcado específicas para comentarios y revisiones también. Sin embargo, puede que no sea tan rica en funciones como otras herramientas. Hay una paleta de colores limitada para ayudarle a evitar esa vía particular de procrastinación, y los elementos de la interfaz de usuario son sensibles al contexto y sólo aparecen cuando los necesita.
Precios: Gratis / $16 (solo) / $39 (trío) / $99 (ilimitado) al mes
Sitio web: www.wireframe.cc

Axure

Axure es una herramienta de wireframing y mockup de nivel empresarial que viene con animación, vistas adaptativas y características de flujo condicional que le permiten establecer el flujo de la experiencia del usuario. Los usuarios pueden añadir anotaciones a los wireframes para guardar las notas del proyecto. Si quieres hacer wireframes, prototipos y diagramas en una sola herramienta, Axure es una gran opción.
Precios: 29 dólares (pro) / 49 dólares (equipo) 99 dólares (empresa) por usuario y mes
Sitio web: www.axure.com

UXPin

UXPin es una herramienta de wireframing, diseño de UX y mockups que viene con funciones de compartir, comentar y revisar, así como funciones como solicitudes de aprobación, asignación de tareas y notificaciones de Slack/email, permitiendo a los usuarios agilizar los flujos de trabajo. La simple funcionalidad de arrastrar y soltar le permitirá arrastrar iconos, elementos de interfaz de usuario personalizados e imágenes para mejorar un wireframe.
Los administradores pueden establecer el equipo y el acceso de permiso basado en roles y bloquear los proyectos importantes.
Precios: Gratuito/ 29 $ (Pro)/ 49 $ (Equipo)/ Personalizado (Empresa, facturado mensualmente)
Sitio web: www.uxpin.com

Figma

Figma es la primera herramienta de diseño todo en uno basada en el navegador. Los diseñadores pueden mantenerse organizados utilizando el panel de capas, que mantiene todas las mesas de trabajo y los elementos de la interfaz de usuario almacenados en un solo lugar. Además de ser una excelente herramienta para diseñadores independientes, Figma ofrece colaboración en tiempo real para su equipo. Figma permite ventajosamente que varios usuarios trabajen en un proyecto al mismo tiempo, y todos los cambios se guardan en un solo proyecto. Los compañeros de equipo se comunican comentando los elementos.
Precios: Gratuito (principiante)/12 dólares (profesional)/45 dólares (organización)
Sitio web: www.figma.com

Sketch

Sketch es una gran herramienta de diseño de aplicaciones para la edición de vectores, la creación de prototipos y la colaboración. La herramienta ofrece un conjunto de herramientas de diseño digital para la construcción de aplicaciones que contiene un montón de símbolos de diseño que son reutilizables y compartibles dentro de la comunidad de diseño. Incluso puedes añadir datos a tus diseños y transformarlos en diagramas de flujo de usuario.
Precios: Para una licencia personal, los usuarios pagan 99 dólares/año. Alternativamente, Sketch ofrece un paquete por dispositivo (licencia por volumen) por 89 dólares/año/dispositivo.
Sitio web: www.sketch.com

MarvelApp

Por último, pero no menos importante, está MarvelApp. MarvelApp es una plataforma de diseño multifuncional realmente genial que se puede utilizar para crear wireframes de aplicaciones móviles para múltiples dispositivos. Esta aplicación permite a sus usuarios montar diseños de forma rápida y eficiente a través de su función de arrastrar y soltar. MarvelApp también permite a los usuarios dar vida a sus prototipos con transiciones de pantalla realistas (utilizando disparadores, es decir, hover, swipe o click).
Precios: Los precios comienzan a partir de 12 dólares al mes (paquete Pro).
Sitio web: www.marvelapp.com

¡Empieza a hacer wireframes hoy mismo!

Cuando se diseña una aplicación móvil, la experiencia del usuario debe estar siempre en lo más alto de la lista. Sin ella, tu aplicación se unirá a millones de aplicaciones móviles perdidas en el mar de lo desconocido. No querrías eso ahora, ¿verdad? Por eso debes conocer los procesos necesarios para crear wireframes para aplicaciones. Podrías utilizar una combinación de las herramientas de esta lista para crear tus wireframes; comenzando con una aplicación basada en la web, y pasando a una aplicación basada en la nube para una iteración más detallada de tu wireframe.