26 herramientas de prototipado y usabilidad web

Los prototipos son una parte integral del proceso de diseño, ya que permiten la revisión de los conceptos básicos del proyecto en la etapa inicial de su desarrollo y compartir opiniones con el resto del equipo. Gracias a ellos puedes crear fácilmente una maqueta interactiva de un sitio web o aplicación móvil, que es capaz de identificar cualquier deficiencia en el flujo y la usabilidad del diseño antes de invertir demasiado tiempo ni dinero en su desarrollo. Para ello se necesitan buenas herramientas de prototipado que te presentamos aquí. ¡No te lo pierdas!

También te puede interesar: Master en Marketing Digital

Es importante, cuando comenzamos un proyecto, que el primer paso sea establecer una jerarquía en la información y el contenido para poder trasladarlo visualmente. De esta manera nuestro cliente podrá entenderlo y hacerse una idea de cómo estará estructurado en un futuro. Para ello hemos recopilado 17 herramientas de prototipado para dar a conocer tu aplicación y saber cuál es la experiencia del usuario al navegar a través de las diferentes pantallas.

Qué es un prototipo y para qué nos sirve

Un prototipo nos sirve para probar un concepto: Podemos hacer una tirada corta de nuestro producto para replicarla después, o bien probar el producto para comprobar si tiene algún error y pensar en cómo lo podemos mejorar. Muchas veces los prototipos acaban desapareciendo para dejar paso a una nueva versión del producto mejorada y definitiva. Además, fabricar un prototipo nos aporta algunos beneficios:

• Evitamos hacer una gran inversión al principio en un producto que no termina de gustar a nuestros usuarios.
• Reducimos el riesgo, ya que si alguna función de nuestro producto no gusta, dejamos de implementarla antes de la fabricación en cadena.
• Podemos mejorar nuestro producto según la aceptación que ha tenido entre los clientes.

26 herramientas de prototipado y usabilidad web

Justinmind

Justinmind es una herramienta de prototipado de sitios web, aplicaciones software y aplicaciones móviles que puede trabajar tanto con Windows como con Mac o también con iOs y Android. Existe una versión gratuita con la que puedes trabajar bastante bien aunque el precio de la versión Pro no es muy elevado.

La aplicación es bastante sencilla de usar y se divide en dos partes principales, los paneles dinámicos y los eventos. Los paneles dinámicos permiten poner varios elementos en la misma área, de esta forma podremos simular botones, cambios de pestaña u otros contenidos que cambian dinámicamente. Los eventos permiten indicar acciones sobre los elementos que tenemos en nuestro diseño.

In Vision

In Vision ha supuesto una revolución no solo en el mercado de las herramientas de prototipado sino también de gestión de un proyecto en general, desde las fases de creación de los mockups hasta el final del desarrollo. El valor que la distingue de otras herramientas es que es muy intuitiva tanto para el diseñador que la está utilizando como para el cliente.

Entre algunas de sus características encontramos la de compartir y comentar un proyecto a tiempo real con el cliente. De esta forma el feedback llega de manera más rápida y más clara y los procesos se agilizan. Además, permite gestionar las versiones de tus proyectos sincronizando tus archivos de Photoshop o Illustrator con la aplicación de modo que resulta muy fácil no perderse en el entramado de carpetas y capas de los diferentes archivos.

La versión de prueba deja probar hasta cinco proyectos. Si tu volumen de proyectos web es notable, merece la pena que te crees una cuenta de pago ya que cuando comiences a utilizarla te darás cuenta de que te aporta un valor añadido a tus proyectos.

Origami

Origami es una herramienta de creación de prototipos cuya propiedad es de Facebook y se utilizó para crear las maquetas de varias aplicaciones como Instagram, Messenger y Paper. Aunque se usa principalmente para aplicaciones de iOS gracias a su integración con Apple Quartz Composer, Origami también es compatible al desarrollo de prototipos interactivos en Android.

Esta herramienta de prototipado ofrece un par de características muy útiles para la creación de prototipos interactivos, incluyendo plugins para Sketch y Photoshop, así como una extensa biblioteca completa con foros, tutoriales en vídeo y guías. Tiene una característica para exportar el proyecto a código que permite convertir tu diseño visual en ejemplos de código escritos para iOS, Android, o la web.

Proto.io

Tanto para iOs como para Android, Proto.io es una muy buena herramienta para la creación de grandes aplicaciones. Su principal característica es que cuenta con un motor que permite crear animaciones para apps móviles a través de un timeline para poder definir cuánto durará la animación.

Fluid

