Las 7 mejores herramientas de creación de prototipos y wireframing para creadores de aplicaciones

Últimamente, he tenido muchas discusiones sobre UI y UX. Nadie se ha quejado de esto, así que supongo que estamos llegando a un punto en el que todos los involucrados en el desarrollo de aplicaciones reconocen la importancia de la interfaz de usuario y la experiencia de usuario.

Una gran idea de aplicación se arruina fácilmente con una interfaz y una experiencia mal pensadas. Y con muchas herramientas ahora disponibles para la creación rápida de wireframes y prototipos, no debería haber ninguna razón para no ejecutar una experiencia brillante.

Aunque los términos a menudo se usan juntos, existe una clara distinción entre una estructura alámbrica y un prototipo.

Una estructura alámbrica es un diseño esquelético y básico de la estructura de su aplicación. Por lo general, se realiza sin ningún color (blanco y negro simple) y, aunque una estructura alámbrica muestra dónde irán el texto, las imágenes y otros elementos de diseño, no incluye imágenes reales, texto, etc. Sin embargo, cada uno de los elementos de la estructura alámbrica es se muestra a escala real. La razón de esto es que los wireframes están destinados a centrar su atención en la estructura, no en el diseño real. Al igual que los planos de una casa o edificio: obtienes una idea clara de la estructura y ubicación de todo, sin distraerte con el diseño.

Los prototipos se encuentran entre los wireframes y una aplicación completamente funcional. La parte más importante de un prototipo es el uso de la animación, que le permite examinar cómo responderá su aplicación a la interacción del usuario y las transiciones de página o pantalla. Los prototipos también pueden incluir imágenes reales, conjuntos de iconos y texto, pero esto está determinado por el propósito del prototipo. Si solo está probando interacciones y flujo de pantalla, puede crear un prototipo que solo incluya animaciones y tal vez un poco de color. Si está tratando de validar su idea, o presentarla a inversionistas potenciales, desea que su prototipo esté más pulido, usando imágenes, texto, etc.

Aunque las herramientas que he incluido en este resumen facilitan la creación de prototipos, incluir más elementos además de la animación y un toque de color significa que necesita más tiempo para realizar cambios en el prototipo.

1. Balsamiq

Si solo está interesado en armar un wireframe de la idea de su aplicación, entonces Balsamiq es la herramienta para usted. Disponible como aplicación de escritorio y web, Balsamiq existe desde 2008.

Los wireframes están destinados a requerir muy poco esfuerzo y tiempo, por lo que Balsamiq está diseñado para ayudarte a crear tus wireframes rápidamente. Simplemente agregue los elementos básicos que necesita, luego cambie el tamaño, la posición y personalice según sea necesario. Los wireframes que cree con Balsamiq se verán un poco toscos, pero eso es intencional. El equipo creativo detrás de la herramienta cree que una estructura alámbrica que se parece más a un boceto fomenta la lluvia de ideas. Lo cual es una gran razón para el wireframing en primer lugar.

El control de versiones simple lo ayudará a realizar un seguimiento de dónde comenzó y dónde se encuentra ahora. Y solo porque se trata de una estructura alámbrica no significa que no pueda obtener información de usuarios / clientes potenciales. No puede crear un prototipo completamente interactivo usando Balsamiq, pero puede vincular las pantallas / páginas que crea para generar un prototipo simple de clic. Sin animaciones ni interacciones: el propósito es únicamente demostrar el flujo.

Y si Balsamiq parece demasiado limitado, siempre puede agregar cualquiera de las extensiones, plantillas y paquetes de iconos creados por la comunidad.

Balsamiq está disponible como una aplicación de escritorio, con un precio de $ 89 / usuario, una aplicación basada en la web a partir de $ 12 / mes o una aplicación vinculada a Google Drive, con un precio de $ 5 / usuario / mes. Pero primero puede comenzar con una prueba gratuita para ver si es la herramienta adecuada para usted.

2. WireframePro

Aunque una licencia de MockFlow incluye acceso a ocho aplicaciones diferentes, es WireframePro lo que le interesaría cuando comience a desarrollar su propia aplicación. Nuevamente, es una aplicación basada en la web, con una interfaz de arrastrar y soltar para crear sin esfuerzo una estructura alámbrica.

Viene con todos los elementos estándar de la interfaz de usuario, junto con una multitud de otros componentes que puede necesitar, incluida una selección para relojes inteligentes Apple y Android. La aplicación también le da acceso a Mock Store, que ofrece una gran selección de plantillas de terceros que puede usar como inspiración o como un punto de partida rápido para su propia estructura alámbrica.

