Advertisement
  1. Web Design
  2. Prototyping

Como crear un prototipo interactivo con marvel

by
Read Time:9 minsLanguages:

Spanish (Español) translation by Armando Sotoca (you can also view the original English article)

Marvel es una excelente herramienta online que nos va a permitir crear prototipos de aplicaciones móviles y proyectos web. En este tutorial vamos a ver cómo podemos usar Marvel por primera vez, creando un sencillo prototipo de juego móvil y así poder mostrar cómo sería el proceso de navegación a través de las diferentes pantallas y opciones disponibles.

Actualmente hay un buen surtido de herramientas de prototipado disponibles: Invision, Framer, Flinto, Pixate y la lista continua. Entonces, ¿por qué debería usar Marvel? Siempre he pensado que lo que importa realmente no es la herramienta sino sentirnos agusto cuando trabajamos. Y usando Marvel yo me siento muy cómodo. 

Características

Algunas de las características destacadas que podemos encontrar en Marvel son:

  • Sincronización con Dropbox. Por ejemplo, si estamos trabajando en Photoshop y guardamos los cambios, si tenemos el archivo en Dropbox, nuestro prototipo se actualizaría automáticamente en tiempo real.
  • Posibilidad de añadir bocetos desde la aplicación móvil de Marvel. Por si queremos empezar desde bocetos hechos en papel.
  • Soporte de múltiples tipos de transiciones y gestos.
  • Posibilidad de crear equipos de trabajo ilimitados (imagina un equipo de trabajo para un cliente, un grupo de compañeros para un hackday, etc.)
  • Plantillas de diferentes dispositivos móviles para previsualizar los proyectos.
  • Una interfaz muy cuidada y llena de detalles.
  • Múltiples opciones de exportación y capacidades de compartir el prototipo.

¿Empezamos?

1. Primer contacto

Paso 1

Dirígete a https://marvelapp.com/ y accede a la herramienta. Ten en cuenta que necesitarás una cuenta en Dropbox para poder empezar a trabajar; de esta forma tienes la opción de sincronizar todos los archivos que necesites para tu prototipo. No necesitas tener Dropbox instalado para usar Marvel pero sí al menos una cuenta para poder identificar en Dropbox.com

Si ya estás registrado, ¡perfecto! Dale a Marvel acceso a tu cuenta para que podamos continuar al siguiente paso. Marvel hace uso sólamente de las imágenes y archivos que vayas a usar para el proyecto y nunca accederá a ningún otro archivo. Una vez hayas realizado este paso, deberías ver una pantalla como la de la imagen:

Pantalla bienvenida MarvelPantalla bienvenida MarvelPantalla bienvenida Marvel

Paso 2

Es el momento de crear nuestro primer proyecto. Haz clic en el botón Create project. Una nueva ventana emergente aparecerá para que introduzcas el nombre del proyecto. Fíjate que puedes rellenar otros datos adicionales como sharing the project with a team (no nos hace falta en esta ocasión) o añadir protección mediante una contraseña. Añade el nombre para tu proyecto. En mi caso y para esta ocasión voy a usar "WORDS". Ahora haz clic en el botón Create project.

Crear nuevo proyectoCrear nuevo proyectoCrear nuevo proyecto

Paso 3

Habiendo creado el proyecto, ahora necesitamos algo de contenido. Fíjate en las nuevas opciones disponibles que hay en la pantalla. Céntrate en Add designs from Dropbox y en Take photos of sketches que serían las opciones más importantes cuando estás creando nuevos proyectos en Marvel.

Add designs from Dropbox o Take photos of sketchesAdd designs from Dropbox o Take photos of sketchesAdd designs from Dropbox o Take photos of sketches

Es el momento de usar los archivos que he incluído en este tutorial. Si no los tienes aún, es el momento. Descarga una copia desde Github. Ahora tienes que subir todos los archivos .png a una carpeta en tu cuenta de Dropbox, donde tú quieras. Para este tutorial yo he creado una carpeta llamada WORDS donde he puesto todo el contenido. Cuando lo hayas hecho, vuelve a la pantalla.

