Marvel App, La herramienta ideal para la elaboración de prototipos web

imagen-1

 

Es para todos conocido que para iniciar el proceso de diseño de una pagina web o una app, se deben seguir una serie de pasos, desde establecer la arquitectura de la información, pasando por generación de wireframes hasta llegar al prototipado. En este paso es importante la comunicación entre el equipo de trabajo y por supuesto el cliente, para que una vez finalizado no exista ningún cabo suelto a la hora de programar.

Aquí es donde entra Marvel app, una herramienta que nos permite agregar interactividad a los prototipos ya diseñados o diseñarlos directamente online para luego volverlos interactivos, permitiendo que tengamos una idea de cómo funcionará el proyecto y ayudar al cliente a que visualice y corrija la experiencia de uso y navegación de la web.

Esta herramienta es una web-app lo que se refiere a una herramienta online por lo que es necesario tener conexión a internet. Esto es una gran ventaja, ya que permite discutir en línea a través de comentarios directamente sobre los prototipos. Además ayuda a prototipar vía dispositivos móviles a través de la app descargable desde la iOS o Android store.

Tiene una versión gratuita, la cual permite crear dos proyectos simultáneos con funciones muy básicas y una versión paga la cual permite crear mas proyectos y usar funciones mas complejas.

¿Cómo funciona?

Es muy sencillo, primero diseña tu prototipo a mano, o con programas como illustrator, Photoshop, Sketch

 

img_2095-copia

 

Luego debéis cargar las imágenes dentro de la herramienta: Puede realizarse desde el ordenador (Memoria interna, Dropbox, Google Drive, Box o crear un diseño directamente desde la app) o desde el móvil (Cámara, Carrete de fotos o crear un diseño directamente desde la app).

screenshot-marvelapp-com-2018-05-17-12-42-10

VERSIÓN PC

 

img_2097-copia

VERSIÓN MÓVIL

 

Seguidamente debéis marcar los botones que hay dentro del diseño y colocar los hipervínculos hacia urls externas (1), anclas en el mismo diseño (2) o hacia otros diseños (3).

screenshot-marvelapp-com-2018-05-17-14-00-50-3

 

Al marcar estos botones, os dan las opciones de cómo queréis hacer las transiciones de pantalla, podéis elegir entre una gran variedad de efectos como fade, barrido a la derecha o a la izquierda, pop, flip, etc.

screenshot-marvelapp-com-2018-05-24-10-25-16

Otra de las configuraciones que podéis encontrar es la de poder ajustar qué acción debe realizar el usuario para que el botón os dirija a la Url deseada, podéis pedir al usuario que haga click o tap, o solo que haga hover con el ratón, o doble tap, o pinchar hacia adentro o hacia fuera (pinch out o pinch)

 

screenshot-marvelapp-com-2018-05-24-10-26-06

Una vez establecido los botones deseados con sus respectivos enlaces, llega la hora de realizar la prueba para enviar al cliente y resto del equipo de trabajo y que comprueben la interactividad de los prototipos . Para esto hay dos maneras, la primera (1) es para revisar como ha quedado todo el proyecto en general, es decir, todos los diseños que habéis cargado y realizado con cada uno de sus botones; la segunda (2) es para revisar como ha quedado la interactividad de un diseño en particular dentro del proyecto.

 

screenshot-marvelapp-com-2018-05-24-13-19-10

Finalmente, podéis compartir el proyecto con el cliente y compañeros para intercambiar comentarios y posibles cambios, en tiempo real.

screenshot-marvelapp-com-2018-05-25-12-49-29

 

¿Qué ventajas tiene?

Una de las ventajas mas destacadas es que al ser una herramienta online, cualquiera que tenga acceso a internet puede usarla. Es más, si aun no tenéis una cuenta creada igualmente podréis acceder a los diseños y dejar comentarios, lo cual es otra ventaja importante para el trabajo en equipo, pues el resto de los implicados en el proyecto podrán comentar y realizar correcciones sobre el mismo diseño, ayudando así a coordinar el trabajo y no perder tiempo en emails de ida y venida.

Ademas, es una herramienta compatible con otras plataformas, como Photoshop, Illustrator, Sketch entre otras; dado que podéis realizar previamente diseños con estas plataformas y trasladarlas a Marvel sin que se vean alteradas.

Otra ventaja importante es que tiene una app que facilita al usuario la revisión, modificación y realización de prototipos aun estando fuera del alcance de un ordenador de escritorio.

Y la ultima más importante ventaja es que tiene versión gratuita en la cual podéis trabajar con 2 proyectos simultáneos sin ningún coste aunque con funciones limitadas pero muy útiles para la interacción de prototipos.

Esperamos que os haya servido de ayuda a la hora de buscar herramientas indicadas para la realización de prototipos interactivos, ya que entendemos la importancia que esto conlleva a la hora de realizar el diseño de paginas web para luego desarrollar optimizando todo el tiempo posible para implementar cambios sugeridos por clientes y otros implicados en el proyecto.

 

Esta entrada pertenece a la categoría Aplicaciones móviles, desarrollo web, herramientas, usabilidad.

Comenta esta entrada

Tu email nunca será publicado o compartido. Los campos obligatorios están marcados con *

*
*

* Copy This Password *

* Type Or Paste Password Here *

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



NINJA!

Konami Easter Egg by Adrian3.com