Por qué utilizar una herramienta de prototipos interactivos para tus diseños

Prototipado web responsive

Los prototipos de diseño interactivos son la mejor forma para que tus diseños (ya sean para web o app) cobren vida. El concepto principal consiste en subir nuestros diseños (o mockups) y crear prototipos de página web o app para que el cliente u otros miembros de tu equipo puedan interactuar con dichas pantallas, ayudando a que entiendan el funcionamiento de las mismas antes de pasar al proceso de desarrollo.

Además, este tipo de software de diseño gráfico nos permiten ahorrar tiempo, evitando el envío de diseños vía mail (con las consecuentes cadenas de correos generadas), previniendo confusiones con versiones obsoletas, mientras avanzamos en el proceso de creación. Y más importante todavía, simplificando el flujo de trabajo de diferentes equipos gracias a sus funciones de colaboración.

Hoy en día son muchos los servicios que podemos encontrar en internet como Atomic, Flinto Lite, etc., aunque personalmente destaco por su simplicidad dos por encima del resto: Invision y Marvel. Estas son algunas de las características que los hacen especiales:

1. Pantallas interactivas

Puedes crear un flujo de navegación entre pantallas estáticas con la posibilidad de añadir animaciones entre ellas. El prototipo de página web resultante nos permite simular de una forma bastante realista el producto final si los diseños son detallados, realizar pruebas de usabilidad, mostrar al cliente el funcionamiento de una web, etc.

2. Colaboración

La colaboración entre compañeros de equipo, clientes o cualquier persona involucrada en el proyecto es un punto realmente importante a tener en cuenta y seguramente una de las características más potentes de estos servicios. Se trata de un buen lugar donde poner ideas en común.

Tanto Invision como Marvel ofrecen la posibilidad de dejar comentarios en lugares específicos de la maqueta, ayudando al diseñador a entender dónde tiene que aplicar la mejora, evitando posibles confusiones y trabajo en balde. Invision además, permite la colaboración en tiempo real con la función LiveShare de manera gratuita, idóneo para colaborar con personas separadas por la distancia.

Prototipado web ejemplo

3. Sincronización en la nube

Aunque puedes subir las pantallas directamente desde tu ordenador, también existe la posibilidad de sincronización con los principales servicios almacenamiento en la nube (Google Drive, Dropbox, Box, etc.). De esta manera puedes actualizar las pantallas sin necesidad de estar logueado en la propia aplicación.

Invision también dispone de su propia aplicación para mantener las pantallas sincronizadas, llamado Invision Sync. Eso sí, sólo disponible para OS X.

4. Integración con Software de Diseño

Aunque en este aspecto aún están un poco verdes, ya existe la posibilidad de subir directamente archivos editables de Photoshop, Sketch e Illustrator a la hora de hacer tus prototipos de páginas web, que incluso detectan en algunos casos las mesas de trabajo de dichos archivos. Esto puede simplificar más el proceso de actualización de las pantallas, evitando tener que exportarlas a mano.

5. Más integraciones y posibilidades

Existen también integraciones con multitud de programas que enriquecen más si cabe la experiencia de uso con estas herramientas. Desde integraciones con gestores de tareas (Basecamp, Trello, Jira), mensajería (Slack, Hipchat) hasta con los servicios más comunes para guardar archivos en la ‘Nube’ (Drive, Dropbox, Box, Creative Cloud…).

Tabla comparativa Invision / Marvel

Tabla comparativa marvel invision protipado web

Evernote, Adidas, Nike, Sony, Linkedin, Adobe y Twitter son muchas las empresas que ya están utilizando estos servicios en su día a día, y Mandarina Creativos no es una excepción. Y tú, ¿te animas a probarlos?

 

Miguel Ángel Moyá
Miguel Ángel Moyá
Diseñador senior
Mandarina Brand Society Mandarina Brand Society