Ahora haz clic en el botón Add images from Dropbox, selecciona todas las imágenes de la carpeta en Dropbox y continua.

Imágenes añadidas a MarvelImágenes añadidas a MarvelImágenes añadidas a Marvel

Paso 4

Fíjate en las imágenes. Su tamaño es de 750x1334px que casualmente coincide con la resolución de un iPhone 6. Vamos a decirle a Marvel que queremos crear un prototipo para este dispositivo. ¿Cómo? Haz clic en la opción de Settings para mostrar una nueva ventana con opciones. Te habrás dado cuenta que la plantilla de iPhone 6 ya está seleccionada por defecto. Esto ocurre porque Marvel ha autodetectado qué plantilla es la que encaja mejor en tu proyecto, basándose en el tamaño de tus imágenes. ¡Gracias Marvel!

Plantillas móviles disponibles en MarvelPlantillas móviles disponibles en MarvelPlantillas móviles disponibles en Marvel

Desde esta pantalla puedes seleccionar otras plantillas diferentes así como configurar otras opciones relacionadas con aspectos visuales y el comportamiento del prototipo. Vamos a dejarlo todo como está y vamos a volver a la pantalla anterior para continuar. Haz clic en el icono para cerrar la ventana.

2. Nuestro prototipo

Paso 1

Ahora viene la parte divertida: crear nuestra primera interacción. Mueve el cursor por encima de las imágenes para poder mostrar nuevas opciones. ¿Las ves? Por ejemplo, pasa por encima de la imagen 00-Intro.png y haz clic en Edit. Aparecerá un nuevo popup mostrando cómo crear áreas interactivas o hotspots. Continua y aparecerá algo parecido a lo que puedes ver en la siguiente imagen:

Añadiendo nuestra primera interacciónAñadiendo nuestra primera interacciónAñadiendo nuestra primera interacción

Consejo: Usa la opción de zoom disponible en el menú superior si lo ves todo demasiado grande. Yo por ejemplo estoy usando un zoom al 50%.

Paso 2

Para añadir interacciones y transiciones necesitamos crear "áreas interactivas" en nuestras imágenes. Estas áreas son lo que se conoce como hotspots. Podemos crearlas donde queramos simplemente haciendo clic y arrastrando hasta que hayamos creado la forma deseada.

Crea un nuevo hotspot encima del botón Casual mode que está incluído en el diseño. Cuando lo hayas hecho, una nueva barra de herramientas debería aparecer. Lo que vamos a hacer ahora es configurar el comportamiento de nuestra área interactiva.

Consejo: Puedes cambiar la posición y tamaño de un hotspot siempre que lo necesites. Simplemente selecciónalo y muévelo o escálalo.

Paso 3

En la barra de herramientas verás todas las imágenes incluídas en nuestro proyecto. Hemos creado el hotspot justo encima del botón Casual mode por lo que haz clic ahora sobre la imagen 01-Casual-option para seleccionarla y enlazar el hostpot con esta imagen, que será lo que veremos en pantalla cuando interactuemos con este hotspot en particular, simulando lo que ocurre cuando hagamos lo pulsemos con el dedo o hagamos clic sobre él.

Ahora fíjate en la opción de Hotspot Behaviour. Verás que el tipo de transición por defecto está en None. Esto quiere decir que no existirá animación entre las pantallas cuando se dispare la interacción. También podemos fijarnos en que la acción que dispara la interacción es el Click or Tap. Vamos a dejar estas opciones tal y como están por ahora.

Haz clic en la opción Duplicate this hotspot. En la nueva ventana selecciona la imagen 02-Challenge-option. Haz clic ahora en el botón verde para completar la acción.

Consejo: Duplicar los hotspots nos permite ahorrar tiempo al reutilizar la misma interacción y pantallas enlazadas entre las diferentes imágenes. Fíjate que para diferenciarlos, los hotspots duplicados pasan del color azul a un tono verde.

Duplicando hotspotsDuplicando hotspotsDuplicando hotspots

Paso 4