Al igual que con todas las herramientas enumeradas aquí, WireframePro está diseñado para individuos y equipos, con herramientas de colaboración integradas. Una buena inclusión es la capacidad de generar automáticamente especificaciones para cada elemento, por lo que si no está haciendo el trabajo de diseño usted mismo, su diseñador tendrá fácil acceso a todos los detalles relacionados con el diseño.

Finalmente, al compartir cualquiera de sus proyectos, puede asignar derechos, lo que limita a algunas personas a solo poder ver y comentar un proyecto, mientras que otras también podrían editarlo.

WireframePro no tiene ningún plan gratuito, pero puede probarlo durante 30 días antes de cambiar a un plan pago. Las licencias comienzan en $ 19 / mes para un usuario y $ 39 / mes para hasta tres miembros del equipo.

3. UXPin

Como sugiere el nombre, el equipo detrás de UXPin enfatiza UX. No hay nada de malo en eso, el wireframing y la creación de prototipos están destinados a ayudarlo a refinar la UX de su aplicación. Con UXPin, puede encargarse tanto de la estructura de cables como de la creación de prototipos, por lo que no es necesario cambiar de herramienta.

Como era de esperar, UXPin admite archivos de origen de Sketch y archivos de Photoshop. Pero también tiene un editor integrado que admite fragmentos de código CSS, lo que le permite personalizar cualquier elemento utilizado en su estructura alámbrica y prototipo. Y UXPin hace que sea muy fácil realizar un seguimiento de cada iteración de cada archivo que agrega o crea, por lo que no tendrá que hacer clic en docenas de archivos para buscar la versión original.

La creación de prototipos y wireframes básicos es rápida y sencilla, con todas las interacciones de prototipos estándar disponibles. Naturalmente, aún puede crear interacciones personalizadas si surge la necesidad. Y una vez que su prototipo esté listo, puede enviarlo a cualquiera para que lo pruebe, y todas las interacciones se capturan en video, junto con el audio de los comentarios de cada evaluador.

UXPin admite wireframing y creación de prototipos de sitios web, aplicaciones móviles y aplicaciones web, y viene con 14 puntos de interrupción preestablecidos, lo que le permite ver fácilmente su diseño en múltiples dispositivos. El precio comienza en $ 19 / mes para el plan básico y $ 29 / mes para desbloquear funciones avanzadas.

4. Prott

Aunque Prott tiene la marca de una herramienta de creación de prototipos, también incluye una función de estructura de alambre. Si la idea de su aplicación es poco más que bocetos dibujados, puede fotografiar sus bocetos e importarlos directamente a la aplicación. Estos bocetos se pueden animar o usar como base para su estructura alámbrica. Arrastre y suelte formas preestablecidas y elementos de la interfaz de usuario directamente en su boceto para pasar instantáneamente de líneas temblorosas a estructuras alámbricas profesionales de baja fidelidad.

Prott incluye una gran cantidad de kits de interfaz de usuario para una variedad de dispositivos, desde iOS hasta Android y web. Pero también puede crear su propia biblioteca de elementos de interfaz.

En lugar de simplemente compartir su prototipo con otras personas, ahora puede incluso incluir un mapa detallado que muestre claramente la estructura de su aplicación. Y cualquier persona con la que comparta su prototipo puede comentar directamente en cada pantalla, por lo que es más fácil para usted comprender con qué se relacionan sus comentarios.

Prott ofrece una prueba de 30 días con todas las funciones, con un plan gratuito que no tiene límites más que la cantidad de proyectos que puede crear. Si necesita crear más proyectos, puede cambiar a un plan Starter o Pro, con un precio de $ 19 / mes.

5. InVision

InVision es exclusivamente para la creación de prototipos, pero con soporte para una variedad de usos. Con InVision puede crear rápidamente prototipos interactivos de su sitio web, aplicación web o aplicación móvil, y luego ver el prototipo en dispositivos reales. Y esto incluye tabletas y dispositivos portátiles, no solo teléfonos móviles.

El proceso es tan simple como:

  • Agregue sus activos de diseño (InVision admite archivos de origen GIF, PNG, JPEG, PSD y Sketch) mediante la función de arrastrar y soltar, o sincronizándolo con Dropbox.
  • Dibuje puntos de acceso en cada activo y configúrelos para vincularlos a otros activos, URL externas o anclas.
  • Agregue interactividad en forma de gestos (toques o deslizamientos), áreas fijas (barra de menú, etc.) y transiciones.