Fluid es otra herramienta de prototipado compatible con Android e iOs muy eficaz para pequeñas aplicaciones. Con ella puedes diseñar el maquetado de las principales vistas de tu app, pero también puedes enlazar cada una de esas vistas a controles de otras, pudiendo así realizar una demostración interactiva muy cercana a lo que sería el resultado final. Además, en su editor cuenta con diferentes wireframes para las diversas plataformas. De forma gratuita puedes crear proyectos de hasta 10 pantallas. Luego deberás contratar alguno de los diferentes planes mensuales que ofrece.

Codiqa

Codiqa es una de las herramientas de prototipado de pago, extremadamente intuitiva ya que funciona con drag and drop. La tendencia de este tipo de aplicaciones es que ofrecen al diseñador cada vez más facilidades y simplicidad en su uso. Además permite escoger recursos de entre la amplia biblioteca que posee o bien puedes importar tu propio código. Su ventaja es que una vez construyas el prototipo, lo podrás ejecutar en cualquier navegador o tamaño de pantalla, lo que te ahorrará mucho tiempo de gestión de peculiaridades de cada navegador. Finalmente otra de las características de Codiqa es que permite compartir y ver las propuestas en tiempo real así como generar el proyecto visualmente y con código.

Pixate

Desarrollada por Google, Pixate es otra plataforma de prototipado que permite a los diseñadores probar diseños móviles interactivos, animaciones y wireframes para dispositivos Android o iOS.

En Pixate puedes crear diseños de interfaz en forma de capas y animaciones individuales de forma similar a la mayoría de los programas de diseño gráfico, a través de una simple función de arrastrar y soltar. Una vez que estés satisfecho con tu prototipo, puedes implementarlo y probarlo en un dispositivo Android o iOS.

Una vez que pongas Pixate en marcha, echa un vistazo a la documentación y tutoriales ofrecidos online para aprender los fundamentos básicos de la creación de tu primer prototipo.

Marvel

Marvel es una herramienta fácil de usar válida para iOS y Android, que permite crear propotipos funcionales de manera rápida y sencilla a través de wireframes o bocetos. La aplicación permite a través de borradores, objetos insertados e incluso imágenes para presentar un diseño personalizado lo más parecido posible a la app que queremos crear.

Ninja Mock

Ninja Mock es una herramienta de nivel intermedio que permite mediante bocetos la creación de aplicaciones móviles y diseño de páginas web de manera totalmente gratuita. Una vez tengas clara la idea puedes comenzar a utilizarla en los sistemas operativos Android, iOS o Windows.

Axure RP

Axure RP cuenta con años de experiencia, y es conocida por sus complejas interacciones entre diseñadores y desarrolladores. Dentro de la lista es una de las opciones más complejas pero también más completa. Mientras se tiende cada vez más a simplificar la interfaz esta herramienta ofrece el máximo control a los diseñadores, es por este motivo por que se desaconseja su uso a novatos en el sector.

Pop app

Pop app es una herramienta funcional y fácil de usar que permite utilizar la cámara del móvil para fotografiar bocetos en papel y dotarlos de interacción para navegar. Puedes utilizar la herramienta en el sistemas operativos que prefieras de iOS, Android y Windows phone.

Principle

Aunque en principio la aplicación Principle está especializada en animación, es capaz de realizar prototipos incluir un nuevo editor de líneas de tiempo. Es similar a Adobe After Effects o al Flash, entre sus ventajas es que posee dos líneas del tiempo y puede animar los objetos de las página. Si tus ventajas son la animación y el vídeo esta es tu herramienta.

UXPin

UXPin es un conjunto de herramientas que pretende mejorar la experiencia Usuario al máximo. Creada por diseñadores UX, permite la creación rápida y fácil de prototipos de forma ágil.

Las mayores ventajas de utilizar UXPin son: poder colaborar y comunicarse con el equipo en todo el proceso de diseño en tiempo real, integrar versiones de documentos de nuestros archivos, demostrar las el proceso de diseño a clientes y recopilar sugerencias y comentarios.

https://youtu.be/zEjyfiIouH8

Webflow

Webflow es una herramienta de prototipado creada para diseñadores independientes y freelance que además de diseño incluye otras muchas tareas. Una de sus grandes ventajas es que no requiere el conocimiento previo de código para utilizarlo, también incluye un CMS maestro y características de hosting con múltiples opciones de diseño.

En una sola plataforma es capaz de ofrecer gestión y diseño, además con la herramienta es capaz de editar en tiempo real mediante una interfaz similar a Photoshop.

Adobe XD