Con lo visto hasta ahora hemos cubierto las bases de creación de interacciones en Marvel. ¿Ha sido fácil, verdad? Ahora haz clic en el icono para cerrar la barra de herramientas y usando el slider de la zona superior de la pantalla, muévete hasta la siguiente imagen, 01-Casual-option.

Paso 5

Crea un nuevo hotspot justo encima de la opción Casual mode. Recuerda, simplemente con hacer clic y arrastrar ya podrás crearlo. Esta vez enlaza el hotspot con la imagen 06-casual-mode. Para cambiar el efecto de transición haz clic en Transition y selecciona Fade. Lo que estamos haciendo es simular el acceso a uno de los modos de juego de la aplicación.

Transiciones en MarvelTransiciones en MarvelTransiciones en Marvel

Paso 6

Crea un nuevo hotspot encima del botón Challenge mode y enlázalo con la imagen 02-Challenge-option. Haz uso de la opción Duplicate this hotspot para también copiarlo en la imagen 00-Intro.

Crea otro hotspot, esta vez encima del icono en forma de trofeo que puedes ver en la zona inferior de la imagen. Enlázalo a la imagen 04-trophies y cambia la transición a Slide Up. Usa de nuevo la opción de duplicarlo y cópialo en las imágenes 00-Intro y 02-Challenge-option.

Una vez más: crea un hotspot sobre la opción No limit. Enlázalo a 03-Nolimit-option. Cambia el tipo de transición a Push left y usa Duplicate this hotpost para copiarlo en 00-Intro y también en 02-Intro-Challange-option.

Tras todo esto, deberías tener algo similar a lo que ves en la siguiente imagen:

Nuestra imagen con hotspotsNuestra imagen con hotspotsNuestra imagen con hotspots

Paso 7

Usa el slider de la zona superior de nuevo para pasar a la siguiente imagen: 03-Nolimit-option. Crea un nuevo hotspot encima de la opción Back to menu. ahora haz clic en la opción Link to last visited screen. De esta manera nuestro prototipo volverá a la pantalla previa desde la que hicimos la interacción. Recuerda que podíamos acceder a esta pantalla usando los hotspots colocados en las imágenes 00, 01 y 02. Con esta opción podremos volver a cualquiera de estas imágenes y no sólo a una exclusivamente.

Paso 8

Pasemos a la siguiente imagen: 04-trophies. Presta atención a la opción Fixed header. Haz clic y arrastra el tirador hasta desplazarlo 92px hacia abajo. De esta forma estamos manteniendo fija nuestra cabecera mientras nos estemos haciendo scroll. Fíjate que esta imagen en particular tiene una altura de 2050px. Podremos ver este efecto cuando estemos listos para probar nuestro protipo.

Fixed header Fixed header Fixed header

Paso 9

Crea un nuevo hotpost encima del icono en la parte superior izquierda y enlázalo con la imagen 00-Intro. Selecciona Slide Down como tipo de transición. Duplica el hotspot y úsalo en 05-trophies-share, 08-results y 09-trophies-unlocked.

Más hotspots y transicionesMás hotspots y transicionesMás hotspots y transiciones

Crea otro hotspot adicional. Colócalo sobre todo el área que comprende el Trophy title 1. Vincúlalo a la imagen 05-trophies y marca Fade como el tipo de transición a emplear. Puedes ver el hotspot que yo he creado en la siguiente imagen:

Paso 10

Pasemos a la siguiente imagen: 06-casual-mode. Lo que vamos a hacer aquí es crear un hotspot para mostrar el menú de pausa y otro hotspot adicional para mostrar el resultado que veríamos al final de la partida.

Vamos a ello. Crea un nuevo hotspot encima del icono que está en la zona superior central, entre el temporizador y la puntuación. Enlázalo a la imagen 07-pause. Usa Fade como tipo de transición. Crea otro hotspot más y colócalo en el centro de la pantalla. Enlázalo a 08-results, marca Slide Fade como tipo de transición.

Example of hotspots created using MarvelExample of hotspots created using MarvelExample of hotspots created using Marvel