Una vez hecho esto, puede ver el proyecto en su teléfono, tableta o computadora, o incluso enviar un mensaje de texto o un enlace por correo electrónico a amigos y colegas. Esto le facilita la participación de otras personas en el proceso de diseño, y cualquiera a quien envíe un enlace podrá comentar sobre cada diseño.

El precio de InVision comienza sin costo para un prototipo, $ 25 / mes para prototipos ilimitados y $ 99 / mes para equipos de hasta 5 miembros.

6. Marvel

Al igual que InVision, la aplicación Marvel es para la creación de prototipos. Incluye soporte estándar para archivos de Sketch y Photoshop, o puede usar su herramienta de diseño Canvas incorporada. Marvel también tiene una aplicación para iOS y Android que te permite fotografiar tus propios garabatos y diseños, y subirlos directamente a tu biblioteca de Marvel.

Es fácil crear puntos de acceso en sus diseños, con docenas de interacciones y transiciones de pantalla disponibles para darle vida a su prototipo. Y puede probar su prototipo en una multitud de pantallas, incluido Apple Watch.

Por supuesto, no vale la pena discutir ninguna herramienta de creación de prototipos si no incluye la colaboración. Y con Marvel puede anotar su prototipo para resaltar áreas específicas sobre las que desea que la gente comente. Cualquier persona a la que le envíe su prototipo puede hacer comentarios, sin la necesidad de que primero creen una cuenta Marvel.

Los precios de Marvel comienzan en $ 0 / mes para un usuario y hasta dos proyectos, pero con funciones limitadas. Por $ 14 / mes obtiene proyectos ilimitados y todas las funciones, con precios separados para equipos y clientes empresariales.

7. Proto.io

Proto.io es una herramienta de creación de prototipos popular que recibió una actualización masiva en 2016. Proto.io incluye todas las funciones necesarias en una herramienta de creación de prototipos, pero la actualización también ha traído una gran cantidad de funciones simplificadas.

Junto con una interfaz de usuario rediseñada que hace que todas las funciones principales sean más accesibles, Proto.io también ha puesto mucho énfasis en la animación. El movimiento es una característica importante de las aplicaciones móviles, y la característica de Transiciones de estado de Proto.io hace que sea fácil para cualquiera crear y personalizar animaciones en su prototipo.

Proto.io también ha introducido una biblioteca de patrones de diseño de interacción, lo que facilita la adición de interacciones. Estos patrones incluyen interacciones como menús deslizantes y extracción para actualizar. Todo lo que tiene que hacer es agregar una interacción a su proyecto y personalizarlo.

La nueva versión de Proto.io amplía su capacidad para que los usuarios prueben y comenten su prototipo. Se integra con plataformas de prueba de usuarios como Validately y UserTesting, lo que le brinda acceso a un grupo más grande de usuarios reales. Y con la integración Lookback, obtiene grabaciones ilimitadas, solo en iOS, por ahora, que le muestran cómo los usuarios interactúan y navegan a través de su aplicación.

Proto.io ofrece una prueba de 15 días con todas las funciones, después de lo cual puede cambiar a una cuenta gratuita muy limitada. Los planes pagos comienzan en $ 29 / mes, según el tamaño de su equipo.

Conclusión

Cuando recién esté comenzando en el desarrollo de aplicaciones, es posible que desee crear tanto wireframes como prototipos de la idea de su aplicación. Pero a medida que se sienta más cómodo con el proceso de desarrollo, puede considerar simplemente hacer uno u otro.

Debido a que los wireframes tienen un diseño tan básico, lo obligan a concentrarse en lograr que el flujo y la experiencia del usuario sean correctos. Los prototipos pueden ayudarlo a refinar tanto el flujo como la experiencia de usuario, resaltar cualquier defecto de diseño y, lo que es más importante, lucir mejor que los wireframes si necesita presentarlos a clientes o inversores. Y si bien puede resultar tentador conformarse con una herramienta que combine tanto el wireframing como la creación de prototipos, el factor decisivo siempre debe ser qué herramienta incluye todas las funciones que realmente necesita y es más cómoda de usar. Y dado que cada una de las herramientas enumeradas aquí ofrece un plan o prueba gratis, ¿por qué no pasar un día probándolas todas antes de tomar una decisión?