Entre las últimas incorporaciones de Creative Cloud de Adobe encontramos Adobe XD, una herramienta destinada a la creación de prototipos para hacerse con el mercado Sketch. Aunque es joven pronto será un fuerte competidor en este tipo de herramientas.

Framer

Está herramienta de prototipado está más destinada a los usuarios que trabajan con Apple y requiere unos conocimientos más avanzados para aprovechar al máximo su potencial. Pero una vez controlada podrás manejar el lienzo a tu gusto. Otra ventaja que tiene es también se integra con Sketch.

Flinto

El elemento diferencial de Flinto son las transiciones. El formato de su editor permite  manipular o ajustar cada elemento de transición más rápido y con menos esfuerzo. Por este motivo, es ideal para proyectos en los que necesita ajustar el paso de usuarios entre varias páginas, para controlar la velocidad de transición y previsualizaciones.

Whimsical

Es una herramienta basada en la web que permite la colaboración en tiempo real en la elaboración visual de aquellas ideas que se pueden tener en mente. Esta, ofrece tableros virtuales que permiten crear diagramas de flujo y estructuras de aplicaciones móviles y web.

Overflow

Con esta herramienta podremos convertir nuestros diseños en diagramas de flujo de usuario atractivos y que cuenten una historia.

Plant

Se trata de un tablero que permite poner en contacto diseñadores. Sus características la hacen única porque podemos invitar a los diseñadores a un proyecto y sincronizar los cambios entre ellos, para ver cómo este avanza. Además, permite enviar solo unas determinadas mesas de trabajo o todas, y permite ver la diferencia entre dos versiones distintas del proyecto.

Sketch

Se trata de un kit de herramientas de diseño pensado para ayudarnos a crear un mejor trabajo, desde que se tiene una idea, hasta que conseguimos terminar el diseño final. Mediante una interfaz intuitiva y potentes plugins creados por una comunidad de desarrolladores, nos ayuda a centrarnos para sacar adelante complicados proyectos.

Figma

Figma permite diseñar y crear prototipos, así como, recopilar comentarios o notas sobre los proyectos. Esta es la primera herramienta de diseño de interfaz basada en el navegador, lo que facilita a los equipos la creación de software.

Zeplin

Se trata de un espacio conectado para los equipos de producto. En ella podemos encontrar desde diseños de transferencia y guías de estilo con especificaciones precisas, hasta fragmentos de código de forma automática.

Su objetivo es facilitar el trabajo en el diseño de este tipo de documento. Además, para aquellas personas que trabajan en un solo proyecto es gratuita. En cada proyecto podemos ver las guías de diseño con información como paleta de colores, por ejemplo, así como un panel con pantallas que nos indica el tamaño, las notas y la distribución de los elementos. Dentro de Zeplin es posible establecer conversaciones con otros miembros del equipo.

WordPress

Es un sistema de gestión de contenido enfocado a la creación de blogs, accesible y gratuito. Con la combinación de estéticas y plugins que ofrece WordPress, conseguimos añadir a nuestro blog redes sociales, un e-commerce, o hacer que parezca un escaparate de nuestro producto. Cabe señalar que hay dos tipos de WordPress: Los blogs soportados por la propia empresa en su web WordPress.com, de forma similar a lo que hace Google en blogspot o servicios similares, o WordPress auto-instalado, que puedes descargar desde WordPress.org y agregar a tu propio servidor.

Processing

Se trata de una herramienta de iniciación a la programación y realización de prototipos software de proyectos que tengan que ver con gráficos, audio y vídeo. En concreto, es una herramienta adecuada para entornos de Arte Digital, Creative Programming, Visualización de Datos, Gaming, etc. No os preocupéis si no sois programadores, ya que con solamente unos conceptos muy básicos podemos crear aplicaciones muy atractivas y que nos pueden facilitar la creación de prototipos. Otra ventaja muy importante de Processing es que está disponible para Windows, Mac y Linux, y además te permite la portabilidad del código a  Android y Javascript.

Arduino

Es una plataforma de hardware libre diseñada para facilitar el uso de la electrónica en proyectos multidisciplinares, que puede ayudarnos incluso a resolver problemas de domótica. Lo mejor de Arduino es que te permite crear casi cualquier cosa: Puedes hacer un reloj, un sistema de seguridad para tu casa, o incluso fabricar un robot.

Si te interesa abarcar la Analítica Web, técnicas de conversión, SEO y otros aspectos del Marketing Digital, además de la Usabilidad y Experiencia de Usuario, el Master UX es lo que estás buscando.

¡Si te ha sido útil este artículo compártelo con tus amigos! Y si conoces otra herramientas de prototipado deja un comentario en el post para conocerla.