Paso 11

¡Siguiente imagen! Usa el slider de la zona superior hasta la imagen 07-pause. Ahora haz un hotspot encima de la opción Continue. Puedes usar la opción de Link to last visited screen o enlazar el hotspot directamente a la imagen 06-casual-mode para simular el efecto de volver al juego desde el menú de pausa.

Crea también un hotspot sobre la opción Back to menu y enlázalo a la imagen 00-Intro, marcando Slide Fade como tipo de transición.

Paso 12

¡Ya casi hemos terminado! Pasa a la imagen 08-results. Deberías estar viendo un hotspot que ya creamos con anterioridad en el icono de la barra superior de la imagen. Crea otro más sobre el botón New Game. Ahora enlázalo con la imagen 06-casual-mode y usa Fade como transición. Duplícalo en la imagen 09-trophies-unlocked.

Crea otro hotspot más, en la mitad de la pantalla. Puedes usar la imagen a continuación como referencia si la necesitaras:

Using Swipes gestures in MarvelUsing Swipes gestures in MarvelUsing Swipes gestures in Marvel

Enlázalo con la imagen 09-trophies-unlocked, usando Slide Left como tipo de transición y Swipe Left como acción. Cuando veas este prototipo en un dispositivo móvil, podrás usar el gesto de mover el dedo hacia la izquierda para disparar la interacción. Ten en cuenta que en sistemas de escritorio la acción seguirá siendo el clic.

Paso 13

Pasa a la imagen 09-trophies-unlocked. ¡Es la última! Bien, deberías ver dos hotspots ya creados. Crea uno más en la zona media-izquierda de la pantalla. Enlázalo con la imagen 08-results y escoge Slide Right como tipo de transición y Swipe Right como acción que dispare la interacción.

¡Final! Es el momento de ver cómo ha quedado nuestro prototipo y de compartirlo con otras personas.

3. Previsualización y opciones de distribución

Paso 1

Haz clic en la opción Preview del menú superior de Marvel. Una nueva ventana con tu prototipo en la plantilla del iPhone 6 debería aparecer. ¡Está vivo! Haz clic en el icono con forma de casa para volver automáticamente a la primera pantalla de tu prototipo.

Desde este momento puedes navegar a través de las diferentes pantallas e interactuar con los diferentes hotspots que has creado

.
Prototyping with MarvelPrototyping with MarvelPrototyping with Marvel

Consejo: Fíjate como el cursor cambia cuando pasar por encima de un hotspot (en sistemas de escritorio). Si no recuerdas exactamente dónde están los hotspots, simplemente haz click en cualquier parte de la pantalla para mostrar dónde están.

Paso 2

Todo debería funcionar correctamente. ¡Espero que te guste el resultado! Ahora cierra la ventana con el prototipo y vuelve a la pantalla en la que hemos estado trabajando. Haz clic sobre la opción de cerrar para poder volver a la pantalla principal del proyecto.

Desde aquí podrás acceder ahora a todas las pantallas de edición de las imágenes, incluir nuevas, actualizar las que ya tienes, incluir un icono para la aplicación, etc. Si necesitas lanzar de nuevo el prototipo, haz clic en la opción Play para verlo una vez más.

Haz clic en la opción Share. Verás todas las opciones disponibles que tienes para compartir el prototipo que acabas de crear con otras personas como diseñadores, desarrolladores o clientes.

Sharing options in MarvelSharing options in MarvelSharing options in Marvel

Incluso puedes descargar los archivos necesarios para visualizar el prototipo donde quieras. Lo único que tienes que hacer es cerrar la ventana de Share y en la pantalla principal del proyecto hacer clic en la opción Download para obtener un archivo comprimido en formato zip con todos los ficheros necesarios.

Conclusiones

Todas las cosas que hemos visto a lo largo del tutorial te servirán para entender lo fácil que es emplear Marvel para empezar a crear rápidamente sencillos prototipos. De todas formas, si tienes alguna duda en particular o sobre Marvel en general, deja un comentario a continuación. ¡Estaré encantado de echarte una mano!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.