El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Haz demos interactivas de tu app o sitio web con Marvel App

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
06:21
  Añadir a marcadores

Transcripción

Cuando estamos en la etapa de propuestas de diseño, siempre hay que interactuar mucho con el cliente y evaluar su retroalimentación para poder ir corrigiendo y mejorando el diseño, que posteriormente pasará a ser un producto web o, en su defecto, una aplicación móvil. En el mercado, existen muchas alternativas, como la naciente Adobe XD, UXPin o InVision, la cual es una herramienta muy potente que integra flujos de trabajo con Sketch y Photoshop. Otra alternativa muy poderosa y de fácil uso, es Marvel App, que al igual que las demás, permite generar un demo interactivo para simular navegación entre las pantallas y poder recibir comentarios directamente del cliente. Ya sea que trabajes en un diseño creado en Sketch o Photoshop, o que solo dispongas de imágenes JPG, este tipo de herramientas te permitirá crear un prototipo en cuestión de minutos, el cual es muy valioso tanto para el cliente como para el equipo de desarrollo, pues permitirá un acercamiento funcional y ayudará a establecer los objetivos claros del proyecto. Actualmente, los temas de UX, o experiencia de usuario son de suma importancia y como tal, herramientas de este tipo abundan en el mercado. No importa cuál elijas, siempre y cuando tengas una de cabecera para poder realizar esta importante etapa de tu proyecto. Y como para muestra basta un botón, crearemos un prototipo sencillo con Marvel App. Lo primero que tenemos que hacer es acceder al sitio marvelapp.com. Aquí deberás crear tu cuenta. Una vez que tengas creada tu cuenta, podrás acceder al Dashboard de la aplicación En ese dashboard, puedes intentar con el vídeo o el proyecto de prueba que hay. Por ahora, vamos a pulsar en el botón Create Project y vamos a crear una nueva aplicación. Cómo ves, hay distintas formas para crear un prototipo. En este caso, vamos a elegir la opción de Website y vamos a ponerle un nombre. En este caso pondremos el nombre "Panadería". Listo. Y una vez que pusimos el nombre, pulsamos el botón Create Project. Por ahora, en este caso, utilizamos una plantilla gratuita, que encontramos en el sitio dribbble.com. Y de esta plantilla, generamos unas imágenes de manera independiente. La idea es que a través de estas imágenes, que son simples archivos JPG, vamos a trabajar y a crear un demo interactivo. Así que, una vez que ya tenemos el proyecto creado en Marvel App, vamos a pulsar el botón Add images, o, simplemente, puedes arrastrar o dejar caer tus imágenes, y, para este caso, vamos a pulsar el botón Add images y seleccionamos todas las imágenes. Esto va a subir, una a una, estas imágenes que ya tenemos listas y a partir de esto, podemos comenzar a hacer nuestra edición. Así que vamos a la opción de la primer pantalla, y aquí mismo, vamos a comenzar haciendo los links. En este caso, voy a seleccionar primero, la opción del Menú, y lo que voy hacer es crear un hotspot. Un hotspot es este espacio en azul, que me va a permitir a mí abrir esta pantalla de abajo, donde puedo seleccionar un espacio a dónde ir. En este caso, yo seleccioné con Menú, esta opción. Voy a dar Cerrar y después, voy a seleccionar la siguiente opción que diga Reservations y vamos a ir a la siguiente pestaña y vamos a seleccionar, ahora, uno nuevo. Todavía tenemos más pantallas por aquí, y vamos a poner la última, que dice Contacto, para que nos lleve a la última pestaña. Tal vez, por las imágenes que están ahorita y ese tipo de ejercicio, contextualmente, no sea la información que estamos viendo. Lo que nos interesa, es que veamos cómo podemos crear estas opciones para movernos a lo largo de las pantallas. Ahora, una vez que ya tenemos esto, yo puedo poner un botón en alguna sección que me regrese siempre a la página inicial. En este caso, vamos a crear también un hotspot de nuevo que me regrese al Index, cerramos, y yo me puedo cambiar de pestaña y aquí, en este caso, vamos a poner en esta imagen que me regrese también, a la página de Inicio y así sucesivamente, yo puedo ir eligiendo alguna de las opciones que me aparecen aquí para que me regrese siempre a la página de Inicio. De esta forma, estoy garantizando un flujo en la navegación de este prototipo. Claro está, que cuando tú tengas tu propio prototipo debes cuidar bien que todos los links funcionen y que te lleve adecuadamente a cada una de las secciones. También, tú puedes trabajar en las transiciones y elegir qué tipo de transición es la que quieres aplicar o, sin el Action, cuando tú estás trabajando y lo estás viendo en un dispositivo móvil tú decides si quieres trabajar con algún gesto. Esto hace que esta herramienta sea muy rápida. Por ahora, vamos a pulsar el botón Play. Cuando pulsamos el botón Play, obviamente, ya vamos a tener aquí una página web donde podemos estar interactuando con ella. En este caso, habíamos hecho un link en esta zona. Si no recordamos el link, esto ayuda al cliente, porque tú das clic en otro lado y automáticamente se resalta dónde tú puedes realmente dar clic. Así que damos un clic ahí, y me regresa al inicio. Que veamos el menú. Listo. Podemos entrar aquí, regresamos al inicio. Reservaciones, regresamos al inicio. Noticias, regresamos al inicio. Contacto y regresamos al inicio. De esta manera, es como podemos crear un prototipo interactivo. Y también tiene algo muy bueno. El cliente, cuando lo vea, puede dejar comentarios, para lo cual, simplemente, el cliente va a poder pulsar en esta sección de la parte de abajo, donde dice comments, así, cuando tú lo estás revisando, pulse en comentarios y aquí puede agregar el comentario que desee. Por ejemplo, podemos poner algo que diga: "Completar links de redes sociales". Leave comment. Eso queda como un comentario que después te va a aparecer a ti en una lista dentro de Marvel App para que tú puedas leerlo y hacer las modificaciones pertinentes. También podemos utilizar la vista de grid para poder movernos dentro de las distintas vistas, y, en caso de que exista alguna cuestión donde no podamos movernos o se quede atorado, podemos ir a la primer pantalla o simplemente navegar aquí, entre cada una de estas. Como ves, trabajar con Marvel App para crear un prototipo, es bastante sencillo.