Prototipado de Apps con Marvel e InVision

Contenido del curso

Introducción al Diseño Centrado en el Usuario

Comprensión: entendiendo el problema

Definición: ¿Qué hacer con los hallazgos?

Ideación

Prototipado

18
Prototipado de Apps con Marvel e InVision
Viendo ahora

Testing: evaluación del producto

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:56

Prototipado de Apps con Marvel e InVision

Curso de Diseño Centrado en Usuario

Clase 18 de 23

Clase 18 / 23

Recursos

¿Cuáles son las herramientas de prototipado más populares?

Hoy en día, el mercado está inundado de herramientas de prototipado que facilitan el diseño y la prueba de aplicaciones y sitios web. Existen herramientas gratuitas, con períodos de prueba de 30 días o que requieren una suscripción. Entre las más destacadas están:

InVision
Marvel
Framer
Flinto
Principle
Axure
Just In Mind

Sin embargo, aquí nos centraremos en dos con las que la mayoría de los diseñadores están familiarizados: InVision y Marvel. Estas herramientas se destacan no solo por sus capacidades, sino también por la flexibilidad que ofrecen a los diseñadores al trabajar en proyectos de prototipado. Además, son increíblemente intuitivas, lo que las torna ideales para aquellos que buscan eficiencia y calidad en sus prototipos.

¿Cómo funciona Marvel App?

Marvel es una aplicación particularmente interesante para el diseño de prototipos en dispositivos móviles. Su principal ventaja es la capacidad de trabajar tanto a partir de fotografías de bocetos como diseñando directamente en la aplicación.

¿Cómo se inicia un proyecto en Marvel App?

Para comenzar en Marvel App:

Crear un proyecto nuevo: Iniciar sesión y seleccionar "Create Your First Project".
Seleccionar dispositivo: Elige el tipo de dispositivo, como un Nexus, para el prototipo.
Nombrar prototipo: Asignar un nombre al prototipo, aunque sea temporal.

Una vez creado el proyecto, se puede comenzar a añadir contenido mediante una de las siguientes opciones:

Canvas: Dibujar directamente en la aplicación
Camera: Tomar fotos de bocetos existentes
Import: Importar medios desde el dispositivo

¿Cómo se construyen prototipos en Marvel?

El flujo de trabajo en Marvel App es intuitivo. Una vez subidas las fotos de bocetos, es posible agregar hotspots para interconectar las pantallas. Esto nos permite simular la interacción del usuario a través de diferentes pantallas. Por ejemplo, un botón de "entrar" podría enlazarse a una nueva fotografía que represente una pantalla de inicio de sesión.

Marvel también permite crear proyectos desde cero dibujando en un canvas en blanco y añadiendo elementos gráficos como íconos o texto. La integración de hotspots entre estos elementos permite dar vida a los prototipos mediante simulaciones de interacciones reales.

¿Qué ofrece InVision para prototipado?

InVision es otra potente herramienta de prototipado que se integra adecuadamente con Sketch, permitiendo a los usuarios transferir wireframes diseñados en Sketch a InVision. No obstante, InVision no es gratuita, aunque ofrece un período de prueba de 30 días.

¿Cómo utilizar InVision con Sketch?

La integración con Sketch es una de las características destacadas de InVision. Se puede exportar imágenes desde Sketch, que luego se importan en InVision, donde se pueden gestionar de forma individual en un tablero de proyecto.

¿Cómo se interactúa con los prototipos en InVision?

InVision permite agregar hotspots, similares a los de Marvel, para crear rutas de navegación dentro del prototipo. A través de los siguientes pasos, los diseñadores pueden optimizar la experiencia del prototipo:

Crear hotspots: Los hotspots permiten enlazar distintas pantallas importadas y definir acciones interactivas.
Personalizar interacciones: Ofrece opciones para seleccionar el tipo de animación o transición, dando dinamismo y realismo a la navegación.
Gestión de templates: Utilizar hotspots constantes a lo largo de múltiples pantallas simplifica la gestión y otorga coherencia al prototipo.

¿Cómo compartir y probar un prototipo en InVision?

InVision facilita el compartir de prototipos con el equipo de trabajo o con usuarios mediante enlaces públicos y privados. El proceso de compartición incluye:

Generar un link público: Permite que cualquier persona con el enlace visualice el prototipo.
Compartir por SMS: Facilita el acceso a los prototipos desde dispositivos móviles, ideal para pruebas de usabilidad.

InVision también ofrece modos de visualización que permiten ver el prototipo como lo haría un usuario final, asegurando así que cada interacción y transición se experimenten como se espera.

InVision y Marvel son herramientas que han sido diseñadas para simplificar el flujo de trabajo de prototipado, permitiendo a los profesionales dar vida a sus ideas de manera eficiente y efectiva. Además, su capacidad para integrarse con otras herramientas como Sketch y para proporcionar formas de compartir accesibles y prácticas, las convierte en una elección preferida para muchos diseñadores. Anímate a experimentar con estas herramientas y encuentra cuál se adapta mejor a tus necesidades de prototipado.